frontend-ui-engineering

技能简介

frontend-ui-engineering 是一个前端 UI 工程技能，帮助开发者构建生产级品质、可访问、响应式的用户界面。它解决的核心问题是避免 AI 生成的“通用感”界面，让组件和页面在视觉设计、代码结构、无障碍（WCAG）和状态管理等方面都达到专业工程水准。

使用场景

• 构建新的 UI 组件或页面
• 修改现有用户界面或视觉/交互问题
• 实现响应式布局
• 添加交互逻辑与状态管理
• 需要满足 WCAG 2.1 AA 无障碍标准

使用方法

本技能作为 Agent/CLI 的 Skill 定义文件使用。将 SKILL.md（或包含该文件的技能目录）放置到 Agent 的 skills 目录中即可被自动加载；也可以通过 npx skills add 或 git clone 引入包含本技能的仓库（具体命令依实际仓库地址而定）。

加载后，当构建或修改 UI 时，Agent 会自动遵循以下核心规范：

• 组件架构：采用组合优于配置、容器与展示分离、文件就近放置（组件目录内包含实现、测试、类型等文件）的模式
• 状态管理：从 useState 本地状态、Context、URL 状态到服务端状态（React Query/SWR）和全局 Store，按复杂度选择最简方案，避免超过 3 层的 props 穿透
• 设计系统：严格使用项目既有设计规范（色板、间距刻度、字号层级），避免紫色渐变、超大圆角、通用 Hero 区等 AI 默认审美
• 无障碍：所有交互元素可键盘操作，语义化标签，文本对比度 ≥ 4.5:1，不依赖单一颜色传达信息

注意事项

• 编写组件时禁用“AI 味”设计：不使用紫色/靛蓝色泛用配色、无节制渐变、全圆角（rounded-2xl）、通用 Hero 模板、夸张阴影等
• 间距和字号必须使用项目已有的刻度体系，不要随意创造数值（如 13px、2.3rem）
• 颜色一律使用语义化 token（如 text-primary、bg-surface），不要直接写十六进制值
• 真实内容优先，不用 Lorem ipsum 占位文案；真实文本才能暴露折行、溢出等布局问题
• 如果不确定设计细节，遵循该技能内的组件/无障碍规范，或主动询问用户的设计系统文档