メニュー
前端测试验证，基于 .plan/features.json 已完成任务驱动：运行已有测试 + Playwright E2E 验证（控制台错误、响应式、截图）+ 逐任务检查验收标准。当用户说 "/frontend-test"、"前端测试"、"跑前端测试"、"验证前端"、"E2E 测试" 时触发。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-test |
| description | 前端测试验证，基于 .plan/features.json 已完成任务驱动：运行已有测试 + Playwright E2E 验证（控制台错误、响应式、截图）+ 逐任务检查验收标准。当用户说 "/frontend-test"、"前端测试"、"跑前端测试"、"验证前端"、"E2E 测试" 时触发。 |
基于 .plan/features.json 已完成的前端任务，执行三层验证：已有测试 → E2E 验证 → 验收标准检查。
读取 features.json → 框架检测 → 运行已有测试 → 启动 Dev Server → E2E 验证 → 验收标准检查 → 生成报告 → 清理
读取 .plan/features.json，过滤目标任务：
domain 字段：只取 domain=frontend 且 passes: true 的任务/frontend-test admin-web）：进一步只取 app 匹配的任务domain 字段：取所有 passes: true 的任务appPath 路由：如果任务含 appPath 字段，在对应目录下执行测试。
如果无已完成任务，提示用户先完成开发，停止流程。
| 框架 | 检测条件 | 测试命令 | 启动命令 | 默认端口 |
|---|---|---|---|---|
| Next.js | next.config.* 存在 | npm test | npm run dev | 3000 |
| Vite (React/Vue3) | vite.config.* 存在 | npx vitest run 或 npm test | npm run dev | 5173 |
| Vue CLI (Vue2) | vue.config.js 存在 | npm test | npm run serve | 8080 |
| CRA | package.json 含 react-scripts | npm test | npm start | 3000 |
无法自动判定时，AskUserQuestion 询问启动命令和端口。
npx playwright --version
npm install -D @playwright/test && npx playwright install chromium，等待确认执行框架对应的测试命令：
<测试命令> 2>&1
记录：通过数 / 失败数 / 跳过数 / 总耗时。
如果测试全部通过 → 继续。有失败 → 记录详情，继续（不中断）。
按优先级获取：
.plan/task.md 中的页面/路由列表src/pages/ 或 src/app/ 目录自动发现路由/（首页）nohup <启动命令> > /tmp/frontend-test-server.log 2>&1 &
记录 PID，轮询等待服务就绪（每 2s 一次，超时 60s）。
对每个页面，编写临时 Playwright 脚本执行：
验证项：
e2e-results/screenshots/{routeName}-desktop.png对每个页面在 3 个视口下截图和检查：
| 视口 | 宽度 | 检查项 |
|---|---|---|
| 手机 | 375px | 无横向滚动、内容可见 |
| 平板 | 768px | 无横向滚动、布局正常 |
| 桌面 | 1440px | 无横向滚动、布局正常 |
截图保存到 e2e-results/screenshots/{routeName}-{viewport}.png。
kill <PID>
# 如 PID 无效
lsof -ti:<端口> | xargs kill -9
逐任务检查 acceptance 字段中的每条验收标准：
前端测试报告
===========
框架: {框架名}
已完成任务: {N} 个
1. 已有测试: [PASS/FAIL] ({通过数}/{总数} 通过, 耗时 {X}s)
2. E2E 验证: [X/Y 页面通过]
- / [PASS] (截图: e2e-results/screenshots/home-desktop.png)
- /about [PASS]
- /dashboard [FAIL] (控制台错误: TypeError: Cannot read property 'map' of undefined)
3. 响应式检查: [PASS/FAIL]
- 375px: 无横向滚动 [PASS]
- 768px: 无横向滚动 [PASS]
- 1440px: 无横向滚动 [PASS]
4. 验收标准: [X/Y 通过]
任务 3 "用户列表页面": 3/3 通过
任务 4 "订单详情页": 2/3 通过
- [FAIL] "订单状态标签显示正确颜色"
截图目录: e2e-results/screenshots/
结论: [通过/不通过]
判定规则：
| 错误 | 处理 |
|---|---|
| features.json 不存在 | 提示先运行 /plan-init + /frontend-single |
| 无已完成任务 | 提示先完成开发 |
| Playwright 未安装 | 提示安装，等待确认 |
| Dev Server 启动失败/超时 | 输出日志，跳过 E2E，继续验收检查 |
| 页面加载超时 | 标记该页面 FAIL，继续下一页 |
| 进程清理失败 | 通过端口号强制 kill |
将现有 Skill 项目改造成同时支持 Claude Code 和 Codex 的插件式安装项目，生成 .claude-plugin、.codex-plugin、marketplace、package.json 与 README 配置；安装命令默认不指定远程分支。
精简版后端开发编排，顺序执行四个核心 skill（plan-write → plan-next → code-simplifier → code-fixer）。当用户说 "/backend-single"、"精简开发" 时触发。需先运行 /plan-init 完成任务分解。适用于现有后端项目的功能开发。
智能开发团队编排，使用 Agent Team 协调六个 skill 的全流程自动化执行。当用户说 "/backend-team" 时触发。从方案预研到代码交付一站式完成。
新项目脚手架团队编排，从零开始搭建项目：需求收集 → 架构设计 → 脚手架搭建 → TDD 开发 → 验证 → CR。当用户说 "/framework-team" 时触发。适用于没有现有代码库的全新项目。
精简版前端开发编排，顺序执行四个核心 skill（plan-write → plan-next → code-simplifier → code-fixer）。当用户说 "/frontend-single"、"前端精简" 时触发。需先运行 /plan-init 完成任务分解。支持 React、Vue3、Vue2 框架自动检测。
前端开发团队编排，串联设计 → 编码 → 打磨 → 审查的完整流水线。当用户说 "/frontend-team" 时触发。支持 React、Vue3、Vue2 三种前端框架，集成 ui-ux-pro-max 设计系统和 frontend-design 美学指南。