前言¶
用 AI 写前端界面时，常见问题是布局能跑、但观感像模板：间距随意、状态缺位、无障碍只做表面。团队若只靠口头约定「要像线上产品」，模型仍容易产出紫色渐变卡片和千篇一律的组件结构。
下面介绍 SkillHub 上的 生产级前端界面工程规范（坐标 @org-b6kzcl68/frontend-ui-engineering）。它在对话里把组件架构、设计系统、无障碍和加载/错态等写成可执行的工程约束，适合在新建或改版面向用户的界面时挂载使用。
这是什么¶
一句话定位：面向生产环境的前端界面工程 Skill，目标是把可访问、响应式、视觉一致的 UI 从「提示词愿望」变成可重复的检查清单与实现习惯。
- 维护方：重庆途光网络传媒有限责任公司（SkillHub 标注来源为 enterprise）
- 分类：
dev-programming - 当前版本：
1.0.0 - 是否需要 API Key：
requires_api_key=false
官方页面与 API 入口：
- SkillHub：https://www.skillhub.cn/skills/org-b6kzcl68/frontend-ui-engineering
- API：https://api.skillhub.cn/user_e40a4360/frontend-ui-engineering
Skill 基于通用 SKILL.md 格式，由 Agent 在匹配任务时加载其中的规则与触发说明。
核心功能¶
以下能力均来自官方简介，未在资料中出现的实现细节不展开。
组件与架构¶
- 组件架构与文件同置（colocation）：相关 UI、样式与逻辑放在同一职责边界内，减少跨目录跳转。
- 组合优于配置：优先用组件组合表达变体，而不是堆叠大量 props 开关。
- 数据获取与展示分离：把请求/缓存与纯展示组件拆开，便于测试与复用。
状态管理¶
- 状态管理分层选型：按局部 UI 状态、服务端数据、跨页面共享等层级选用合适方案，避免全局 store 滥用。
设计系统与视觉¶
- 设计系统遵循与语义化颜色令牌（semantic color tokens），减少硬编码色值。
- 系统规避 AI 模板审美：在规范层面提醒避免千篇一律的「AI 生成观感」。
无障碍（WCAG 2.1 AA）¶
- 键盘导航、ARIA 标签、焦点管理。
- 满足 WCAG 相关场景时作为显式触发条件（见下文 Triggers）。
响应式与体验细节¶
- 响应式断点。
- 骨架屏加载与乐观更新。
- 空态 / 错态设计。
何时应启用（官方 Triggers）¶
在用户要新建或修改界面与页面、创建组件、实现响应式布局、管理状态、满足 WCAG 无障碍要求，或要求产出达到生产级质感而非 AI 生成观感时使用。触发词包括：前端界面、组件架构、无障碍、WCAG、响应式布局、状态管理、设计系统、骨架屏、ARIA。
安装与启用¶
SkillHub 推荐两种方式：向 AI 发送安装提示词，或使用 skillhub CLI。安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认装到 ./skills/ 可能不会被识别。
方式一：提示词安装（官方页面原文）¶
将下面内容发给支持 Skill 的 AI（如 Cursor Agent）：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@org-b6kzcl68/frontend-ui-engineering`。
Agent 会按 SkillHub 安装文档 检查 CLI、选择目录并完成安装。
方式二：CLI 安装¶
先确认是否已安装 skillhub：
command -v skillhub && skillhub --version
未安装时可执行完整安装（含 CLI 与默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅安装 CLI：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
安装本 Skill 到对应 Agent 目录（将 <skills 目录> 换成你环境的路径）：
skillhub install @org-b6kzcl68/frontend-ui-engineering --dir <skills 目录>
常用 skills 目录（来自 SkillHub 安装文档）：
| Agent / 客户端 | skills 目录 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或项目下 .agents/skills/ |
| Gemini CLI | ~/.gemini/skills/ |
安装后按你所用客户端说明重启或刷新 Agent，使 SKILL.md 被索引。
典型用法¶
本 Skill 不附带独立可执行脚本示例；典型用法是在界面类任务中让 Agent 自动匹配并遵循 SKILL 内规范。
可复现的起步方式：
- 按上一节完成安装，确认
@org-b6kzcl68/frontend-ui-engineering出现在 skills 目录。 - 在对话中明确任务类型，并带上官方 Triggers 中的关键词，例如：「为仪表盘新建响应式布局，组件要文件同置，空态和骨架屏都要，满足 WCAG 2.1 AA。」
- 要求「生产级质感、不要 AI 模板审美」时，与官方简介中的 Use when 条件一致，便于触发该 Skill。
搜索定位（可选）：
skillhub search frontend-ui-engineering
适用场景与注意¶
适合谁
- 前端或全栈开发者，用 Cursor、Claude Code、Codex 等带 Skills 的 Agent 做页面与组件开发。
- 团队需要统一无障碍、设计令牌、加载与错态等「上线前 checklist」，又不想每次手写长提示词。
限制与注意
- 规范强度取决于 Agent 是否成功加载 Skill；安装目录错误是最常见原因，务必使用
--dir。 - 官方简介末尾提到职场求职类「完整工作流套件」需通过其他渠道获取，与本体 Skill 的界面工程范围无关，按需区分。
- SkillHub 页面展示的评分为 100000、下载约 660 次（以抓取时 SkillHub 数据为准）；不同入口统计可能不一致，以 官方 Skill 页 为准。
结尾¶
生产级前端界面工程规范把组件架构、设计系统、WCAG、响应式与加载/错态等收进一份可挂载的 Skill，适合在「要改真实用户界面、且不能接受 AI 模板观感」时使用。安装坐标：@org-b6kzcl68/frontend-ui-engineering；说明与版本见 SkillHub 官方页 与 API 地址。
