前言¶
在 ys-agent 倉庫裏動 frontend/ 時，常見痛點不是「寫不出功能」，而是「寫出來了但放錯目錄、命名和現有代碼對不上、又造了一個差不多的組件」。多個 Agent 輪流改同一塊前端時，這種問題會更快堆起來：路由、Pinia、API 封裝、Element Plus 用法各有一套，review 成本上升，合併也容易衝突。
下面介紹 SkillHub 上的 前端開發（@user_fbf2a1f5/ys-agent）。它的定位是：在動手改 frontend/ 之前，先讓 Agent 按同一套工程規範執行，減少風格漂移和重複造輪子。
這是什麼¶
前端開發 是面向 ys-agent 項目 frontend/ 目錄的「工程規範守門」Skill，採用社區常見的 SKILL.md 格式，由發佈者 user_fbf2a1f5 維護，當前版本 1.0.0，分類爲 dev-programming，來源標註爲 community。SkillHub 頁面顯示 requires_api_key=false，安裝與調用不依賴額外 API Key。
官方簡介的核心要求可以概括爲：凡與 ys-agent 前端相關的任務，必須先調用本 Skill，再按統一規範實施——而不是憑 Agent 的默認習慣直接改文件。
核心功能¶
根據 SkillHub 與 API 頁面上的簡介，本 Skill 覆蓋（並在規範層面約束）的前端工作包括但不限於：
- 頁面與組件：新增頁面、新增組件、寫公共組件、遷移 demo 代碼、調整佈局與樣式。
- 數據與狀態：新增 API 封裝、對接後端接口、新增 Pinia store、寫 mock。
- 路由與權限：改路由、加權限。
- UI 與交互：表單、彈窗、表格、搜索過濾、數據可視化；Element Plus 用法、主題、響應式。
- 工程文件：在
frontend/下編輯.vue、.ts、.scss、.css，以及vite.config、tsconfig、package.json等配置。 - 質量方向：性能優化等前端迭代事項。
強調點在於 放置位置、命名、引入方式 要與項目約定一致。即使任務很小（例如「加個按鈕」「改個文案」），只要發生在 frontend/ 下，官方說明也要求先讀本 Skill 再動手，避免「小改動」累積成目錄混亂。
Skill 正文中的具體目錄樹、命名規則和代碼模板需以安裝後的 SKILL.md 爲準；本文僅複述已公開的職責範圍，不展開未在官方頁面出現的內部條文。
安裝與啓用¶
SkillHub 官方給出的安裝方式，是讓 AI 按安裝文檔拉取指定座標：
請根據 https://skillhub.cn/install/skillhub.md，安裝 `@user_fbf2a1f5/ys-agent`。
若你本地已具備 skillhub CLI，可按 SkillHub 安裝文檔第三節操作：安裝時必須用 --dir 指向當前 Agent 實際使用的 skills 目錄，否則默認裝到 ./skills/ 可能不會被識別。
- 檢查 CLI（文檔建議先確認是否已安裝）：
command -v skillhub && skillhub --version
- 未安裝時安裝 CLI（完整安裝或僅 CLI，以官方腳本爲準）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
- 安裝本 Skill（將
<skills 目錄>換成當前環境路徑）：
skillhub install @user_fbf2a1f5/ys-agent --dir <skills 目錄>
常見 Agent 的 skills 目錄（摘自 SkillHub 安裝文檔，以你本機實際配置爲準）：
| 環境 | 典型 skills 目錄 |
|---|---|
| Cursor | ~/.cursor/skills/ |
| Claude Code | ~/.claude/skills/ |
| Codex | ~/.codex/skills/ 或項目下的 .agents/skills/ |
安裝完成後，在 Cursor、Claude Code、Codex CLI 等支持 Skills 的客戶端中，需保證任務會加載該目錄下的 Skill；具體啓用方式以各客戶端當前文檔爲準。
典型用法¶
本 Skill 的使用邏輯在官方簡介裏寫得很直接：接到 ys-agent 前端相關任務 → 先調用本 Skill → 再按規範改代碼。
可復現的協作提示示例（發給 Agent）：
我要在 ys-agent 的 frontend/ 裏新增一個帶表格和搜索的頁面，請先調用 @user_fbf2a1f5/ys-agent（前端開發）Skill，確認頁面、路由、API 和組件的放置位置與命名，再開始實現。
更小粒度的改動同樣適用：
只在 frontend/ 改一個按鈕文案，請先讀前端開發 Skill，確認改動文件與引入方式正確後再編輯。
經過上面的步驟，Agent 應先閱讀 Skill 內規範，再輸出符合項目結構的修改，而不是在倉庫裏隨意新建路徑或重複封裝已有能力。
適用場景與注意¶
適合誰
- 在 ys-agent 倉庫中維護
frontend/的開發者，或委託 Agent 做前端迭代的團隊。 - 需要 多 Agent、多會話 連續改同一前端工程，且希望目錄與風格保持一致的場景。
使用注意
- 範圍綁定項目：規範針對 ys-agent 的
frontend/，不自動適用於其他倉庫；換項目應使用對應項目的守門 Skill（若有）。 - 先 Skill 後代碼：官方明確要求「必須先調用」；跳過 Skill 直接改文件，與發佈意圖相反，也容易重現目錄與風格問題。
- 安裝路徑：
skillhub install的--dir必須對準當前 Agent 的 skills 目錄，否則 Skill 可能未被加載。 - 數據以 SkillHub 爲準：頁面展示的評分爲 100000，下載 6692（抓取時安裝數爲 0，僅表示統計口徑，不代表不可用）；若與第三方轉載數據不一致，以 SkillHub 技能頁 爲準。
結尾¶
前端開發（@user_fbf2a1f5/ys-agent）解決的是 ys-agent 前端在多 Agent 協作下的 規範一致性問題：把「放哪、叫什麼、怎麼引」收斂到同一套 Skill，再動 .vue、路由、Pinia 或 Element Plus。需要安裝或查看說明時，可打開 SkillHub 技能頁或 API 入口：
- SkillHub：https://www.skillhub.cn/skills/user_fbf2a1f5/ys-agent
- 官方地址：https://api.skillhub.cn/user_fbf2a1f5/ys-agent
