前言¶
團隊一擴人，命名、目錄、組件寫法就容易各寫各的；Code Review 反覆糾同類問題，文檔又和實際代碼對不上。把規範寫進 Confluence 或 README，Agent 對話裏往往還是按默認習慣生成代碼。下面介紹 SkillHub 上的「前端開發規範」Skill：以通用 SKILL.md 形式安裝到 Cursor、Claude Code 等客戶端，讓模型在寫前端相關代碼時有一致、可引用的規範約束。
這是什麼¶
「前端開發規範」是社區發佈者 user_27ccabd4 在 SkillHub 提供的 dev-programming 類 Skill，座標爲 @user_27ccabd4/frontend-spec，當前版本 1.0.0，來源標註爲 community。官方 API 地址爲 https://api.skillhub.cn/user_27ccabd4/frontend-spec，SkillHub 展示頁爲 https://www.skillhub.cn/skills/user_27ccabd4/frontend-spec。
Skill 簡介說明：這是一套企業級前端開發規範 Skill，覆蓋命名、目錄結構，以及 CSS、JavaScript、TypeScript、Vue、React、Git、構建、性能、安全等方面的完整規範。標籤 requires_api_key=false，安裝後不需要額外 API Key。
核心功能¶
依據 SkillHub 頁面與 API 元數據，可覈實的能力範圍如下（具體條文以安裝後的 SKILL.md 爲準）：
- 工程與目錄：統一項目目錄與文件組織方式，減少「同一類文件放不同路徑」的分歧。
- 語言與樣式規範：CSS、JavaScript、TypeScript 的寫法與約定。
- 框架相關：Vue、React 場景下的規範要點。
- 協作與交付：Git 使用、構建流程相關的約定。
- 質量與安全：性能與安全相關的開發規範條目。
該 Skill 不替代你們團隊已有的設計系統或 ESLint 配置；它是在 Agent 側提供一份可被模型讀取、遵循的規範文本，與本地 lint、CI 可以並行使用。
安裝與啓用¶
SkillHub 官方建議：讓 AI 按安裝文檔處理，或直接通過 SkillHub CLI 安裝到當前 Agent 的 skills 目錄。未指定 --dir 時，CLI 默認裝到 ./skills/，多數客戶端不會自動識別，需要指向各自約定的目錄。
1. 安裝 SkillHub CLI（若尚未安裝）¶
先檢查是否已有 CLI：
command -v skillhub && skillhub --version
未安裝時，可按 SkillHub 安裝文檔執行完整安裝（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
安裝說明原文：https://skillhub.cn/install/skillhub.md。
2. 安裝本 Skill¶
將 @user_27ccabd4/frontend-spec 安裝到當前 Agent 正在使用的 skills 目錄。常用路徑如下（摘自 SkillHub 安裝文檔）：
| 客戶端 | Skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
| Windsurf | ~/.codeium/windsurf/skills/ 或項目下的 .windsurf/skills/ |
示例（把 <skills 目錄> 換成上表對應路徑）：
skillhub install @user_27ccabd4/frontend-spec --dir <skills 目錄>
SkillHub 頁面還給出了「提示詞安裝」方式，等價於讓 Agent 閱讀 https://skillhub.cn/install/skillhub.md 並完成上述座標安裝：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_27ccabd4/frontend-spec`。
安裝完成後，按你所用客戶端的說明刷新或重啓 Agent，使新 Skill 被加載。本文未覈實 Codex CLI、Claude Code 在 2026-10-19 是否有額外配置文件名差異；若與上表不一致，以各客戶端當前文檔爲準。
典型用法¶
在 Skill 已安裝且被 Agent 識別的前提下，典型用法是：在前端相關任務中主動依賴該 Skill，讓模型按規範生成或審查代碼，而不是臨時口述幾條規則。
可復現的起步步驟：
- 確認
frontend-spec出現在 skills 目錄（例如 Cursor 的~/.cursor/skills/下對應包名目錄）。 - 在新對話中說明任務類型（新建頁面、重構組件、補全 TS 類型、寫 Vue/React 模塊等），並註明需遵循已安裝的「前端開發規範」Skill。
- 對已有代碼做 Review 時，同樣引用該 Skill，請模型按規範中的命名、目錄、性能、安全等條目逐條對照。
SkillHub 展示頁未公開 Skill 內部的觸發詞或分節標題；更細的示例（例如某類組件必須如何命名）需在安裝後打開 Skill 包內的 SKILL.md 與附帶 reference 再對照使用。
適用場景與注意¶
適合誰
- 希望 Agent 生成的前端代碼與團隊書面規範對齊，又不想每次粘貼長文檔的開發者。
- 技術負責人需要把「命名 / 目錄 / Git / 構建 / 性能 / 安全」等約定固化成 Agent 可讀的單一來源。
限制與注意
- 來源爲 community，規範內容可能與貴司棧或內部標準不完全一致，落地前建議由前端 Owner 通讀 SKILL.md 並做裁剪或 fork 後自用。
- 規範 Skill 不能代替自動化測試、ESLint/Stylelint、安全掃描；仍應在 CI 中保留硬性檢查。
- SkillHub 元數據顯示評分 100000、下載 34929、安裝 281（統計以 SkillHub 頁面爲準，會隨時間變化）。
- 未安裝 SkillHub CLI 時，只能通過「讓 AI 按 install 文檔安裝」的方式完成，需保證執行環境允許訪問 SkillHub 安裝腳本與技能包。
結尾¶
「前端開發規範」把企業級前端約定打包成 @user_27ccabd4/frontend-spec，通過 SkillHub 安裝到 Cursor 等客戶端的 skills 目錄後，可在日常寫碼與 Review 中減少規範漂移。安裝與目錄說明以 https://skillhub.cn/install/skillhub.md 爲準；Skill 詳情與版本見 https://www.skillhub.cn/skills/user_27ccabd4/frontend-spec 與 https://api.skillhub.cn/user_27ccabd4/frontend-spec。
