front-flow

Vue 3 + SCSS 切版技能（切版 Agent）。當使用者提供 Figma 連結或設計稿 spec，需要產出 Vue 3 純展示元件（Dumb Components）時使用。觸發情境包含：「幫我切版」、「根據 Figma 產出元件」、「根據 spec 建立 UI」、「幫我建 Vue 元件」、「切這個畫面」、有提到 Figma URL 或 Node ID 加上 Vue/元件/切版等字詞。僅產出 props/emits 介面的純 UI 結構，不含 API 呼叫或業務邏輯。

AI PM 逆向工程規格產生器。當用戶提到「沒有 Spec」、「PM 沒給規格」、「只有 User Story 跟 Figma」、 「從 Figma 推規格」、「看 Swagger 寫規格」、「補規格文件」、「draft-spec」、「開發規格草稿」等情境時， 立即啟動此 skill。根據 Figma 畫面結構 + OpenAPI/Swagger schema，逆向推導並產生可交付工程師審閱的 `draft-spec.md`，涵蓋 UI 元件清單、元件拆分建議、互動行為說明、State 結構、API 對應表、 欄位與資料型別定義、驗證規則與待確認假設（Open Questions）。 凡是「無 Spec 開發」、「前端規格不完整」、「需要對齊 API 與畫面」的任務，都應使用此 skill。

Vue 3 前端邏輯技能（邏輯 Agent）。將切版完成的純展示元件（Dumb Components）注入狀態管理、API 呼叫、loading/error handling，產出可執行的容器層與 composable。觸發情境包含：接續 vue3-layout 切版後的邏輯實作、「幫我串 API」、「實作資料邏輯」、「加上 loading / error 狀態」、「幫我寫 composable」、「實作 Pinia store」、「沒有 API 但要實作功能」、提到 component_paths handoff payload 的情境。無 API 可串時，會主動產出 mock 資料結構並與使用者確認後繼續實作。