Frontend Workflow：前端專案總控
一、最高優先級：先讀取專案
在修改任何檔案之前，必須：
- 閱讀專案根目錄中的
AGENTS.md、CLAUDE.md、README 和其他適用的開發規範。 - 檢查
package.json、鎖檔案、建構配置、路由配置和現有組件。 - 識別當前專案的技術棧、框架版本、UI 組件庫、CSS 方案和運行命令。
- 如果是前後端分離專案，明確前端與後端的邊界，不擅自修改後端接口契約。
- 如果專案已有設計系統、組件規範或頁面風格，優先繼承並完善，而不是推倒重做。
不得僅根據使用者描述或目錄名稱判斷技術棧，必須檢查實際檔案。
二、識別技術棧並決定技能使用方式
情況 A：React 專案
依次執行：
- frontend-design：確定視覺方向、設計規範和頁面佈局。
- frontend-production-shadcn：在確認專案相容的前提下，實現組件、佈局和交互。
- premium-ui：檢查實際頁面並推動修復。
只有在專案已採用或明確允許使用 React、Tailwind CSS 和 shadcn/ui 等相應技術時，才直接使用該技能的具體組件實現方案。
情況 B：Vue 3 專案
依次執行：
- frontend-design：確定視覺方向、設計規範和頁面佈局。
- 將 frontend-production-shadcn 僅作為設計規範和工程質量參考，不執行其中專屬於 React、JSX、React Hooks 或 shadcn/ui 的實現指令。
- 使用專案現有的 Vue 3、TypeScript、路由、UI 組件庫和 CSS 方案完成實現。
- premium-ui：檢查實際頁面並推動修復。
不得為了適配第二個 Skill 而把 Vue 3 專案遷移到 React。
情況 C：其他技術棧
先檢查專案已有技術和約束。將 frontend-design 用於視覺規劃，將 frontend-production-shadcn 中可遷移的設計原則作為參考，並使用當前專案適用的技術完成實現。最後使用 premium-ui 的評審方法驗收。
三、嚴格執行三個階段
階段一：視覺設計
調用 frontend-design。
要求：
- 明確頁面目標、主要使用者和核心操作。
- 確定視覺方向、字型、色彩、間距、佈局和資訊層級。
- 提出有實質差異的設計方向，並說明最終選擇理由。
- 形成可執行的設計規範，再開始實現。
階段二：工程實現
根據技術棧調用 frontend-production-shadcn，或僅參考其中的設計原則。
要求：
- 先複用現有組件和依賴。
- 實現完整頁面、導航、表單、響應式佈局和交互狀態。
- 處理載入、空資料、錯誤、禁用和成功回饋。
- 保留真實業務邏輯，不使用假交互冒充功能完成。
- 未經授權不得大規模重構或更換框架。
階段三：視覺驗收
調用 premium-ui，檢查真實實現，而不只是閱讀程式碼。
要求：
- 優先啟動專案並使用可用的瀏覽器或截圖工具檢查頁面。
- 檢查排版、對齊、留白、色彩、層級、組件一致性和響應式表現。
- 檢查按鈕、表單、導航和主要交互是否有效。
- 記錄設計目標與實際效果之間的差距。
- 對發現的問題進行修復，並重新檢查。
如果環境沒有瀏覽器或截圖能力，必須明確說明無法完成真實視覺驗收，不得聲稱已經檢查過頁面效果。
四、執行規則
- 每個階段完成後，簡要報告結論，再進入下一階段。
- 如果某個 Skill 不存在、未被載入或無法執行，明確說明，並採用可行的替代方案。
- 不得假設其他 Skill 會自動運行；必要時明確請求調用或讀取相應 Skill。
- 遵循使用者的明確要求、專案規範和現有技術棧。
- 不為了追求視覺效果而犧牲可訪問性、可維護性、效能或業務正確性。
- 完成後運行專案支援的建構、檢查和測試命令，並回報結果。
五、最終交付
完成後報告：
- 識別出的技術棧及版本。
- 採用的設計方向和關鍵設計決策。
- 修改的主要檔案及功能。
- 三個階段各自的執行情況。
- 建構、測試和實際視覺檢查的結果。
- 尚未解決的問題和需要人工確認的事項。