用途：为文档生成带注释的 UI 截图，固定使用一套视觉风格——等宽橙色（#e8590c）箭头配白色光晕、目标外双描边蓝色选框，概览模式可在变暗截图上叠加一排编号标注卡片。不得使用素材箭头、描边折线或临时样式。
主要能力：绘制逻辑集中在 scripts/annotate.py，包含超采样、Bézier 曲线带、光晕、卡片、阴影与 WEBP 导出。使用者只需产出准确坐标和配置 JSON，不要手动重绘。
使用方式：先以 deviceScaleFactor: 2 截图，并用程序记录每个目标的 bounding box 保存为 JSON，包含面板、侧边栏等区域，不要目测坐标。Playwright 的 locator(...).boundingBox() 在多级 iframe 中返回主视口坐标，可直接使用。WordPress 编辑器可能弹出欢迎引导遮挡点击，可用 Escape 循环关闭。截图前应清理更新提示、调试徽章、插件通知等开发环境痕迹。随后按脚本 docstring 中的 schema 编写配置 JSON（坐标单位 CSS px，相对截图左上角），运行：python .agents/skills/doc-screenshots/scripts/annotate.py config.json --crops crops/。脚本依赖 Python 与 Pillow，output 必须是 .webp 路径。
质量检查：查看全尺寸 WEBP 及脚本保存的箭头、轮廓放大裁剪图，确认箭头尖端离轮廓 5–7px、光晕连续、箭头不交叉、stderr 无卡片文字溢出警告；并在 ~860px 和 ~343px 宽度下检查可读性，不合格则简化而非缩小。
模式选择：指向具体控件（如对话框操作）用轮廓加自由箭头，不加变暗和卡片；概览图例用卡片、轮廓加变暗，dim.region 设为承载控件区域使其保持全亮。仅当浏览器上下文对读者重要时才加 chrome_bar。
限制：箭头端点、不交叉、轮廓包住整个控件、卡片文案长度等布局规则需人工判断；样式常量已内置脚本，不应覆盖。仓库源文件仅位于 .agents/skills/ 下，.claude/skills 是指向其的符号链接，不要另建副本。