这个 Skill 能做什么，适合哪些场景？
该技能面向新建或修改用户界面、组件和页面的工作。它规范组件拆分、状态管理、响应式布局、设计系统遵循和 WCAG 2.1 AA 可访问性。内容还覆盖加载、错误、空状态、键盘操作、焦点管理及界面验证。它适合重视真实产品质量，而不是通用 AI 风格界面的前端项目。
指导代理按组件职责组织文件，优先使用组合式组件，并分离数据获取与展示逻辑；根据状态范围选择本地状态、Context、URL 状态、服务端状态或全局状态；按移动优先实现响应式布局，使用语义化颜色和一致的间距与排版层级；为交互元素、表单、对话框及加载、错误和空状态补充键盘访问、ARIA、焦点管理和状态反馈；完成后检查控制台错误、键盘操作、屏幕阅读器表达、多个视口尺寸及可访问性警告。
- 前端工程师为 React 或类似项目新增任务列表、表单或页面组件时，需要明确的组件边界和状态处理方式。
- 产品团队修改现有用户界面时，需要在不破坏设计系统的前提下改善布局、交互或视觉质量。
- 开发者实现移动端和桌面端都可用的页面时，需要移动优先的响应式布局指导。
- 团队为界面组件补充 WCAG 2.1 AA 要求、键盘导航、ARIA 标签和焦点管理时，需要一套检查标准。
- 开发者处理异步数据界面时，需要覆盖加载、错误、空状态和乐观更新。
如何安装这个 Skill？
- 示例依赖 React、Tailwind、React Query、项目设计令牌及未随技能提供的 accessibility-checklist.md；使用前应确认项目栈和引用文件可用。
- 技能要求 WCAG 2.1 AA 和响应式验证，但没有提供实际测试命令、测试套件或执行结果；应由代理在目标项目中补充键盘、屏幕阅读器、断点和 axe-core 验证。
- 未明确安全敏感界面、用户数据处理、外部 API、副作用确认和回滚策略；涉及这些范围时应结合专门的安全、测试和发布技能。
使用 skills CLI 安装仓库中的单个技能：
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering
该仓库也支持安装全部 24 个技能：
npx skills add addyosmani/agent-skills
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/addyosmani/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/frontend-ui-engineering" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 为现有应用创建一个移动优先的任务列表页面，遵循项目设计系统，并满足 WCAG 2.1 AA；同时处理加载、错误和空状态。
在支持 Agent Skills 的编码代理中，让代理构建或修改用户界面，例如：“为现有应用创建一个移动优先的任务列表页面，遵循项目设计系统，并满足 WCAG 2.1 AA；同时处理加载、错误和空状态。”技能会在构建用户界面时自动激活，也可直接引用该技能。
这个 Skill 有哪些优点和局限？
- 覆盖组件架构、状态管理、设计系统、响应式设计和可访问性等完整界面工程关注点。
- 提供具体的 React、Tailwind 和 CSS 示例，便于转化为实现约束。
- 明确要求键盘访问、焦点管理、语义化颜色、加载状态、错误状态和空状态。
- 包含“避免 AI 风格”、红旗清单和交付后的验证项目，适合生产质量门槛。
- 内容主要提供工程指导和示例，没有绑定具体前端框架、测试框架或构建工具。
- 源材料没有提供该技能自身的测试套件或实际项目验证结果。
- 详细的 accessibility-checklist.md 被列为参考资料，但其具体内容不在本资料中。
- 技能要求检查 320px、768px、1024px 和 1440px 视口，但没有提供自动化检查命令。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| 生产级前端界面工程 本页 | 53 · 谨慎使用 | ★ 107k | 13 天前 | MIT |
| 独特前端设计指导 ✓ Anthropic · 官方 | 60 · 推荐 | ★ 38k | 12 天前 | Apache-2.0 |
| 前端设计审查 ✓ Microsoft · 官方 | 51 · 谨慎使用 | ★ 2.7k | 3 个月前 | MIT |
| TypeUI 设计基础原则 | 70 · 高度推荐 | ★ 2k | 3 个月前 | NOASSERTION |
| Stitch 品味设计系统 | 42 · 不推荐 | ★ 8.5k | 2 个月前 | Apache-2.0 |
FollowSkills 如何评估这个 Skill？
技能仅提供前端工程指导，没有要求凭据、外部写入或数据外传；同时未明确用户确认、权限边界、敏感数据处理、回滚和数据流披露。README 提供 MIT 许可及维护者信息，但发布者未获 FollowSkills 验证，因此扣分。
内容结构一致，涵盖组件、状态、可访问性、响应式和验证清单，示例路径清晰；但示例依赖未声明的 React、Tailwind、React Query 等环境，部分代码存在上下文假设，且静态材料未证明关键路径可运行或异常反馈完整，因此按静态上限保守扣分。
前言和 When to Use 明确面向构建或修改用户界面，并覆盖布局、交互、状态和 UX 问题；但未充分声明非适用范围、输入输出契约、触发优先级或中文及中国大陆网络环境适配，因此扣分。
文档按概览、触发场景、架构、可访问性、响应式和验证分层，包含示例、红旗和限制提示；README 提供安装方式、MIT 许可和仓库维护者，但该技能没有独立版本、变更记录、依赖说明、维护责任或更新路径，且引用的 accessibility checklist 未在给定技能文件中提供，因此扣分。
技能能直接给编码代理提供组件拆分、状态选择、WCAG、响应式和加载/错误/空状态等可执行指导，核心任务范围基本覆盖；但没有该技能自身的代表性产出、运行结果或对比证据，示例仍需结合项目上下文和测试才能交付，因此按静态上限记 7 分。
SKILL.md 含可审计的代码示例、检查清单和明确断言；仓库 CI 会验证整体技能内容和评估运行器，但给定材料未显示针对该前端技能关键路径的专门测试或第三方执行证据，因此只能给有限静态可验证分。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →