Menu
自动截屏功能页面。当用户需要更新项目文档截图、生成功能演示图、或需要记录当前 UI 状态时触发。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | auto-screenshot |
| description | 自动截屏功能页面。当用户需要更新项目文档截图、生成功能演示图、或需要记录当前 UI 状态时触发。 |
自动运行项目并对主要功能页面进行全屏截屏，保存到 /docs/screenshots 目录。
http://localhost:3000）# 如果前端服务未启动，先启动
cd frontend && pnpm dev
cd frontend
# 安装 Playwright（如果尚未安装）
pnpm add -D playwright
# 安装浏览器（首次使用）
npx playwright install chromium
cd frontend
npx tsx scripts/screenshot.ts
| 路径 | 文件名 | 描述 |
|---|---|---|
/ | landing-page.png | 产品落地页 |
/chat | chat-interface.png | 用户聊天界面 |
/admin | admin-dashboard.png | 管理后台仪表盘 |
/admin/quick-setup | quick-setup.png | 快速配置向导 |
/admin/agents | agent-list.png | Agent 列表 |
/admin/single | single-mode.png | 单 Agent 模式配置 |
/admin/multi | multi-mode.png | 编排模式配置 |
/admin/settings | settings.png | 系统设置 |
/admin/settings/mode | mode-settings.png | 模式设置 |
/admin/skills | skills-list.png | 技能列表 |
/support | support-workbench.png | 客服工作台 |
docs/
├── screenshots/
│ ├── landing-page.png
│ ├── chat-interface.png
│ ├── admin-dashboard.png
│ └── ...
└── SCREENSHOTS.md # 截图索引文件
可在 scripts/screenshot.ts 中修改：
const CONFIG = {
baseUrl: 'http://localhost:3000', // 服务地址
outputDir: './docs/screenshots', // 输出目录
viewport: { width: 1920, height: 1080 }, // 视口大小
timeout: 30000, // 超时时间
};
在 PAGES 数组中添加：
{ path: '/admin/new-page', name: 'new-page', description: '新页面描述' },
图片压缩检查规则。当添加或修改 README 引用的图片时自动触发。检查图片是否超过 100KB，超出则压缩。推荐使用 avif/webp 格式。触发场景：添加新图片到仓库、更新 README 中的截图、发版前检查。
Handle README.md image references for GitHub and Gitee platforms. Use when writing or converting README.md files that contain images, ensuring correct image paths for each platform. GitHub READMEs use Qiniu cloud URLs (via qiniu-upload skill), Gitee READMEs use local relative image paths.
发版流程 - 仔细阅读上个版本到现在版本的内容，把更改功能放到项目CHANGELOG.md目录下，处理README图片引用，然后提交且推送所有源码到GitHub和Gitee双平台，再之后打tag 触发条件：用户要求发版、发布、release、打tag
前端组件设计规范与最佳实践。在编写任何前端代码（React/Next.js 组件、页面、hooks）时自动触发。确保代码复用性、封装性、单一职责原则。触发场景包括创建新的前端组件或页面、重构现有前端代码、添加新功能到前端、任何涉及 frontend 目录的代码修改。此技能始终生效。
后端代码测试验证规则。此技能在以下情况下自动触发： - 任何后端代码修改（backend/ 目录下的 .py 文件） - 新增功能开发 - Bug 修复 - 代码重构 核心原则： 1. 后端代码修改必须有对应的测试用例 2. 修改业务逻辑时必须同步更新相关测试用例 3. 测试全部通过才算功能完成 触发关键词：后端、backend、python、测试、test、pytest、功能、feature、修复、fix、实现、修改、完成、验证 alwaysApply: true