my-skill

React-only Zustand state management skill for React SPA Vite and Next.js projects. Use when adding, configuring, bootstrapping, or refactoring Zustand stores, typed selectors, vanilla stores, client providers, persistence boundaries, or migration from ad hoc React state to Zustand. Do not use for Vue, Nuxt, Svelte, Angular, Remix, React Native, or non-React state libraries.

Vue-only Pinia state management skill for Nuxt 3/4 and Vue SPA Vite projects. Use when adding, configuring, bootstrapping, or refactoring Pinia stores, @pinia/nuxt modules, createPinia app registration, typed stores, storeToRefs usage, SSR-safe Nuxt state, store actions, getters, persistence boundaries, or migration from ad hoc Vue state to Pinia. Do not use for React, Next.js, Svelte, Angular, or non-Vue state libraries.

建立與維護 FastAPI 後端專案架構、feature 模組、router、Pydantic schema、service layer、app factory 與 app router 註冊。使用者提到 FastAPI endpoint、backend project architecture、backend feature、router、schema、service、request/response DTO、health endpoint 或 FastAPI greenfield backend 時使用。

Nuxt 4 通用專案建立、啟動、驗證與維護。首次建立新專案時 scaffold Nuxt app 與 section composition 架構：共用 components 組成 page-specific content sections，多個 content sections 組成 route pages。當需要建立或初始化 Nuxt 4 專案、建立 app/server/shared 目錄架構、加入 pages、app/content、components、composables、plugins、stores、server routes，或處理路由、SEO/meta、runtime config、Nuxt plugin warnings、模組與部署前驗證時使用。

Framework-agnostic Playwright E2E testing skill for frontend web apps. Use when a project needs end-to-end tests, browser workflow tests, cross-browser checks, form/auth flows, route smoke tests, visual regression, CI E2E setup, Playwright config, or flaky E2E debugging across React, Vue, Nuxt, Next.js, SvelteKit, Astro, Angular, Vite, static sites, or any browser-rendered frontend.

React + Vite feature-based frontend scaffold and maintenance skill. Use when creating or updating React/Vite projects with src/app, src/features, src/shared, routing, pages, components, hooks, types, assets, and feature-oriented refactors.

建立或檢查 opencode-bootstrap-json metadata。當使用者要求 scaffold commands、verification commands、runtime smoke checks、health URLs、project roles、setup order、framework/add-on/bootstrap metadata 或修正 skill bootstrap 邊界時使用。

當使用者要建立、檢查、啟動、停止、排錯、修復或泛化 Docker Compose 設定時，使用這個 skill。適用 docker-compose.yml、compose.yaml、service 啟動、container logs、port 衝突、環境變數、volumes、networks、healthchecks、資料庫容器、前後端 stack，或 "docker compose up" 失敗。使用者只要提到 "compose"、"docker-compose"、"啟動容器"、"啟動前後端"、"用 Docker 跑專案"、"修 docker-compose.yml"、"容器起不來"、"port 被佔用"，或預期有 docker-compose.yml 但檔案不存在且需要找出正確 Compose 流程時，都應優先使用。

使用 Docker image / Docker Compose 開發 PostgreSQL 資料庫，並用後端 ORM migration 進行 table/schema 開發。使用者提到 pgdb、Postgres、PostgreSQL、Docker database image、docker compose db service、ORM model、migration、Alembic、SQLAlchemy、Prisma、TypeORM、Django migration、建 table、資料表設計、schema change、後端資料庫欄位新增或修改時，都應使用這個 skill；即使使用者只說「pgdb」、「docker image pg」、「建 table」、「開資料庫」或「ORM」也要觸發。

Framework-aware frontend API client skill for Vite-based React SPA, Vite-based Vue SPA, and Nuxt. Use when a frontend project needs axios for Vite, Nuxt $fetch wrappers, an API client, dynamic parameter-based HTTP method calls, exported method helper functions, baseURL configuration, token or Authorization/Bearer headers, request hooks/interceptors, or normalized API error handling. Treat react-spa and vue-spa as Vite SPA aliases.

React UI kit skill for coss UI components. Use with React/Vite frontends when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Requires Tailwind CSS v4 and @base-ui/react. Covers imports, accessibility, Tailwind styling, and common pitfalls.

Nuxt UI kit skill for Nuxt 4 frontends. Use when a Greenfield or existing Nuxt project should use the official Nuxt UI component library, when the user asks for a Nuxt-compatible UI kit, or when adding Nuxt UI components, theming, templates, icons, forms, overlays, navigation, dashboards, docs, SaaS, or app shell UI. Requires a Nuxt/Nuxt 4 project such as the nuxt4-creater framework skill.

當使用者要建立、改善、除錯或執行 Docker build、Dockerfile、docker compose build、container image tagging、BuildKit/cache optimization、multi-stage builds、.dockerignore、image size reduction、platform builds 或 CI container build steps 時，使用這個 skill。這是通用 Docker build skill，適用 backend、frontend、monorepo 與各類 service 專案；即使使用者只說 "docker build"、"build image"、"containerize this"、"fix Dockerfile"、"docker compose build"、"映像檔"、"容器化"、"Docker 建置"、"修 Dockerfile" 或 "建 image"，也應優先使用。

React UI kit pattern index for coss UI particles. Use with React/Vite frontends after coss is selected or installed to find copy-paste-ready component patterns built on coss primitives. Requires coss UI components installed in the project. Each particle has a description and a JSON URL for easy installation.

建立、重寫或改善中文 repository README.md，尤其是 Greenfield repo bootstrap、OpenCode 自動 scaffold 後的 README、README 很像流水帳 evidence、或需要中英雙語/多語 README 與語言切換器時必須使用。預設以繁體中文撰寫 README.md，整合 create-readme 的專業 README 結構與 readme-i18n 的 Markdown/i18n preservation 規則，避免硬寫不存在的 API、Docker、DB 或 port。

極簡 commit message 產生器。移除 commit message 裡的廢話，同時保留意圖與必要原因。 使用 Conventional Commits 格式。Subject 前綴 ADO work item id，summary 盡量 ≤50 字元，只有「原因」不明顯時才寫 body。 當使用者說「寫 commit」、「commit message」、「產生 commit」、「幫我下 commit」、 「最小 commit」、「精簡 commit」、"write a commit", "commit message", "generate commit", "/commit"，或呼叫 /caveman-commit 時使用。看到 staged changes 時也應自動觸發。

Anti-slop frontend design taste skill. Use when the user explicitly asks for landing page, portfolio, marketing page, existing UI redesign, admin/dashboard layout planning, or higher-quality visual direction. Focus on brief reading, product-specific composition, app shell/layout decisions, typography, motion, content, responsive behavior, and interaction states. Do not use for framework scaffold, API client, testing, backend, database, DevOps, or non-visual code changes.

從公開網站 URL 萃取設計 primitives，整理顏色、字體、spacing、radius、shadow 等基礎 tokens，並可為專案產生 starter token files。Use when the user explicitly asks to extract, reverse-engineer, or bootstrap design tokens from an existing public website. Do not use for general UI design, framework scaffold, Playwright E2E test setup, or browser automation tasks.

Review visible frontend UI for production quality, design system compliance, accessibility, responsive behavior, theme correctness, and interaction clarity. Use for UI-focused PR reviews, design reviews, component reviews, accessibility audits, and explicit requests to create or judge distinctive visual interfaces. Do not use for framework scaffold, API client work, E2E test setup, backend API reviews, database schema reviews, infrastructure, DevOps, or pure business logic without UI impact.

Production-grade frontend interface design and refinement workflow. Use when the user explicitly invokes impeccable commands or asks to design, redesign, audit, critique, polish, improve visual hierarchy, layout, motion, responsive behavior, accessibility, UX copy, UI states, or design-system tokens for a visible interface. Do not use for framework scaffold, API client work, testing setup, backend, database, DevOps, CLI, or non-UI business logic.

Use when the task requires terminal-driven real-browser automation with `playwright-cli`: navigation, form filling, snapshots, screenshots, data extraction, or UI-flow debugging. Do not use for adding project E2E tests, Playwright test files, or `@playwright/test` dependencies; use `playwright-e2e-testing` for that.

UI/UX 設計決策與可視介面品質 skill。當使用者明確要求設計、重設計、審查、改善可用性、accessibility、responsive、theme、typography、layout、motion、表單/圖表/導航體驗，或修改使用者可見的 UI/UX 時使用。不要用於 framework scaffold、API client、testing、backend、database、DevOps、CLI 或不影響畫面的純程式邏輯。

