Eva813

AI PM 逆向工程規格產生器。當用戶提到「沒有 Spec」、「PM 沒給規格」、「只有 Figma 設計稿」、 「從 Figma 推規格」、「API 還沒好先做規格」、「補規格文件」、「draft-spec」、「開發規格草稿」等情境時， 立即啟動此 skill。根據 Figma 畫面結構反向推導並產生可交付工程師審閱的 `draft-spec.md`， 涵蓋頁面結構順序、Node Coverage Ledger、UI 元件清單、元件拆分建議、互動行為說明、欄位與資料型別定義、待確認假設與開放問題。 **Figma 是唯一必填輸入**。若有 User Story 可增強規格理解；API 對應由後續 api-enrichment Skill 處理。 凡是「無 Spec 開發」、「只有設計稿沒有 API」、「前端規格不完整」的任務，都應使用此 skill。只要畫面來自 Figma，就必須在 spec 階段先列出已確認 node、未覆蓋 node 與不可忽略的視覺骨架節點，不能只給高層元件摘要。

API 與數據規格補充 Skill。當完成 UI 切版預覽後（vue3-layout 斷點 B），需要補充 API、數據模型、State 結構時使用。 根據 spec.md 中的「待定數據模型清單」+ OpenAPI 文檔，補充完整的 API 對應表、State 結構、Error 處理方案， 產出 `enriched-spec.md` 供 logic-coder 實裝使用。 若無 API 文檔，會主動產出「數據模型候選提案」讓使用者確認。 觸發情境：「補充 API」、「確認資料格式」、「補完規格」、「有 Swagger 需要對齊」、「無 API 先補數據結構」。

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

Export Figma frames as PNG images via Figma REST API. Use when you need to get a design screenshot from a Figma URL for visual comparison.

Pixel-level image comparison between two screenshots. Generates a visual diff overlay highlighting differences. Use for comparing Figma designs against web implementations.

Vue 3 前端邏輯技能（邏輯 Agent）。接收 enriched-spec.md（含 API 對應表、State 結構定義、錯誤處理方案），將切版完成的純展示元件（Dumb Components）與 API / 狀態管理邏輯整合，產出可執行的容器層、services、composables。觸發情境包含：接續 api-enrichment 完成後的邏輯實作、「幫我串 API」、「實作資料邏輯」、「加上 loading / error 狀態」、「幫我寫 composable」、「實作 Pinia store」、提到 enriched-spec.md 或 component_paths handoff payload 的情境。

Vue 3 + SCSS 切版技能（切版 Agent）— 像素級精確實現。從 Figma 設計稿生成 **1:1 視覺保真的** Vue 3 純展示元件（Dumb Components）。觸發情境包含：「幫我切版」、「根據 Figma 產出元件」、「根據 spec 建立 UI」、「幫我建 Vue 元件」、「切這個畫面」、「實現 Figma 設計」、「補切版」、有提到 Figma URL 或 Node ID 加上 Vue/元件/切版等字詞。保證顏色、間距、字號、圓角、邊框等像素級精確匹配，同時支援與規格流程集成（使用 `draft-spec.md` 或 handoff payload 增強理解）或無規格快速實現。只要上游提供了核准 node 清單，就必須先做 node-to-component mapping 與 coverage 自查，未覆蓋 node 不得宣稱切版完成。僅產出 props/emits 介面的純 UI 結構，不含 API 呼叫或業務邏輯。

Vue 3 performance optimization and best practices guidelines for modern frontend applications. This skill should be used when writing, reviewing, or refactoring Vue 3 code to ensure optimal performance patterns, proper Composition API usage, and modern development practices. Triggers on tasks involving Vue 3 components, Composition API, reactivity, state management, or performance optimization.

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 資料結構並與使用者確認後繼續實作。

Next.js App Router fundamentals and best practices for building web applications. Use when developing Next.js 13+ applications with App Router, focusing on component patterns (Server/Client), routing conventions, data fetching, state management, and rendering optimization. Helps avoid common pitfalls with state, hydration, and component boundaries.

Comprehensive Next.js + Zustand state management patterns and best practices. Use when building Next.js applications with Zustand for (1) Setting up Zustand stores in Next.js App Router or Pages Router, (2) Implementing state management patterns (slices, middleware, persistence), (3) Server-side rendering (SSR/SSG) with Zustand, (4) Performance optimization and code splitting, (5) TypeScript integration, (6) DevTools and debugging setup, or (7) Testing Zustand stores

Vue 3 performance optimization and best practices guidelines for modern frontend applications. This skill should be used when writing, reviewing, or refactoring Vue 3 code to ensure optimal performance patterns, proper Composition API usage, and modern development practices. Triggers on tasks involving Vue 3 components, Composition API, reactivity, state management, or performance optimization.

Vue 3 and D3.js integration best practices for data visualization components. This skill should be used when building, optimizing, or reviewing Vue 3 components that use D3.js for data visualization, charts, or interactive graphics. Triggers on tasks involving D3.js integration, SVG manipulation, data binding, performance optimization, or accessibility in Vue 3 visualization components.

產生符合團隊規範的 Git commit 訊息。當使用者說「幫我寫 commit」、「commit 訊息」、「這次改了什麼幫我下 commit」、「產生 commit message」、「git commit」，或貼上 diff / 變更說明要求整理成 commit 時，立即使用此 skill。會根據變更性質自動選擇正確的 prefix（fix / hotfix / update / merge / beta / sync），並遵循 1～2 句為主、過多項目才分行的格式規則。