技能说明
来自 addyosmani/agent-skills 的 frontend-ui-engineering，专注生产级用户界面：遵守现有设计系统，使用真实内容，合理拆分组件与数据逻辑，并把键盘操作、语义标签、对比度、响应式、性能和完整状态作为交付要求。仓库 README 收录 25 项工程技能，支持通过 Skills CLI 接入 70 多种 Agent；项目采用 MIT 许可证，当前 GitHub 星标为 93289。README 特别提醒，单项安装不会复制仓库级 references，需要共享清单时应按整仓库方式接入或补齐参考文件。
关于此技能
把前端界面当成工程交付来做：遵守设计系统，使用真实内容和完整状态，同时把可访问性、响应式、性能与组件维护性当成硬要求。
核心能力
用设计系统约束视觉质量
优先遵循项目已有的颜色、字体、间距、圆角和组件规则，避免紫蓝渐变、全屏卡片和千篇一律的 AI 界面。
把状态和架构一起做好
合理拆分组件与数据逻辑，覆盖加载、空态、错误、成功、禁用、焦点和权限等真实状态。
把无障碍与响应式当作门槛
检查键盘操作、语义标签、对比度、触控目标、窄屏布局和内容溢出，不用好看掩盖不可用。
适用场景
开发生产级网页和组件
适合新建或修改用户界面、页面、组件、布局和交互状态，让结果更像设计意识强的工程团队交付。
整理 AI 生成的 SaaS 页面
减少模板化视觉、泛化文案、过度圆角、阴影堆叠和缺少真实状态的问题。
做前端代码审查和重构
检查组件职责、数据与展示分离、状态管理、可访问性和设计系统一致性，减少后续维护成本。
使用步骤
- 01
先看产品和现有系统
确认页面目标、用户、内容层级、现有令牌、组件、技术栈和需要支持的状态。
- 02
先搭结构再做样式
用清晰的组件边界和内容优先的布局解决主要任务，避免先堆装饰和卡片。
- 03
补齐交互和边界状态
处理加载、空态、错误、成功、焦点、键盘、权限和窄屏行为，并让数据逻辑和展示逻辑保持清楚。
- 04
按工程标准复查
运行项目已有检查，结合真实内容检查响应式、对比度、语义和性能；需要完整仓库参考时不要只安装单个技能。
常见问题
它和 Impeccable 的区别是什么？+
Impeccable 更偏设计方向、视觉打磨和浏览器迭代；这个技能更偏前端工程实现、组件架构、状态管理、无障碍和系统一致性。
支持哪些 Agent？+
仓库 README 说明可通过 Skills CLI 安装到 Codex、Claude Code、Cursor、Copilot、Cline 等大量 Agent，也提供 Claude、Cursor、Gemini、OpenCode 等原生接入说明。
为什么单项安装要注意 references？+
README 提醒单独安装一个技能时不会复制仓库级 references；若该技能需要共享清单，应使用整仓库接入或把需要的参考文件一起带入。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/10
安装提醒：这项技能可能涉及网络、脚本、文件或凭据权限，安装前请先阅读 SKILL.md，并确认它需要哪些权限。
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering