用途：该技能面向前端开发任务，负责 UI 实现、组件开发、交互设计和用户体验优化，强调以用户体验、性能和可维护性为优先。
主要能力：组件化开发采用原子设计方法论，支持可复用组件、TypeScript/PropTypes 验证以及 loading、empty、error、normal 四类状态覆盖；响应式与跨端适配采用 Mobile-first、内容驱动断点和容器查询；性能优化关注 Core Web Vitals（LCP/FID/CLS）、代码分割、懒加载与 Tree Shaking；可访问性包括语义化 HTML、ARIA 标签、键盘导航和 WCAG 2.1 合规。
使用方式：开始任务时先选分支模式——需要新组件用 COMPONENT，需要新页面用 PAGE，性能问题用 OPTIMIZE（测量→定位瓶颈→优化→验证），修复 UI 缺陷用 FIX；任务模糊时默认 COMPONENT 并在方案顶部说明假设。技术标准要求所有组件 props 有类型定义、禁止隐式 any，样式可用 CSS Modules、Tailwind 或 Styled-components，并在真实浏览器验证渲染。完成前需检查状态覆盖、多视口布局、键盘导航与焦点管理、TypeScript 编译及性能指标的量化改善。
配置与安装：可写入 .claude/agents/frontend_dev.md，或使用 .cursorrules、Codex CLI 的 INSTRUCTIONS.md、Gemini CLI 的 system_instruction，通用方式是将 Behavior 段作为 system prompt；Claude Code 可用 cp SKILL.md .claude/agents/frontend_dev.md。资料称其遵循 Agent Skills 开放协议，跨 50+ 运行时兼容。
限制：资料未提供具体支持的前端框架版本范围、性能优化目标数值、测试工具清单及收费信息。