tools

Figma-to-Flutter workflow. Use when a user provides a Figma node, URL, selected design, or asks for Figma MCP setup instructions for Flutter work.

用本機 web server 帶領使用者快速理解一個 PR / 分支的最終結果。以「邏輯功能元件」而非 commit 為主軸，用 Mermaid 圖呈現新增/修改/重構的元件與相依關係；另外用 Mermaid sequence 圖呈現這條 PR 新增了哪些「行為」——使用者從哪個 Frontend 元件開始操作、打了什麼 API、後端走過哪些元件、最後在 DB 寫了什麼資料。點進元件看中文描述與關鍵程式碼片段（非整份 diff）。測試獨立分區（Backend Unit / BDD / Frontend Widget），先以中文 Given/When/Then 描述，需要時才展開看完整測試碼。使用時機：當用戶說「帶我看這個 PR」、「PR walkthrough」、「commit tour」、「介紹這個 branch」、「walk me through」、「我想了解這條分支」、「這分支做了什麼」、「PR 視覺化」、或要 Claude 用結構化方式呈現變更的情境。

用本機 web server 帶領使用者快速熟悉一個 monorepo 專案。靜默掃描所有元件（前端 / App / 後端 / CI/CD / 部署 / 資料庫）後，生成可在瀏覽器中互動瀏覽的導覽頁面：一張系統架構 Mermaid 圖、元件清單、資料表清單，以及涵蓋所有資料表的核心 E2E 流程清單；每個 E2E 流程點進去看 sequence 圖與逐步詳解（UI → API → DB，含檔案路徑與行號）。使用時機：當用戶說「帶我熟悉這個專案」、「介紹一下這個專案」、「給我系統導覽」、「這個專案怎麼運作」、「我新加入這個 repo」、「onboarding」、「walk me through」、「explain the codebase」、「我要熟悉這個 monorepo」、或要 Claude 帶領他了解專案架構與資料流的情境。