用途
前端 UI 工程技能用于构建或修改面向用户的界面与页面、创建组件、实现响应式布局、满足 WCAG 可访问性要求、管理状态，或让输出的界面在视觉和体验上达到生产级水准，而不是 AI 生成的感觉。
文档给出的适用场景包括：构建新的 UI 组件或页面、修改现有面向用户的界面、实现响应式布局、添加交互或状态管理、修复视觉或 UX 问题。
主要能力
组件架构：采用把组件相关内容放在一起（colocate）的文件结构，一个组件目录内包含组件实现、测试、Storybook stories（如使用）、自定义 hook 和组件专属类型。
组件模式：优先组合而非配置，例如用 Card、CardHeader、CardTitle、CardBody 组合，而非传大量配置 prop；保持组件职责聚焦；将数据获取与展示分离（容器处理数据，展示组件负责渲染）。
状态管理：按复杂度选择最简单可行方案——组件内 UI 状态用 useState，2-3 个兄弟组件共享用状态提升，主题/认证/语言用 Context，筛选/分页/可分享 UI 状态用 URL state，远程数据用 React Query 或 SWR，复杂全局客户端状态用 Zustand 或 Redux。不要穿透超过 3 层 props 传递。
遵循设计系统：避开 AI 审美的常见套路，包括满屏紫色/靛蓝、滥用渐变、万物大圆角、千篇一律的 hero 区块、Lorem ipsum 式文案、处处过大 padding、库存式卡片网格、重阴影设计。使用项目实际调色板、一致的 border-radius、内容优先布局、贴近真实的占位内容、一致的间距刻度与克制的阴影。
间距与排版：使用一致的间距刻度（例如 0.25rem 增量），不凭空发明数值；尊重标题层级（h1 每页唯一、h2 分区、h3 子分区），不跳过标题层级；颜色使用语义化 token（text-primary、bg-surface、border-default），正文对比度 4.5:1、大字号 3:1，不仅靠颜色传达信息。
可访问性（WCAG 2.1 AA）：每个交互元素必须可键盘访问；为缺少可见文本的交互元素添加 aria-label；为表单输入添加 label；在内容变化时移动焦点并在对话框打开时把焦点限制在其中；提供有意义的空状态与错误状态。
响应式设计：移动优先，再向大屏扩展，例如用 Tailwind 的 grid-cols-1、sm:grid-cols-2、lg:grid-cols-3；在 320px、768px、1024px、1440px 断点测试。
加载与过渡：内容用骨架屏而非 spinner；用乐观更新提升感知速度，并在出错时回滚。
使用方式
该技能以指导文档形式提供，包含大量可直接参考的代码示例（组件组合、状态选择、ARIA 标签、焦点管理、空状态、响应式栅格、骨架屏、乐观更新、键盘导航处理等）。文档还给出常见合理化借口与现实对照，以及危险信号清单（组件超过 200 行、内联样式或任意像素值、缺少错误/加载/空状态、未做键盘导航测试、仅用颜色指示状态、泛泛的 AI look）。构建完 UI 后给出验证清单：console 无报错、可交互元素均支持键盘访问、屏幕阅读器可传达内容与结构、各断点响应式正常、加载/错误/空状态均已处理、遵循项目设计系统、无严重可访问性告警。
详细的可访问性要求和测试工具，文档指向 ../../references/accessibility-checklist.md。
适用场景
适用于构建或修改界面与页面、设计组件、实现布局、处理状态管理与交互、改进视觉与可访问性的前端开发工作。
限制
该技能的安装方式、所属平台的具体配置、许可与收费信息暂未提供。