Decompose complex tasks, design dependency graphs, and coordinate multi-agent work with proper task descriptions and workload balancing. Use this skill when breaking down work for agent teams, managing task dependencies, or monitoring team progress.

Break a plan, spec, PRD, or conversation into independently-grabbable tracer-bullet issues. Use this skill when turning planning artifacts into vertical-slice tasks or issue tracker work items.

將目前對話與 repo context 合成 spec/PRD 並發布到專案 issue tracker；不重新訪談，只整理已經討論清楚的內容。

高品質 skill 撰寫與改寫參考，聚焦 predictable triggering、information hierarchy、progressive disclosure、pruning 與降低 no-op 指令。

將 Epic 或高階 feature idea 拆成完整 feature-level PRD。適用於 feature PRD、user stories、acceptance criteria、requirements、out of scope 與工程交接文件。

Repository-aware product design flow for session-maintained design artifacts. Use after PRD-to-product-design establishes design-context.md, when UX, wireframes, system DESIGN.md, layout.md, previews, or implementation briefs must respect existing frontend routes, components, tokens, and implementation constraints without storing design Markdown in the product repository.

Create or update executable DESIGN.md contracts from approved UI artifacts, product evidence, existing design rules, or getdesign.md / Google DESIGN.md references. Use when generating final DESIGN.md files, documenting completed HTML/CSS or design-tool output, creating visual options, maintaining a living design system, guarding UI changes against existing rules, or improving AI-generated UI consistency and implementation quality.

Convert one or more PRDs, specifications, source User Stories, requirements references, and repository evidence into a product-wide design context and consolidated DESIGN.md that safely drives UX, wireframes, frontend design, and implementation. Use when design artifacts must be grounded in product requirements instead of generic dashboard, MVP, SaaS, or visual-reference defaults.

Enforce deterministic, hash-bound, non-looping review for Product Design visual options, layout options, and rendered scene matrices. Use whenever Project Flow generates, repairs, reviews, resumes, or validates DESIGN/layout/HTML preview artifacts.

進行結構化需求工作坊，用於 User Story / PRD discovery、questionPlan 產生、EARS 功能需求、Given/When/Then 驗收條件、邊界情境與定稿驗證。當需求模糊、User Story 顆粒太粗、驗收條件不可測、scope 不清，或 User Story 轉 PRD 流程需要更深入提問時使用。

Build or validate PRDs that connect problem, users, solution scope, success metrics, requirements, user stories, acceptance criteria, risks, and non-goals. Use when turning selected ADO User Stories or requirements into engineering-ready PRD drafts.

Diagnose requirements problems and guide discovery of real needs and constraints. Use for vague feature ideas, solution-first requests, unclear user problems, hidden constraints, scope boundaries, and turning fuzzy intent into validated requirements.

Validate production-ready product requirement completeness across discovery, User Story, and PRD drafting. Use for broad product ideas, requirements documents, admin or operational systems, customer-facing products, workflow-heavy features, regulated or sensitive data, and any request that should be directly implementable and operable rather than automatically reduced to an MVP.

Create or validate User Stories using 3 C's and INVEST criteria with clear card, conversation, confirmation, acceptance criteria, non-goals, assumptions, and traceability. Use when turning requirements into batch User Stories or reviewing User Story quality.

使用 GitHub awesome-copilot PRD discovery workflow 強化 PRD 提問、問題陳述、成功指標、scope、user stories、acceptance criteria 與 risk analysis。當 User Story 要轉 PRD、PRD 草稿缺 discovery 問題、或 PRD questionPlan 品質不足時使用。

產生高品質產品需求文件 PRD，適用於新產品、新功能、AI 功能、需求釐清、user story、acceptance criteria、technical specs、risk analysis 與 roadmap 規劃。

Ask the minimum necessary clarifying questions before requirements work when objectives, scope, constraints, success criteria, environment, actors, or acceptance criteria are ambiguous. Use in Requirements, User Story, PRD, and planning flows before drafting if proceeding would require risky assumptions.

Analyze multiple feature requests, customer asks, or stakeholder demands into problem themes, opportunities, priorities, risks, and requirements candidates. Use when input is a backlog, spreadsheet, notes, ADO items, or mixed request list rather than one clear requirement.