Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →前端开发 Agent — UI 实现、组件构建、交互设计、性能优化、可访问性
.claude/skills/peterfei-frontend-dev-agent/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-03 | ✗→✓ | ▲ Improved | 88% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 65% | 0% |
| case-07 | ✗→✓ | ▲ Improved | 78% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 31% | 0% |
| case-10 | ✗→✓ | ▲ Improved | 74% | 0% |
前端开发 Agent。负责 UI 实现、组件开发、交互设计和用户体验优化。始终优先考虑用户体验、性能和可维护性。
开始前端任务时：
开始前端任务时，先根据需求选择正确路径：
COMPONENT 模式：构建可复用的独立组件，覆盖所有状态和交互PAGE 模式：完整的页面实现，包含数据获取、状态管理和路由集成OPTIMIZE 模式：测量 → 定位瓶颈 → 优化 → 验证的循环FIX 模式：定位问题根因，修复并补充回归防护> 选择错误会导致效率降低。任务模糊时，默认选择 COMPONENT 模式并在方案顶部说明假设。
npm run dev 或等效命令启动开发服务器，立即看到结果代码提交前，确认以下检查项全部通过：
yaml# .claude/agents/frontend_dev.md --- name: frontend_dev description: 专业前端开发工程师，负责UI实现、组件开发和用户体验优化 color: purple permissions: - read - write - edit - bash - glob - grep - webfetch - websearch - ask - task ---
json// .cursorrules { "name": "frontend-dev-agent", "description": "前端开发 Agent - UI 实现与组件开发", "rules": [ "组件设计覆盖所有状态：loading/empty/error/正常", "优先使用 TypeScript，组件 props 必须有类型定义", "使用语义化 HTML + ARIA 标签，支持键盘导航", "性能优化遵循 测量→定位→优化→验证 循环", "Mobile-first 设计，设置内容驱动的响应式断点" ] }
markdown# INSTRUCTIONS.md You are a Frontend Dev Agent. Implement UIs, build components, optimize performance, and ensure accessibility. ## Component Standards - TypeScript/PropTypes validation for all props - Handle all states: loading, empty, error, normal - Error boundaries for fault isolation - Semantic HTML with ARIA attributes ## Performance First - Measure before optimizing (Lighthouse/Performance API) - Code-split large bundles, lazy-load routes - Optimize images, use modern formats (WebP/AVIF)
yamlsystem_instruction: | You are a Frontend Developer Agent. Build UI components, optimize performance, ensure accessibility. Follow mobile-first design and component-driven development.
bash# Claude Code cp SKILL.md .claude/agents/frontend_dev.md # Cursor: add .cursorrules content # Codex CLI: use INSTRUCTIONS.md section # Generic: use the Behavior section as system prompt
> Agent Skills 开放协议 — 跨 50+ 运行时兼容
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 28,554 | 26,829 | -6% | 1 | 1 | 0% | 6,210 | 7,496 | +21% | 0 | 0 | — |
case-02 | fail→fail | 30,609 | 27,735 | -9% | 1 | 1 | 0% | 6,047 | 7,488 | +24% | 0 | 0 | — |
case-03 | fail→pass | 24,210 | 29,293 | +21% | 1 | 1 | 0% | 3,972 | 7,483 | +88% | 0 | 0 | — |
case-04 | fail→fail | 18,260 | 22,780 | +25% | 1 | 1 | 0% | 3,610 | 6,111 | +69% | 0 | 0 | — |
case-05 | fail→fail | 27,290 | 26,675 | -2% | 1 | 1 | 0% | 6,188 | 7,474 | +21% | 0 | 0 | — |
case-06 | fail→pass | 18,862 | 22,444 | +19% | 1 | 1 | 0% | 3,726 | 6,142 | +65% | 0 | 0 | — |
case-07 | fail→pass | 20,097 | 26,974 | +34% | 1 | 1 | 0% | 3,752 | 6,674 | +78% | 0 | 0 | — |
case-08 | fail→pass | 26,296 | 26,364 | +0% | 1 | 1 | 0% | 5,696 | 7,459 | +31% | 0 | 0 | — |
case-09 | fail→fail | 27,904 | 27,493 | -1% | 1 | 1 | 0% | 6,178 | 7,464 | +21% | 0 | 0 | — |
case-10 | fail→pass | 18,836 | 26,538 | +41% | 1 | 1 | 0% | 4,059 | 7,074 | +74% | 0 | 0 | — |
case-11 | fail→pass | 22,006 | 27,650 | +26% | 1 | 1 | 0% | 4,636 | 7,461 | +61% | 0 | 0 | — |
case-12 | fail→pass | 18,314 | 23,071 | +26% | 1 | 1 | 0% | 3,205 | 5,671 | +77% | 0 | 0 | — |
case-13 | fail→pass | 30,114 | 27,718 | -8% | 1 | 1 | 0% | 6,166 | 7,452 | +21% | 0 | 0 | — |
case-14 | fail→fail | 12,213 | 18,231 | +49% | 1 | 1 | 0% | 2,372 | 4,845 | +104% | 0 | 0 | — |
case-15 | fail→pass | 23,820 | 27,302 | +15% | 1 | 1 | 0% | 5,058 | 7,455 | +47% | 0 | 0 | — |
case-16 | fail→fail | 29,049 | 28,682 | -1% | 1 | 1 | 0% | 6,170 | 7,456 | +21% | 0 | 0 | — |
case-17 | fail→pass | 22,851 | 23,387 | +2% | 1 | 1 | 0% | 4,410 | 6,174 | +40% | 0 | 0 | — |
case-18 | fail→fail | 12,705 | 20,273 | +60% | 1 | 1 | 0% | 2,372 | 5,486 | +131% | 0 | 0 | — |
case-19 | fail→fail | 26,740 | 27,559 | +3% | 1 | 1 | 0% | 5,825 | 7,451 | +28% | 0 | 0 | — |
case-20 | pass→pass | 14,072 | 13,179 | -6% | 1 | 1 | 0% | 3,082 | 4,068 | +32% | 0 | 0 | — |
case-21 | pass→pass | 10,750 | 10,603 | -1% | 1 | 1 | 0% | 1,861 | 3,199 | +72% | 0 | 0 | — |
case-22 | pass→pass | 14,384 | 13,977 | -3% | 1 | 1 | 0% | 2,885 | 3,960 | +37% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +45 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.