前言¶

寫前端界面時，最容易出問題的不是不會寫，而是”先跑起來再說”。時間緊就省略可訪問性檢查，想着”反正用戶都用現代瀏覽器”就跳過兼容性處理，佈局能看就行——這些妥協在交付當下省時間，在後續迭代里加倍還回來。

這個 Skill 的作用就是把這些判斷提前定好，讓 Agent 在動手寫代碼之前先接受一套約束。

這是什麼¶

「前端工程師」是一個面向前端實現的 Agent Skill，座標 @user_3c47cf70/frontend-design-mine，版本 1.0.0，由社區發佈者 user_3c47cf70 維護，來源標記爲 community，歸類在 SkillHub 的 dev-programming 分類下。

它解決的問題很明確：前端實現的規範性依賴個人經驗，不同 Agent、不同任務裏執行的強度不一致。這個 Skill 把規範固化成可複用的指令，在觸發時自動生效。

覆蓋範圍與要求¶

根據官方簡介，觸發場景包括四類：實現任何前端界面、創建響應式佈局、優化性能、確保跨瀏覽器兼容性。也就是說不是隻在”寫組件”時才介入，佈局和性能優化同樣在覆蓋範圍內。

對實現的要求，簡介裏寫了三點，也是這個 Skill 的核心約束：

1、避免實現中的捷徑；
2、遵循最佳實踐；
3、無論時間壓力、「現代瀏覽器」假設還是「足夠好」的妥協存在與否，都要保證可訪問性和性能。

第三點是它區別於普通前端提示詞的地方：明確把三類常見藉口（時間緊、瀏覽器夠新、湊合能用）列爲不構成降低標準的理由，並且把可訪問性與性能並列爲必須守住的底線，而不是可選項。

官方資料只提供了上述簡介，沒有展開列出具體的檢查項清單、代碼規範細節或性能閾值，因此本文不推測其內部指令的具體內容。

安裝與啓用¶

官方資料中未給出安裝命令、目錄路徑或配置文件字段，也沒有針對 Cursor、Codex CLI、Claude Code 分別說明啓用方式。因此這裏只列出已覈實的座標信息，實際啓用步驟請以官方頁面爲準。

座標：@user_3c47cf70/frontend-design-mine
版本：1.0.0
來源：community
分類：dev-programming
API Key：不需要（requires_api_key=false）
官方地址：https://api.skillhub.cn/user_3c47cf70/frontend-design-mine
頁面地址：https://www.skillhub.cn/skills/user_3c47cf70/frontend-design-mine

requires_api_key=false 意味着啓用這個 Skill 不需要額外申請密鑰，可以直接接入。

典型用法¶

官方資料沒有提供可復現的命令示例或腳本，以下用法基於其聲明的觸發條件整理，屬於對觸發場景的應用，而非官方示例。

在對話中提出前端需求時，讓 Agent 按照該 Skill 的約束執行即可，例如：

• 「實現一個列表頁，包含篩選和分頁」——觸發界面實現的約束；
• 「做一個移動端優先的響應式佈局」——觸發響應式佈局的約束；
• 「首屏加載太慢，幫我優化」——觸發性能優化的約束；
• 「在 Safari 和 Edge 上樣式有差異」——觸發跨瀏覽器兼容性的約束。

使用時建議在需求描述裏把目標瀏覽器範圍、是否需要鍵盤導航、目標性能指標一併說明，這樣 Skill 裏的可訪問性和性能要求才有明確的判定依據。

適用場景與注意¶

適合的場景：常規的頁面與組件實現、佈局搭建、性能排查、兼容性問題處理。凡是需要寫前端代碼且對質量有要求的任務，都可以用它來約束 Agent 的實現標準。

需要注意的幾點：

1、它約束的是實現紀律，不是設計稿還原工具，也不替代具體的組件庫或框架選型；
2、官方資料未提供具體的檢查項清單，如果項目有內部的代碼規範或 ESLint 配置，需要和 Skill 的要求一起使用，兩者不一致時以項目規範爲準；
3、頁面數據存在變動。抓取時頁面顯示評分 100000、下載 1082、安裝 0，而此前的索引記錄爲評分 99360、下載 911，以官方頁面當前顯示爲準；
4、安裝數爲 0 說明它目前還不是被廣泛使用的狀態，作爲約束規範使用前，建議先在一個非核心頁面上驗證 Agent 的實際輸出是否符合預期。

結尾¶

這個 Skill 的價值不在於提供新的前端知識，而在於把”別走捷徑、守住可訪問性和性能”這條線固定下來，讓 Agent 在時間壓力下也不會主動降級標準。對於需要頻繁產出前端界面的場景，它是一個成本很低的約束補充。

官方地址：https://www.skillhub.cn/skills/user_3c47cf70/frontend-design-mine