前言¶
用 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 地址。
