frontend-ui-engineeringcommit f97d842SKILL.md · UI 与交互

前端 UI 工程

构建可访问、响应式、遵循项目设计系统的生产级界面，避免千篇一律的 AI 风格。

npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

权限: read-repo
write-files
shell
network
兼容工具: Claude Code, Codex, Cursor, Copilot, Gemini CLI
GitHub: 112.3k
来源: 社区 · Addy Osmani
状态: 扫描通过
许可证: MIT
分类: UI 与交互
代码仓库: github.com/addyosmani/agent-skills/skills/frontend-ui-engineering

核心规则

每个组件都必须达到 WCAG 2.1 AA：可用键盘操作、有标签、对比度充足。

执行阶段

阶段 01组织组件
把组件相关文件放在一起，优先组合而非配置，并把数据获取与展示分开。
阶段 02选择状态方案
从本地状态到全局 store 选择够用的最简方案，属性逐层传递不超过三层。
阶段 03遵循设计系统
使用语义化颜色令牌、统一间距尺度和标题层级；参考案例只作依据，不照搬他人品牌或布局。
阶段 04可访问与响应式
实现键盘导航、ARIA 标签和焦点管理，移动优先布局，并提供骨架屏、空状态和错误状态。
阶段 05验证
检查无控制台错误、可用 Tab 遍历、读屏可理解，在 320/768/1024/1440px 下正常，且无 axe-core 警告。

权限说明（据 SKILL.md 整理）

能力	是否需要	说明
文件写入	需要	创建和修改组件、样式、钩子及其测试文件。
命令执行	不需要	技能未要求运行特定命令，验证通过浏览器开发者工具和 axe-core 进行。
网络外发	不需要	不需要联网，可使用团队提供的参考资料。

SKILL.md 头部信息（YAML）commit f97d842

---
name: frontend-ui-engineering
description: Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
---

核心规则

执行阶段

阶段 01组织组件

阶段 02选择状态方案

阶段 03遵循设计系统

阶段 04可访问与响应式

阶段 05验证

权限说明（据 SKILL.md 整理）

SKILL.md 头部信息（YAML）

相关技能