frontend-ui-engineering
Addy Osmani 出品的前端 UI 工程规范，把资深工程师的组件架构、状态管理、设计系统遵循与 WCAG 2.1 AA 可访问性 SOP 注入 AI agent，产出「不像 AI 生成的」生产级界面。
仓库：addyosmani/agent-skills
热度证据：同上，UI 工程技能
五维评分
热度5/5
质量5/5
创新4/5
易用5/5
文档5/5
优秀点拆解
- AI Aesthetic 反模式对照表：8 行表格枚举模型默认输出缺陷（紫色渐变/全圆角/超大留白等）并逐条给生产级替代，从模型失败侧设计规范，直击 AI 味痛点
- Common Rationalizations 借口驳斥表：预判并驳斥 5 个最常见的偷懒理由，把可访问性、响应式等质量要求从建议升级为纪律
- 可勾选 Verification 清单：7 项交付门禁（console 无错/Tab 遍历/读屏/320-1440 断点/三态/设计系统/axe 无警告），把模糊质量目标变成可自动核对的动作
- 状态管理决策阶梯：local→lifted→Context→URL→server→global store 六档递增选择规则，配 Good/Avoid 成对 TSX 示例，消除 agent 选型不确定性
- 仓库级评测闭环：evals/cases/frontend-ui-engineering.json 固化 5 正例+2 负例触发测试与期望输出，并复用共享 references/accessibility-checklist.md，把 skill 当软件工程维护
可复用的设计模式
- 模型失败模式目录：先枚举 LLM 在该领域的默认缺陷指纹，再逐条给『问题+替代方案』成对指导
- Rationalization 驳斥表：预判偷懒借口并给出现实代价，软性建议升级为硬性纪律
- Good/Avoid 成对示例 + 递增决策阶梯：教学用正反代码对照，选型用从简到繁的阶梯避免过度工程
- 三态完备 + 可勾选 Verification 门禁：loading/error/empty 必须齐全，交付前逐项自检清单
适用场景
React 系组件与页面的新建、改造（组件拆分、状态管理重构）需要 WCAG 2.1 AA 合规的前端交付（键盘导航、ARIA、读屏支持）让 AI 产出摆脱『AI 味』、贴合项目既有设计系统响应式布局与加载/错误/空三态完善
边界与注意：纯文档型、无强制执行，agent 不主动遵守即失效；示例绑定 React/Tailwind/React Query，Vue 等项目需迁移；单 skill 安装时引用的 references/accessibility-checklist.md 不可用（repo #361）；不含设计 token 具体数值，不能替代真实设计系统。
完整拆解分析文档
本页为摘要版，完整精读分析（核心机制、逐条优秀点拆解、写作过程）见本地 Markdown 文档：
analysis/addyosmani-frontend-ui-engineering.md