# 前端 UI 工程 (frontend-ui-engineering)

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

- 分类: [UI 与交互](https://www.myskills.tools/zh/categories/ui-interaction/)
- 来源: 社区 · Addy Osmani
- 代码仓库: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering (commit f97d842)
- SKILL.md: https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md
- 安装命令: `npx skills add addyosmani/agent-skills --skill frontend-ui-engineering`
- 许可证: MIT
- 兼容工具: Claude Code, Codex, Cursor, Copilot, Gemini CLI
- 权限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。

## 核心规则

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

## 执行阶段

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

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

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

## SKILL.md 头部信息（YAML）

```yaml
---
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.
---
```

首页: https://www.myskills.tools/zh/ · URL: https://www.myskills.tools/zh/skills/frontend-ui-engineering/