1. 基本信息
| 项目 | 内容 | 数据来源 |
|---|---|---|
| 名称 | frontend-ui-engineering | GitHub API / SKILL.md |
| 作者/维护者 | Addy Osmani（addyosmani/agent-skills 仓库所有者），外部协作者 Junghwan（GitHub 账号 shaun0927，@DaedalGames）、yaphi1、Dhruv Trivedi（dj2313）等 |
GitHub API（commits/PR） |
| 来源链接 | https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering | — |
| 许可证 | MIT | GitHub API |
| GitHub Stars / Forks | 所属仓库 80,788★ / 8,713 forks（该数字属整个 agent-skills 合集，不代表本技能个体热度，仅供了解所属仓库规模） | GitHub API |
| 最新版本 | 无独立版本号；本子技能自身最近一次内容提交为 2026-04-17（无障碍修复），仓库层面 2026-07-07 另有一次涉及本技能描述词的评测框架维护提交 | GitHub API（commits） |
| 安装方式 | Claude Code / Codex 原生插件市场一条命令安装，或 npx skills add 单独安装本技能（见第 10 章） |
仓库 README |
2. 功能介绍与亮点
frontend-ui-engineering 是一份把资深前端工程师的隐性判断标准显式化的技能，目标是让 agent 产出的界面“看起来像设计感强的工程师做的，而不是 AI 生成的”。
核心能力：
- 组件架构规范：文件同位组织（组件、测试、Storybook、hook 同目录）、组合优于配置、单一职责拆分、容器/展示分离
- 状态管理决策树：从本地
useState到跨组件 lifted state、Context、URL state、服务端状态（React Query/SWR）到全局 store（Zustand/Redux），按场景给出选型建议，并提醒避免超过 3 层的 prop drilling - “避免 AI 审美”对照表：逐条列出 8 类常见 AI 生成 UI 的通病（紫色渐变、过度圆角、通用 Hero 区、Lorem ipsum 占位文案、阴影堆叠等）及对应的生产级替代做法
- 设计系统遵循：间距刻度、字号层级、语义化颜色 token、对比度要求
- WCAG 2.1 AA 无障碍完整章节：键盘导航、ARIA 标签、焦点管理、有意义的空状态/错误状态，均附代码示例
- 响应式设计：移动优先，明确 4 个测试断点（320/768/1024/1440px）
- 加载与过渡：骨架屏优先于 spinner、乐观更新（optimistic update）示例代码
- 附常见借口对照表（“先不做无障碍”“原型不用管样式”等）与“红旗清单”“构建后验证清单”
亮点：纯 Markdown 零依赖零脚本；仓库为该技能配备了独立的自动化评测夹具（evals/cases/frontend-ui-engineering.json + evals/fixtures/frontend-ui-engineering/），持续验证触发词与行为质量；子目录本身有 2 名可核实身份的外部贡献者报告并修复了真实的按钮无障碍缺陷（Space 键误触发页面滚动），两次修复均已合并入主分支，是“真实使用问题被外部用户发现并修复”的直接证据。
3. 适用场景
固定分类：前端与设计
- 使用 Claude Code / Codex 构建或修改用户界面、希望 agent 产出的组件避免“一眼 AI 味”（通用紫色渐变、过度圆角等）的初中级前端开发者
- 需要满足 WCAG 2.1 AA 无障碍要求、但团队没有专职无障碍工程师的小团队
- 需要 agent 在状态管理选型（本地/跨组件/全局）上有章可循、避免过度设计或 prop drilling 的场景
4. 跨 Agent 兼容性
- Claude Code：原生支持——仓库自带
.claude-plugin目录，可通过插件市场安装，也可用npx skills add直接放入.claude/skills/ - Codex：原生支持——仓库自带
.codex-plugin目录，npx skills add官方支持列表明确列出 Codex - OpenClaw：原生支持——技能安装 CLI（
vercel-labs/skills）官方支持列表明确列出 OpenClaw，对应路径skills/（项目级）/~/.openclaw/skills/（全局） - Hermes Agent：原生支持——同一份 CLI 官方支持列表明确列出 Hermes Agent，对应路径
.hermes/skills/（项目级）/~/.hermes/skills/（全局）
（基于已抓取的官方安装文档判断，未为兼容性单独发起搜索）
5. 推荐理由
AI 生成的前端界面有一套容易被一眼认出的通病——千篇一律的紫色渐变、过度圆角、缺失的无障碍支持。frontend-ui-engineering 把资深前端工程师做代码评审时的隐性标准显式化成一份可执行清单，覆盖组件架构、状态管理选型、设计系统遵循与 WCAG 无障碍要求，并配有仓库自带的自动化评测夹具持续验证质量，是目前收录的前端类技能里覆盖面最全、也是首个有真实外部无障碍缺陷报告与修复记录的通用型 UI 工程技能。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 7 | 所属仓库整体 80,788★ 属于整个 agent-skills 合集，不代表本技能个体热度；该子目录自身有 2 名可核实身份的外部贡献者——shaun0927（真实身份 Junghwan，任职于 @DaedalGames）既是问题报告者（issue #78，指出自定义按钮示例的 Space 键会误触发页面滚动）又是合并修复的作者（PR #79），yaphi1（2014 年创建的老账号）另提交了一次已合并的无障碍指引修复（PR #58）——两次独立外部贡献均已合并入主分支 |
| 可用性 | 9 | SKILL.md 约 10.7KB，含大量可直接复制的 React/TSX 代码示例与决策对照表；仓库为该技能配备独立的自动化评测夹具（evals/）持续验证触发与行为质量；2026-07-07 仍有涉及该技能的维护提交；MIT 许可，无付费依赖；支持插件市场一键装或 CLI 单独装 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单： ① 执行 shell 命令——技能目录内仅一份 SKILL.md，不含任何可执行脚本，命令均以代码示例形式展示 ② 联网外发数据——技能内容为本地前端编码指导，不涉及技能自身向外部服务器发送数据 ③ API key/凭据——不涉及，技能本身不要求任何密钥 ④ 未发现可疑指令——抓取 SKILL.md 全文，内容均为透明的前端工程方法论与代码示例，无混淆代码或隐蔽外发 ⑤ 作者信誉——Addy Osmani 为公开可查的 Web 工程背景个人；外部贡献者 shaun0927（@DaedalGames 真实雇员）、yaphi1（十余年历史的真实账号）均非匿名小号 ⑥ License——MIT，明确 ⑦ 维护时间——子目录自身最近一次内容提交 2026-04-17，仓库层面 2026-07-07 仍有涉及本技能描述的维护提交
综合评分：8.33（三项均值，四舍五入至两位小数）
7. 跟同类 Skills 相比的优势
| 项目 | 定位 | 与 frontend-ui-engineering 的差异 |
|---|---|---|
| accessibility（Addy Osmani 另一仓库 web-quality-skills） | 专注 WCAG 合规审计与逐条修复，单一维度深挖 | 只做无障碍这一件事，附带独立的 WCAG 条款速查文件；frontend-ui-engineering 覆盖组件架构、状态管理、设计系统、响应式、无障碍等 UI 工程全流程，无障碍只是其中一个章节，广度更大但无障碍单项深度不及专项技能 |
| accessibility-audit（webflow-skills 仓库） | 针对已发布的 Webflow 站点做 WCAG 合规巡检，输出审计报告 | 面向“审计已上线站点”，依赖 Webflow MCP 连接才能运作；frontend-ui-engineering 面向“从零构建组件时如何写代码”，介入时机更早（编码阶段而非审计阶段），不依赖任何特定平台的 MCP 连接 |
| shadcn（shadcn-ui/ui 仓库） | 开箱即用的 React 组件库 + CLI，直接生成具体组件代码 | 定位是“给你现成组件”；frontend-ui-engineering 定位是“教你怎么写好组件”的方法论与检查清单，不提供预制组件代码，两者可以配合使用——用 shadcn 出组件、用本技能的规范做工程把关 |
frontend-ui-engineering 既不是站点审计工具，也不是组件库，而是把“资深前端工程师做代码评审时的隐性标准”显式化成 agent 可执行的清单，尤其是“避免 AI 审美”这套正反对照表在同类技能中较少见。
8. 用户评价
该技能所属的 agent-skills 项目本身有独立第三方评测文章，其中明确点出仓库内“四个特别值得关注”的技能，但 frontend-ui-engineering 不在被重点展开评价之列，因此该子技能目前尚无第三方平台的具名评价文章。不过该子目录本身有直接的实际使用证据：shaun0927（任职于游戏公司 @DaedalGames）报告了一处真实的按钮组件无障碍缺陷（Space 键误触发页面滚动）并提交修复，yaphi1 另提交了一次无障碍指引修复，两次改进均已合并入主分支。
9. 其他补充
仓库为该技能配备了独立的自动化评测夹具（evals/cases/frontend-ui-engineering.json + evals/fixtures/frontend-ui-engineering/），用于验证触发词、路由准确性与执行行为质量，是 24 个工程技能中已知具备此类自动化质量保障机制的技能之一。SKILL.md 正文“See Also”提到一份 references/accessibility-checklist.md 参考文件，但该文件在仓库当前内容树中并不存在（见第 11 章）。
10. 安装使用方式
- Claude Code 插件市场：
/plugin marketplace add addyosmani/agent-skills，再执行/plugin install agent-skills@addy-agent-skills - Codex：仓库自带
.codex-plugin，可通过 Codex 原生插件机制安装 - 通用 CLI（含 OpenClaw / Hermes Agent）：
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering（仅安装该子技能，CLI 会按所选 agent 自动放入对应目录，如 OpenClaw 的skills/、Hermes Agent 的.hermes/skills/） - 本地开发：
git clone https://github.com/addyosmani/agent-skills.git，再用claude --plugin-dir /path/to/agent-skills加载
安装后无需重启，agent 在构建或修改用户界面相关代码时会自动触发该技能；若只想要该技能而不装整套 24 个工程技能，建议用 CLI 的 --skill 参数单独安装。
11. 注意事项
- SKILL.md 正文“See Also”引用的
references/accessibility-checklist.md参考文件在当前仓库内容树中缺失，属于一处文档断链，实际无障碍细节仍需依赖正文自带的 WCAG 章节 - 技能内代码示例以 React/TSX 与 Tailwind CSS 为主，使用其他前端框架（Vue、Svelte 等）或 CSS 方案的团队需要自行转译示例代码
- 仓库以整套 24 个工程技能包为主体发布，若通过插件市场整体安装会连带装入其余 23 个非本技能相关的子技能
- 无障碍章节覆盖 WCAG 2.1 AA 标准，更细致的逐条合规审计建议配合专门的无障碍类技能搭配使用