npm - @bovinphang/frontend-craft - Versions diffs - 2.5.0 → 2.7.0 - Mend

@bovinphang/frontend-craft 2.5.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

package/docs/example-prompts.md CHANGED Viewed

@@ -14,98 +14,111 @@ Each example follows the same shape:
 | Scenario                       | Prompt                                                                                                                                                         | Best for                     | Expected output                                                                  | Notes                                    |
 | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------- |
-| Initialize project rules       | "Initialize this repository with the frontend-craft project templates for my current runtime. Ask before overwriting existing files."                          | `/fec-init`                  | Runtime config, rules, and project guidance installed or a clear overwrite plan. | Works best from the target project root. |
+| Initialize project rules       | "Initialize this repository with the frontend-craft project templates for my current runtime. Ask before overwriting existing files."                          | cmd: `/fec-init`                  | Runtime config, rules, and project guidance installed or a clear overwrite plan. | Works best from the target project root. |
 | Pick a runtime install path    | "I want to use frontend-craft with Codex and Claude Code on this machine. Explain whether I should install locally or globally, then show the exact commands." | runtime docs                 | A short recommendation and install commands.                                     | Mention team/shared vs personal use.     |
 | Learn how to ask               | "Show me five frontend-craft prompts for reviewing, building, testing, debugging, and design-to-code work in this repo."                                       | docs guidance                | A short prompt set tailored to the detected project.                             | Good first prompt after install.         |
-| Confirm available capabilities | "Inspect this repo and summarize which frontend-craft commands, skills, agents, hooks, and MCP templates are available."                                       | `fec-doc-sync`, runtime docs | Capability summary grounded in installed files.                                  | Useful after upgrades.                   |
+| Confirm available capabilities | "Inspect this repo and summarize which frontend-craft commands, skills, agents, hooks, and MCP templates are available."                                       | runtime docs                 | Capability summary grounded in installed files.                                  | Useful after upgrades.                   |
 ## Review And Quality
 | Scenario              | Prompt                                                                                                                                                                      | Best for                                                    | Expected output                                                                                   | Notes                                                                            |
 | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| Review recent changes | "Review my recent changes before merge. Focus on architecture, type safety, rendering behavior, styles, accessibility, and missing tests. Put findings first."              | `fec-code-review`, `fec-code-reviewer`, `/fec-review`       | Severity-ordered review with file references and test gaps.                                       | Add branch or diff range if needed.                                              |
-| PR readiness review   | "Review `src/features/checkout/` as if this is a PR. Call out blockers, risky assumptions, and what must be tested before merge."                                           | `fec-code-reviewer`                                         | Merge readiness assessment and structured report.                                                 | Include PR link if the runtime can access it.                                    |
-| TypeScript专项 review | "Audit the changed `.ts` and `.tsx` files for unsafe types, async bugs, over-wide interfaces, stale derived state, and non-idiomatic React/TypeScript."                     | `fec-typescript-reviewer`                                   | TypeScript-focused findings, usually report-only.                                                 | Best when JS/TS changes dominate.                                                |
-| Type contract review  | "Review the API DTOs, component props, generic helpers, and type guards in `src/features/billing/` for unsound assertions, over-wide types, and missing runtime narrowing." | `fec-typescript-type-safety`, `fec-typescript-reviewer`     | Type-boundary findings with safer models and type-test suggestions.                               | Good for SDK, design-system, or API-heavy changes.                               |
-| Security review       | "Audit `src/lib/auth.ts`, API clients, and any user HTML rendering for XSS, token leakage, unsafe storage, CSRF assumptions, and dangerous DOM APIs."                       | `fec-security-review`, `fec-security-reviewer`              | Security findings ranked by severity with concrete fixes.                                         | Include auth model and storage constraints.                                      |
-| Accessibility review  | "Check `src/components/ConfirmDialog.tsx` for focus trapping, keyboard flow, labels, ARIA usage, screen-reader behavior, touch targets, and WCAG 2.2 AA issues."            | `fec-accessibility-check`                                   | A11y findings and implementation guidance.                                                        | Provide screenshots for visual focus issues.                                     |
-| Performance review    | "Analyze dashboard performance with evidence: Core Web Vitals, bundle size, render hotspots, data waterfalls, memory leaks, and a realistic performance budget."            | `fec-performance-optimization`, `fec-performance-optimizer` | Performance report with baseline evidence, priorities, verification commands, and targeted fixes. | Include profiles, Lighthouse output, traces, or the slow user flow if available. |
-| UI fidelity review    | "Compare the implemented settings page against the supplied screenshot/design link and list layout, spacing, typography, state, and responsive mismatches."                 | `fec-ui-checker`                                            | UI fidelity report with actionable fixes.                                                         | Attach screenshot or design source.                                              |
+| Review recent changes | "Review my recent changes before merge. Focus on architecture, type safety, rendering behavior, styles, accessibility, and missing tests. Put findings first."              | skill: `fec-code-review` · agent: `fec-code-reviewer` · cmd: `/fec-review`       | Severity-ordered review with file references and test gaps.                                       | Add branch or diff range if needed.                                              |
+| PR readiness review   | "Review `src/features/checkout/` as if this is a PR. Call out blockers, risky assumptions, and what must be tested before merge."                                           | agent: `fec-code-reviewer`                                         | Merge readiness assessment and structured report.                                                 | Include PR link if the runtime can access it.                                    |
+| TypeScript专项 review | "Audit the changed `.ts` and `.tsx` files for unsafe types, async bugs, over-wide interfaces, stale derived state, and non-idiomatic React/TypeScript."                     | agent: `fec-typescript-reviewer`                                   | TypeScript-focused findings, usually report-only.                                                 | Best when JS/TS changes dominate.                                                |
+| Type contract review  | "Review the API DTOs, component props, generic helpers, and type guards in `src/features/billing/` for unsound assertions, over-wide types, and missing runtime narrowing." | skill: `fec-typescript-project-standard` · agent: `fec-typescript-reviewer`     | Type-boundary findings with safer models and type-test suggestions.                               | Good for SDK, design-system, or API-heavy changes.                               |
+| Security review       | "Audit `src/lib/auth.ts`, API clients, and any user HTML rendering for XSS, token leakage, unsafe storage, CSRF assumptions, and dangerous DOM APIs."                       | skill: `fec-security-review` · agent: `fec-security-reviewer`              | Security findings ranked by severity with concrete fixes.                                         | Include auth model and storage constraints.                                      |
+| Accessibility review  | "Check `src/components/ConfirmDialog.tsx` for focus trapping, keyboard flow, labels, ARIA usage, screen-reader behavior, touch targets, and WCAG 2.2 AA issues."            | skill: `fec-accessibility-check`                                   | A11y findings and implementation guidance.                                                        | Provide screenshots for visual focus issues.                                     |
+| Performance review    | "Analyze dashboard performance with evidence: Core Web Vitals, bundle size, render hotspots, data waterfalls, memory leaks, and a realistic performance budget."            | skill: `fec-performance-optimization` · agent: `fec-performance-optimizer` | Performance report with baseline evidence, priorities, verification commands, and targeted fixes. | Include profiles, Lighthouse output, traces, or the slow user flow if available. |
+| UI fidelity review    | "Compare the implemented settings page against the supplied screenshot/design link and list layout, spacing, typography, state, and responsive mismatches."                 | agent: `fec-ui-checker`                                            | UI fidelity report with actionable fixes.                                                         | Attach screenshot or design source.                                              |
 ## Planning And Architecture
 | Scenario               | Prompt                                                                                                                                                                                         | Best for                                                | Expected output                                                                                              | Notes                                                      |
 | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- |
-| Plan a feature         | "Before coding, plan the account billing feature: route structure, component boundaries, data flow, state ownership, validation flow, and rollout risks."                                      | `/fec-plan`, `fec-architect`                            | Architecture proposal and implementation plan.                                                               | Give acceptance criteria and constraints.                  |
-| Split a complex page   | "Refactor `src/pages/Dashboard.tsx` on paper first. Propose component boundaries, hooks, state ownership, and a safe step-by-step migration."                                                  | `fec-architect`, `fec-refactor-clean`                   | Refactor plan with risk controls.                                                                            | Ask for no code changes if you only want planning.         |
-| Test strategy          | "For the checkout rewrite, map risks to static checks, unit tests, component tests, E2E, visual checks, accessibility, and security coverage."                                                 | `/fec-plan`, `fec-testing-strategy`, `fec-test-planner` | Testing matrix and priority order.                                                                           | Useful before a large implementation.                      |
-| Source-driven decision | "Before changing our Next.js caching approach, verify the current project code and official docs. Summarize the version assumptions, recommended pattern, migration impact, and tests needed." | `fec-source-driven-development`                         | Source-backed decision summary with project facts, official references, assumptions, and verification steps. | Best for framework/library behavior that may have changed. |
-| Legacy migration       | "We have a jQuery multi-page app in `public/js/legacy/`. Create a phased plan to migrate to React + TypeScript without stopping feature work."                                                 | `fec-legacy-to-modern-migration`                        | Migration plan, risks, milestones, compatibility strategy.                                                   | Include release cadence and legacy constraints.            |
+| Plan a feature         | "Before coding, plan the account billing feature: route structure, component boundaries, data flow, state ownership, validation flow, and rollout risks."                                      | cmd: `/fec-plan` · agent: `fec-architect`                            | Architecture proposal and implementation plan.                                                               | Give acceptance criteria and constraints.                  |
+| Split a complex page   | "Refactor `src/pages/Dashboard.tsx` on paper first. Propose component boundaries, hooks, state ownership, and a safe step-by-step migration."                                                  | agent: `fec-architect` · skill: `fec-refactor-clean`                   | Refactor plan with risk controls.                                                                            | Ask for no code changes if you only want planning.         |
+| Test strategy          | "For the checkout rewrite, map risks to static checks, unit tests, component tests, E2E, visual checks, accessibility, and security coverage."                                                 | cmd: `/fec-plan` · skill: `fec-testing-strategy` · agent: `fec-test-planner` | Testing matrix and priority order.                                                                           | Useful before a large implementation.                      |
+| Source-driven decision | "Before changing our Next.js caching approach, verify the current project code and official docs. Summarize the version assumptions, recommended pattern, migration impact, and tests needed." | skill: `fec-source-driven-development`                         | Source-backed decision summary with project facts, official references, assumptions, and verification steps. | Best for framework/library behavior that may have changed. |
+| Legacy migration       | "We have a jQuery multi-page app in `public/js/legacy/`. Create a phased plan to migrate to React + TypeScript without stopping feature work."                                                 | skill: `fec-legacy-to-modern-migration`                        | Migration plan, risks, milestones, compatibility strategy.                                                   | Include release cadence and legacy constraints.            |
 ## Implementation
 | Scenario            | Prompt                                                                                                                                                                                                | Best for                                                     | Expected output                                                                                  | Notes                                                             |
 | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
-| React feature       | "Build a React + TypeScript user detail page that follows this repo's component, hook, route, state, and API patterns."                                                                               | `fec-react-project-standard`                                 | Code aligned with local React conventions.                                                       | Include target route and API shape.                               |
-| Vue 3 feature       | "Implement `Settings.vue` using Vue 3 + TypeScript conventions, Composition API, Pinia where appropriate, and existing composables."                                                                  | `fec-vue3-project-standard`                                  | Vue code matching project patterns.                                                              | Mention SSR/client-only constraints if relevant.                  |
-| Next.js App Router  | "Review and improve `app/(dashboard)/reports/page.tsx` for App Router data fetching, metadata, loading/error states, server/client boundaries, and actions."                                          | `fec-nextjs-project-standard`                                | Next.js-specific findings or code changes.                                                       | Include route segment behavior.                                   |
-| Nuxt 3 page         | "Build the admin reports page in Nuxt 3 with correct SSR behavior, `useFetch`/composables, middleware, and typed server routes."                                                                      | `fec-nuxt-project-standard`                                  | Nuxt implementation following conventions.                                                       | State whether route is SSR, SSG, or SPA.                          |
-| Vite config         | "Audit `vite.config.ts` for HMR, env variable exposure, dev proxy, build output, dependency pre-bundling, and plugin ordering."                                                                       | `fec-vite-project-standard`                                  | Vite config findings and safe edits.                                                             | Include build or dev-server symptoms.                             |
-| Official-docs check | "Check whether our Vite dependency pre-bundling workaround is still needed in the installed version. Use project config and official docs before recommending removal."                               | `fec-source-driven-development`, `fec-vite-project-standard` | Version-aware recommendation with source notes and rollback/verification plan.                   | Useful before removing compatibility code.                        |
-| Monorepo boundaries | "Check `apps/web` and `packages/ui` for package boundaries, workspace dependencies, build scripts, and Turborepo/Nx task graph issues."                                                               | `fec-monorepo-project-standard`                              | Boundary and task orchestration review.                                                          | Include package manager and workspace files.                      |
-| Dependency upgrade  | "Plan the Vite and Storybook upgrade in this repo: read release notes, identify breaking changes, review lockfile and peer dependency risks, and propose the validation matrix."                      | `fec-dependency-upgrade`, `fec-source-driven-development`    | Upgrade batches, source-backed risks, affected areas, verification commands, and rollback notes. | Keep major upgrades separate from unrelated refactors.            |
-| Server-state data   | "Review `src/queries/useReports.ts`: query keys, cache lifetime, invalidation, optimistic updates, error states, and suspense/loading behavior."                                                      | `fec-data-fetching`                                          | TanStack Query/server-state guidance or implementation.                                          | Include API volatility and UX expectations.                       |
-| State ownership     | "Audit dashboard state ownership: decide what belongs in URL params, TanStack Query, local component state, browser persistence, or a global store, then propose a safe migration."                   | `fec-state-management`                                       | State inventory, ownership decisions, store boundaries, and verification steps.                  | Useful before store refactors or removing duplicated state.       |
-| API integration     | "Design a typed API integration layer for checkout: client boundaries, error mapping, auth refresh, upload strategy, and whether order updates should use polling, SSE, or WebSocket."                | `fec-api-integration`                                        | API client strategy or implementation with failure states and integration checks.                | Include backend ownership, auth model, and endpoint contracts.    |
-| Complex form        | "Build a multi-step registration form with React Hook Form + Zod, file upload, conditional fields, async validation, and accessible errors."                                                          | `fec-form-handling`                                          | Typed form implementation and tests if requested.                                                | Include final payload contract.                                   |
-| Route protection    | "Add role-based protection for `/admin`: redirect anonymous users, deny unauthorized roles, preserve return URL, and avoid flashing protected content."                                               | `fec-route-protection`                                       | Auth guard/middleware implementation.                                                            | Explain auth source and roles.                                    |
-| Browser storage     | "Choose and implement safe client persistence for draft checkout data. Compare localStorage, sessionStorage, IndexedDB, and cookies for this use case."                                               | `fec-browser-storage`                                        | Storage recommendation and implementation.                                                       | Mention sensitive fields and retention rules.                     |
-| Large list          | "`ProductList` renders 20,000 rows and scrolls poorly. Add virtualization and keep keyboard navigation and dynamic row heights working."                                                              | `fec-list-virtualization`                                    | Virtualized list implementation and performance notes.                                           | Provide UI library constraints.                                   |
-| PWA                 | "Turn this app into an installable PWA with manifest, icons, service worker, offline fallback, cache strategy, and update prompt."                                                                    | `fec-pwa-implementation`                                     | PWA implementation and validation steps.                                                         | State whether auth/payment routes must be network-only.           |
-| Web Worker          | "Move image processing off the main thread using a Web Worker and Comlink, with progress updates and cancellation."                                                                                   | `fec-web-workers`                                            | Worker integration and typed messaging.                                                          | Mention browser support and file size limits.                     |
-| Canvas/Three.js     | "Add a WebGL shader background or Three.js product viewer with responsive sizing, WebGL2/shader error checks, accessible fallback, performance safeguards, and verification that the canvas renders." | `fec-canvas-threejs`                                         | 3D/canvas/shader implementation and visual verification.                                         | Include assets, shader requirements, and interaction constraints. |
-| SVG animation       | "Add reduced-motion-aware SVG micro-interactions to the hero illustration using the animation library already used in the app."                                                                       | `fec-svg-animation`                                          | SVG animation with fallback behavior.                                                            | Include motion constraints and target browsers.                   |
+| React feature       | "Build a React + TypeScript user detail page that follows this repo's component, hook, route, state, and API patterns."                                                                               | skill: `fec-react-project-standard`                                 | Code aligned with local React conventions.                                                       | Include target route and API shape.                               |
+| Vue 3 feature       | "Implement `Settings.vue` using Vue 3 + TypeScript conventions, Composition API, Pinia where appropriate, and existing composables."                                                                  | skill: `fec-vue3-project-standard`                                  | Vue code matching project patterns.                                                              | Mention SSR/client-only constraints if relevant.                  |
+| Next.js App Router  | "Review and improve `app/(dashboard)/reports/page.tsx` for App Router data fetching, metadata, loading/error states, server/client boundaries, and actions."                                          | skill: `fec-nextjs-project-standard`                                | Next.js-specific findings or code changes.                                                       | Include route segment behavior.                                   |
+| Nuxt 3 page         | "Build the admin reports page in Nuxt 3 with correct SSR behavior, `useFetch`/composables, middleware, and typed server routes."                                                                      | skill: `fec-nuxt-project-standard`                                  | Nuxt implementation following conventions.                                                       | State whether route is SSR, SSG, or SPA.                          |
+| Vite config         | "Audit `vite.config.ts` for HMR, env variable exposure, dev proxy, build output, dependency pre-bundling, and plugin ordering."                                                                       | skill: `fec-vite-project-standard`                                  | Vite config findings and safe edits.                                                             | Include build or dev-server symptoms.                             |
+| Official-docs check | "Check whether our Vite dependency pre-bundling workaround is still needed in the installed version. Use project config and official docs before recommending removal."                               | skill: `fec-source-driven-development` · skill: `fec-vite-project-standard` | Version-aware recommendation with source notes and rollback/verification plan.                   | Useful before removing compatibility code.                        |
+| Monorepo boundaries | "Check `apps/web` and `packages/ui` for package boundaries, workspace dependencies, build scripts, and Turborepo/Nx task graph issues."                                                               | skill: `fec-monorepo-project-standard`                              | Boundary and task orchestration review.                                                          | Include package manager and workspace files.                      |
+| Dependency upgrade  | "Plan the Vite and Storybook upgrade in this repo: read release notes, identify breaking changes, review lockfile and peer dependency risks, and propose the validation matrix."                      | skill: `fec-dependency-upgrade` · skill: `fec-source-driven-development`    | Upgrade batches, source-backed risks, affected areas, verification commands, and rollback notes. | Keep major upgrades separate from unrelated refactors.            |
+| Server-state data   | "Review `src/queries/useReports.ts`: query keys, cache lifetime, invalidation, optimistic updates, error states, and suspense/loading behavior."                                                      | skill: `fec-data-fetching`                                          | TanStack Query/server-state guidance or implementation.                                          | Include API volatility and UX expectations.                       |
+| State ownership     | "Audit dashboard state ownership: decide what belongs in URL params, TanStack Query, local component state, browser persistence, or a global store, then propose a safe migration."                   | skill: `fec-state-management`                                       | State inventory, ownership decisions, store boundaries, and verification steps.                  | Useful before store refactors or removing duplicated state.       |
+| Backend handoff     | "Write a frontend-to-backend requirements handoff for the order detail page: data to display, user actions, UI states, permission rules, uncertainties, and questions for backend."                   | skill: `fec-backend-requirements-handoff`                           | Backend-facing requirements document focused on UI needs and open questions.                     | Use before API contract design when backend owns implementation.  |
+| API integration     | "Design a typed API integration layer for checkout: client boundaries, error mapping, auth refresh, upload strategy, and whether order updates should use polling, SSE, or WebSocket."                | skill: `fec-api-integration`                                        | API client strategy or implementation with failure states and integration checks.                | Include backend ownership, auth model, and endpoint contracts.    |
+| Complex form        | "Build a multi-step registration form with React Hook Form + Zod, file upload, conditional fields, async validation, and accessible errors."                                                          | skill: `fec-form-handling`                                          | Typed form implementation and tests if requested.                                                | Include final payload contract.                                   |
+| Route protection    | "Add role-based protection for `/admin`: redirect anonymous users, deny unauthorized roles, preserve return URL, and avoid flashing protected content."                                               | skill: `fec-route-protection`                                       | Auth guard/middleware implementation.                                                            | Explain auth source and roles.                                    |
+| Browser storage     | "Choose and implement safe client persistence for draft checkout data. Compare localStorage, sessionStorage, IndexedDB, and cookies for this use case."                                               | skill: `fec-browser-storage`                                        | Storage recommendation and implementation.                                                       | Mention sensitive fields and retention rules.                     |
+| Large list          | "`ProductList` renders 20,000 rows and scrolls poorly. Add virtualization and keep keyboard navigation and dynamic row heights working."                                                              | skill: `fec-list-virtualization`                                    | Virtualized list implementation and performance notes.                                           | Provide UI library constraints.                                   |
+| PWA                 | "Turn this app into an installable PWA with manifest, icons, service worker, offline fallback, cache strategy, and update prompt."                                                                    | skill: `fec-pwa-implementation`                                     | PWA implementation and validation steps.                                                         | State whether auth/payment routes must be network-only.           |
+| Web Worker          | "Move image processing off the main thread using a Web Worker and Comlink, with progress updates and cancellation."                                                                                   | skill: `fec-web-workers`                                            | Worker integration and typed messaging.                                                          | Mention browser support and file size limits.                     |
+| Canvas/Three.js     | "Add a WebGL shader background or Three.js product viewer with responsive sizing, WebGL2/shader error checks, accessible fallback, performance safeguards, and verification that the canvas renders." | skill: `fec-canvas-threejs`                                         | 3D/canvas/shader implementation and visual verification.                                         | Include assets, shader requirements, and interaction constraints. |
+| SVG animation       | "Add reduced-motion-aware SVG micro-interactions to the hero illustration using the animation library already used in the app."                                                                       | skill: `fec-svg-animation`                                          | SVG animation with fallback behavior.                                                            | Include motion constraints and target browsers.                   |
+| Cross-skill absorption | "Absorb the testing strategy from this reference repository into our project: keep what fits, redesign in our conventions, and write a 1-page plan that names reusable patterns and a migration path."                                                          | skill: `fec-alchemy`                                                | Reusable pattern inventory, redesign proposal, and migration path.                               | Provide the reference repo URL or local path; note stack and project constraints.          |
+| Editable tech diagram   | "Generate an editable draw.io architecture diagram for the auth flow: emit a `.drawio` source, run the lint, produce a viewer URL, and export a PNG. Use existing shape and brand symbol lookups." | skill: `fec-drawio-studio`                                          | `.drawio` source, lint report, viewer/editor URL, and PNG export.                                | If the data is data-residency sensitive, use a self-hosted base URL or local CLI export.    |
 ## UI And Design
 | Scenario                   | Prompt                                                                                                                                                                                                                       | Best for                                             | Expected output                                                                     | Notes                                                                                   |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| Design-to-code             | "Implement the UI from Figma node `123:456`. Use existing design tokens and components, match spacing and responsive states, and document assumptions."                                                                      | `fec-implement-from-design`, `fec-figma-implementer` | UI code plus design implementation notes/report.                                    | Works best with MCP credentials configured.                                             |
-| Screenshot-to-polish       | "Polish this dashboard UI so it feels like a production SaaS tool: density, hierarchy, empty/loading/error states, responsive layout, and interaction states."                                                               | `fec-ui-design`                                      | UI improvements and visual QA notes.                                                | Provide screenshot or local URL if possible.                                            |
-| Responsive layout          | "Fix this admin table for 375px, 768px, and 1440px: decide mobile column priority, container-query behavior, touch targets, safe-area handling, and overflow rules."                                                         | `fec-responsive-layout`, `fec-ui-checker`            | Responsive strategy, layout changes, viewport checks, and remaining risks.          | Include screenshots or a local route when possible.                                     |
-| Tailwind design system     | "Refactor these Tailwind components into semantic tokens and variants: theme extension, dark mode, class composition, dynamic class safety, and Storybook state coverage."                                                   | `fec-tailwind-design-system`, `fec-ui-design`        | Token/variant plan or implementation with class governance and dark-mode checks.    | Useful before a shared UI package grows too large.                                      |
-| Product-specific direction | "Create a product-specific design direction for a healthcare analytics dashboard: primary user tasks, visual anchor, information density, chart language, color roles, typography mood, and anti-patterns to avoid."         | `fec-ui-design`, `fec-performance-optimizer`         | Design direction, dashboard structure, chart UX guidance, and QA focus.             | Include audience, data types, and whether data is real-time.                            |
-| Design system generation   | "Generate a design system direction for a premium booking app. Define semantic color roles, type scale, spacing/radius rules, component tone, motion principles, and what should be intentionally avoided."                  | `fec-ui-design`, `fec-design-token-mapper`           | Product-aware design system proposal and token guidance.                            | Mention product category, brand tone, and target stack.                                 |
-| Master/Page overrides      | "Before polishing checkout, read `design-system/Acme/MASTER.md` and check for `design-system/Acme/pages/checkout.md`. Apply page overrides only where they differ from the master system."                                   | `fec-ui-design`                                      | Page-level polish aligned to persistent design-system rules.                        | Use when a project keeps design decisions in repo docs.                                 |
-| Landing page direction     | "Design a landing page direction for a B2B developer tool: first-screen hierarchy, proof points, product evidence, CTA placement, responsive sections, and a distinctive visual anchor that is not a generic gradient hero." | `fec-ui-design`                                      | Landing structure, visual hierarchy, conversion flow, and anti-generic guidance.    | Include offer, audience, and conversion goal.                                           |
-| Analytics dashboard UX     | "Improve this operations dashboard for scanning under pressure: table/chart balance, real-time status, alert priority, drill-down paths, empty/error states, and responsive density."                                        | `fec-ui-design`, `fec-accessibility-check`           | Dashboard UX recommendations or UI changes with state coverage.                     | Include screenshots, sample data, or the local route.                                   |
-| Mobile commerce UI         | "Design a mobile e-commerce product browsing flow with touch-safe controls, bottom navigation, filter/sort ergonomics, product media, loading/empty states, and checkout entry points."                                      | `fec-ui-design`, `fec-accessibility-check`           | Mobile UI direction, interaction states, and responsive constraints.                | State whether this is mobile web or native-like web UI.                                 |
-| Fintech interface polish   | "Polish this banking interface so it feels trustworthy and calm: balance visibility, transaction hierarchy, risk states, contrast, focus behavior, and restrained motion."                                                   | `fec-ui-design`, `fec-security-review`               | Fintech-appropriate UI polish and risk-state guidance.                              | Include compliance or masking requirements if any.                                      |
-| Portfolio visual identity  | "Create a distinctive portfolio direction for a designer/developer: project storytelling, navigation rhythm, case-study layout, media treatment, typography personality, and reduced-motion fallback."                       | `fec-ui-design`, `fec-svg-animation`                 | Portfolio UI direction and interaction guidance.                                    | Provide personal brand tone and example projects.                                       |
-| Interaction motion         | "Plan the motion system for this product page: Framer Motion vs GSAP choices, page transitions, scroll animation, reduced-motion fallback, lazy loading, and performance budgets."                                           | `fec-motion-interaction`, `fec-ui-design`            | Motion direction, tool choices, accessibility fallback, and verification checklist. | Include brand tone, device constraints, and whether motion is decorative or functional. |
-| Anti-generic UI review     | "Review this page for generic AI-app patterns: overused purple gradients, stacked cards, vague hero copy, weak product evidence, one-note color, and missing interaction states."                                            | `fec-ui-design`                                      | Anti-pattern findings and concrete replacement direction.                           | Works well with a screenshot or local URL.                                              |
-| Pre-delivery UI QA         | "Run a pre-delivery UI QA pass across 375px, 768px, and 1440px: text overflow, focus rings, hover/active/disabled states, reduced motion, loading/empty/error states, and visual consistency."                               | `fec-ui-design`, `fec-accessibility-check`           | UI QA checklist, findings, and fix recommendations.                                 | Best near the end of implementation.                                                    |
-| Design token mapping       | "Map Figma variables for color, type, spacing, radius, and shadow into this repo's design token structure without breaking existing components."                                                                             | `fec-design-token-mapper`                            | Token mapping proposal or code changes.                                             | Include token naming rules.                                                             |
-| Storybook docs             | "Set up Storybook docs for `packages/ui/Button` and `Dialog`: MDX, states, accessibility addon, interaction tests, and visual baselines."                                                                                    | `fec-storybook-component-doc`                        | Storybook stories/docs and test guidance.                                           | Include current Storybook status.                                                       |
+| Design-to-code             | "Implement the UI from Figma node `123:456`. Use existing design tokens and components, match spacing and responsive states, and document assumptions."                                                                      | skill: `fec-implement-from-design` · agent: `fec-figma-implementer` | UI code plus design implementation notes/report.                                    | Works best with MCP credentials configured.                                             |
+| Screenshot-to-polish       | "Polish this dashboard UI so it feels like a production SaaS tool: density, hierarchy, empty/loading/error states, responsive layout, and interaction states."                                                               | skill: `fec-ui-design`                                      | UI improvements and visual QA notes.                                                | Provide screenshot or local URL if possible.                                            |
+| Image and diagram generation | "Generate an editable architecture diagram and PNG, then run PNG QA for overlap, clipped labels, and stacked connectors; repair the source for up to two rounds."                                                          | skill: `fec-image-generation` · skill: `fec-ui-design`              | Editable source, exported PNG, QA report, and repair notes.                         | Use manifest coordinates when the renderer can expose layout boxes.                     |
+| Web video presentation | "Turn this article into a recordable 16:9 web video presentation: create script and outline, scaffold a Vite/React stage, and define chapter steps for screen recording." | skill: `fec-web-video-presentation` · skill: `fec-ui-design` | Script/outline, step-driven presentation scaffold, theme notes, and recording checklist. | Best for talks, lessons, product demos, and narrated explainers. |
+| Responsive layout          | "Fix this admin table for 375px, 768px, and 1440px: decide mobile column priority, container-query behavior, touch targets, safe-area handling, and overflow rules."                                                         | skill: `fec-responsive-layout` · agent: `fec-ui-checker`            | Responsive strategy, layout changes, viewport checks, and remaining risks.          | Include screenshots or a local route when possible.                                     |
+| Tailwind design system     | "Refactor these Tailwind components into semantic tokens and variants: theme extension, dark mode, class composition, dynamic class safety, and Storybook state coverage."                                                   | skill: `fec-tailwind-design-system` · skill: `fec-ui-design`        | Token/variant plan or implementation with class governance and dark-mode checks.    | Useful before a shared UI package grows too large.                                      |
+| Product-specific direction | "Create a product-specific design direction for a healthcare analytics dashboard: primary user tasks, visual anchor, information density, chart language, color roles, typography mood, and anti-patterns to avoid."         | skill: `fec-ui-design` · agent: `fec-performance-optimizer`         | Design direction, dashboard structure, chart UX guidance, and QA focus.             | Include audience, data types, and whether data is real-time.                            |
+| Design system generation   | "Generate a design system direction for a premium booking app. Define semantic color roles, type scale, spacing/radius rules, component tone, motion principles, and what should be intentionally avoided."                  | skill: `fec-ui-design` · agent: `fec-design-token-mapper`           | Product-aware design system proposal and token guidance.                            | Mention product category, brand tone, and target stack.                                 |
+| Master/Page overrides      | "Before polishing checkout, read `design-system/Acme/MASTER.md` and check for `design-system/Acme/pages/checkout.md`. Apply page overrides only where they differ from the master system."                                   | skill: `fec-ui-design`                                      | Page-level polish aligned to persistent design-system rules.                        | Use when a project keeps design decisions in repo docs.                                 |
+| Landing page direction     | "Design a landing page direction for a B2B developer tool: first-screen hierarchy, proof points, product evidence, CTA placement, responsive sections, and a distinctive visual anchor that is not a generic gradient hero." | skill: `fec-ui-design`                                      | Landing structure, visual hierarchy, conversion flow, and anti-generic guidance.    | Include offer, audience, and conversion goal.                                           |
+| Analytics dashboard UX     | "Improve this operations dashboard for scanning under pressure: table/chart balance, real-time status, alert priority, drill-down paths, empty/error states, and responsive density."                                        | skill: `fec-ui-design` · skill: `fec-accessibility-check`           | Dashboard UX recommendations or UI changes with state coverage.                     | Include screenshots, sample data, or the local route.                                   |
+| Mobile commerce UI         | "Design a mobile e-commerce product browsing flow with touch-safe controls, bottom navigation, filter/sort ergonomics, product media, loading/empty states, and checkout entry points."                                      | skill: `fec-ui-design` · skill: `fec-accessibility-check`           | Mobile UI direction, interaction states, and responsive constraints.                | State whether this is mobile web or native-like web UI.                                 |
+| Fintech interface polish   | "Polish this banking interface so it feels trustworthy and calm: balance visibility, transaction hierarchy, risk states, contrast, focus behavior, and restrained motion."                                                   | skill: `fec-ui-design` · skill: `fec-security-review`               | Fintech-appropriate UI polish and risk-state guidance.                              | Include compliance or masking requirements if any.                                      |
+| Portfolio visual identity  | "Create a distinctive portfolio direction for a designer/developer: project storytelling, navigation rhythm, case-study layout, media treatment, typography personality, and reduced-motion fallback."                       | skill: `fec-ui-design` · skill: `fec-svg-animation`                 | Portfolio UI direction and interaction guidance.                                    | Provide personal brand tone and example projects.                                       |
+| Interaction motion         | "Plan the motion system for this product page: Framer Motion vs GSAP choices, page transitions, scroll animation, reduced-motion fallback, lazy loading, and performance budgets."                                           | skill: `fec-motion-interaction` · skill: `fec-ui-design`            | Motion direction, tool choices, accessibility fallback, and verification checklist. | Include brand tone, device constraints, and whether motion is decorative or functional. |
+| Anti-generic UI review     | "Review this page for generic AI-app patterns: overused purple gradients, stacked cards, vague hero copy, weak product evidence, one-note color, and missing interaction states."                                            | skill: `fec-ui-design`                                      | Anti-pattern findings and concrete replacement direction.                           | Works well with a screenshot or local URL.                                              |
+| Pre-delivery UI QA         | "Run a pre-delivery UI QA pass across 375px, 768px, and 1440px: text overflow, focus rings, hover/active/disabled states, reduced motion, loading/empty/error states, and visual consistency."                               | skill: `fec-ui-design` · skill: `fec-accessibility-check`           | UI QA checklist, findings, and fix recommendations.                                 | Best near the end of implementation.                                                    |
+| Design token mapping       | "Map Figma variables for color, type, spacing, radius, and shadow into this repo's design token structure without breaking existing components."                                                                             | agent: `fec-design-token-mapper`                            | Token mapping proposal or code changes.                                             | Include token naming rules.                                                             |
+| Storybook docs             | "Set up Storybook docs for `packages/ui/Button` and `Dialog`: MDX, states, accessibility addon, interaction tests, and visual baselines."                                                                                    | skill: `fec-storybook-component-doc`                        | Storybook stories/docs and test guidance.                                           | Include current Storybook status.                                                       |
 ## Testing
 | Scenario            | Prompt                                                                                                                                                        | Best for                            | Expected output                                 | Notes                                               |
 | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------------------------------------------- | --------------------------------------------------- |
-| TDD implementation  | "Use TDD to add coupon validation to checkout: write failing tests first, implement the minimum code, refactor, and keep the test list visible."              | `/fec-tdd`, `fec-tdd-workflow`      | Red-green-refactor loop with tests and code.    | Best for contained behavior changes.                |
-| Component tests     | "Write React Testing Library tests for `UserCard`: rendering, loading/error states, user-event interactions, accessibility assertions, and regression cases." | `fec-component-testing`             | Component tests following local conventions.    | Vue projects should ask for Vue Test Utils instead. |
-| E2E smoke test      | "Add Playwright smoke tests for login and checkout. Use Page Objects, stable selectors, CI-friendly retries, and trace artifacts on failure."                 | `fec-e2e-testing`, `fec-e2e-runner` | E2E tests, runner guidance, and summary report. | Include test account or mock strategy.              |
-| Flaky E2E diagnosis | "The checkout E2E test is flaky in CI. Analyze likely timing, network, storage, and selector issues, then stabilize it without hiding failures."              | `fec-e2e-testing`, `fec-e2e-runner` | Root-cause analysis and targeted fix.           | Include CI logs or traces.                          |
+| TDD implementation  | "Use TDD to add coupon validation to checkout: write failing tests first, implement the minimum code, refactor, and keep the test list visible."              | cmd: `/fec-tdd` · skill: `fec-tdd-workflow`      | Red-green-refactor loop with tests and code.    | Best for contained behavior changes.                |
+| Component tests     | "Write React Testing Library tests for `UserCard`: rendering, loading/error states, user-event interactions, accessibility assertions, and regression cases." | skill: `fec-component-testing`             | Component tests following local conventions.    | Vue projects should ask for Vue Test Utils instead. |
+| E2E smoke test      | "Add Playwright smoke tests for login and checkout. Use Page Objects, stable selectors, CI-friendly retries, and trace artifacts on failure."                 | skill: `fec-e2e-testing` · agent: `fec-e2e-runner` | E2E tests, runner guidance, and summary report. | Include test account or mock strategy.              |
+| Flaky E2E diagnosis | "The checkout E2E test is flaky in CI. Analyze likely timing, network, storage, and selector issues, then stabilize it without hiding failures."              | skill: `fec-e2e-testing` · agent: `fec-e2e-runner` | Root-cause analysis and targeted fix.           | Include CI logs or traces.                          |
+## Debugging
+| Scenario             | Prompt                                                                                                                                                                                              | Best for                              | Expected output                                                              | Notes                                                                       |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| Triage a white screen | "Use the unified frontend debug framework to triage this white screen in `src/app/router.tsx`. Classify the failure type, run the matching diagnostic step, then propose the smallest fix and regression test." | skill: `fec-debug-framework` | Classification, diagnostic output, minimal patch, and regression test. | Paste failing logs, repro path, and recent changes; mention runtime/build/network context. |
+| Triage a build error | "`pnpm test` is failing in CI with module resolution errors. Walk through the debug framework's build-failure branch and propose the smallest fix."                                                  | skill: `fec-debug-framework` · cmd: `/fec-debug` | Failure type, diagnostic steps, and minimal patch. | Paste the exact failing command and stack trace.                            |
 ## Maintenance
 | Scenario              | Prompt                                                                                                                                                                            | Best for                                                                  | Expected output                                                                    | Notes                                           |
 | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------- |
-| Build failure repair  | "`pnpm lint`, `pnpm typecheck`, and `pnpm test` are failing. Fix them incrementally without weakening rules or skipping tests."                                                   | `/fec-build-fix`, `fec-validation-fix`, `fec-build-fixer`                 | Minimal fixes and validation report.                                               | Paste exact failing commands.                   |
-| Dead-code cleanup     | "Find and safely remove unused exports, dead routes, stale styles, and unused dependencies. Preserve public API and write a report."                                              | `/fec-refactor-clean`, `fec-refactor-clean`, `fec-refactor-cleaner`       | Cleanup plan/changes and report.                                                   | Good before releases.                           |
-| Documentation sync    | "Update public docs so README, runtime docs, capability tables, and metadata match the current commands, skills, agents, hooks, and package files."                               | `/fec-doc-sync`, `fec-doc-sync`, `fec-doc-updater`                        | Synchronized docs and verification notes.                                          | Avoid copying temporary reports into docs.      |
-| Source-backed upgrade | "Plan a safe upgrade for React Router/TanStack Query/Vite. Check official migration notes, compare current project usage, list breaking changes, and propose verification steps." | `fec-dependency-upgrade`, `fec-source-driven-development`, `fec-doc-sync` | Upgrade decision notes, affected files, migration risks, and validation checklist. | Pair with docs sync if public guidance changes. |
-| Legacy maintenance    | "Improve `public/js/legacy/cart.js` while keeping the current jQuery/MPA stack. Reduce risk, improve structure, and do not rewrite it to React yet."                              | `fec-legacy-web-standard`                                                 | Safe legacy maintenance changes or recommendations.                                | Mention browser support constraints.            |
+| Build failure repair  | "`pnpm lint`, `pnpm typecheck`, and `pnpm test` are failing. Fix them incrementally without weakening rules or skipping tests."                                                   | cmd: `/fec-debug` · skill: `fec-validation-fix` · agent: `fec-debugger`            | Minimal fixes and validation report.                                               | Paste exact failing commands.                   |
+| Dead-code cleanup     | "Find and safely remove unused exports, dead routes, stale styles, and unused dependencies. Preserve public API and write a report."                                              | cmd: `/fec-refactor-clean` · skill: `fec-refactor-clean` · agent: `fec-refactor-cleaner`       | Cleanup plan/changes and report.                                                   | Good before releases.                           |
+| Documentation sync    | "Update the README and docs so setup, scripts, environment variables, API routes, UI routes, and deployment notes match the current frontend code and config."                     | cmd: `/fec-doc-sync` · skill: `fec-doc-sync` · agent: `fec-doc-updater`                        | Synchronized docs and verification notes.                                          | Avoid copying temporary reports into docs.      |
+| Capability docs sync  | "This repo publishes skills and commands. Sync the capability tables, metadata, runtime docs, and package files with the installed contents."                                      | cmd: `/fec-doc-sync` · skill: `fec-doc-sync` · agent: `fec-doc-updater`                        | Distribution docs grounded in installed files.                                     | Use for skill/agent/command repos.              |
+| Source-backed upgrade | "Plan a safe upgrade for React Router/TanStack Query/Vite. Check official migration notes, compare current project usage, list breaking changes, and propose verification steps." | skill: `fec-dependency-upgrade` · skill: `fec-source-driven-development` · cmd: `/fec-doc-sync` | Upgrade decision notes, affected files, migration risks, and validation checklist. | Pair with docs sync if public guidance changes. |
+| Legacy maintenance    | "Improve `public/js/legacy/cart.js` while keeping the current jQuery/MPA stack. Reduce risk, improve structure, and do not rewrite it to React yet."                              | skill: `fec-legacy-web-standard`                                                 | Safe legacy maintenance changes or recommendations.                                | Mention browser support constraints.            |
 ## Power-User Prompts
@@ -113,12 +126,12 @@ Use these when you know the internal entry point you want.
 | Scenario                | Prompt                                                                                                                                                                       | Best for              | Expected output                       | Notes                                                 |
 | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------- | ----------------------------------------------------- |
-| Slash command review    | "`/fec-review` Review the last commit and write `reports/code-review-*.md` with severity, evidence, and merge recommendation."                                               | `/fec-review`         | Structured code-review report.        | Claude-style runtimes expose slash commands directly. |
-| Slash command plan      | "`/fec-plan` Plan the dashboard analytics feature before implementation. Include component boundaries, data flow, state ownership, rollout steps, and implementation risks." | `/fec-plan`           | Architecture proposal.                | Use before complex work.                              |
-| Slash command scaffold  | "`/fec-scaffold page UserDetail` Create the standard page structure for a user detail view following this repo's conventions."                                               | `/fec-scaffold`       | Page/feature/component scaffold.      | Confirm overwrite behavior if files exist.            |
-| Slash command test plan | "`/fec-plan` Build a risk-based test plan for the billing refactor."                                                                                                         | `/fec-plan`           | Test matrix and priority order.       | Can be report-only.                                   |
-| Slash command TDD       | "`/fec-tdd` Add password strength validation with failing tests first, then implementation."                                                                                 | `/fec-tdd`            | TDD loop and validated change.        | Keep scope small.                                     |
-| Slash command build fix | "`/fec-build-fix` Fix the failing validation commands from this log: <paste log>."                                                                                           | `/fec-build-fix`      | Incremental validation fixes.         | Paste exact logs.                                     |
-| Slash command cleanup   | "`/fec-refactor-clean` Safely remove unused exports and dependencies from this package."                                                                                     | `/fec-refactor-clean` | Cleanup report and safe edits.        | Run tests after.                                      |
-| Slash command docs      | "`/fec-doc-sync` Sync README, runtime docs, and metadata with the current package contents."                                                                                 | `/fec-doc-sync`       | Docs updates and verification.        | Use before releases.                                  |
-| Explicit agent          | "Delegate to `fec-code-reviewer` for a PR-style review of `src/features/payments/`, then summarize blockers first."                                                          | agent dispatch        | Specialized agent report and summary. | Best for focused expert review.                       |
+| Slash command review    | "`/fec-review` Review the last commit and write `reports/code-review-*.md` with severity, evidence, and merge recommendation."                                               | cmd: `/fec-review`         | Structured code-review report.        | Claude-style runtimes expose slash commands directly. |
+| Slash command plan      | "`/fec-plan` Plan the dashboard analytics feature before implementation. Include component boundaries, data flow, state ownership, rollout steps, and implementation risks." | cmd: `/fec-plan`           | Architecture proposal.                | Use before complex work.                              |
+| Slash command scaffold  | "`/fec-scaffold page UserDetail` Create the standard page structure for a user detail view following this repo's conventions."                                               | cmd: `/fec-scaffold`       | Page/feature/component scaffold.      | Confirm overwrite behavior if files exist.            |
+| Slash command test plan | "`/fec-plan` Build a risk-based test plan for the billing refactor."                                                                                                         | cmd: `/fec-plan`           | Test matrix and priority order.       | Can be report-only.                                   |
+| Slash command TDD       | "`/fec-tdd` Add password strength validation with failing tests first, then implementation."                                                                                 | cmd: `/fec-tdd`            | TDD loop and validated change.        | Keep scope small.                                     |
+| Slash command build fix | "`/fec-debug` Fix the failing validation commands from this log: <paste log>."                                                                                           | cmd: `/fec-debug`      | Incremental validation fixes.         | Paste exact logs.                                     |
+| Slash command cleanup   | "`/fec-refactor-clean` Safely remove unused exports and dependencies from this package."                                                                                     | cmd: `/fec-refactor-clean` | Cleanup report and safe edits.        | Run tests after.                                      |
+| Slash command docs      | "`/fec-doc-sync` Sync README, docs, env examples, scripts, API/route notes, and deploy docs with the current project."                                                  | cmd: `/fec-doc-sync`       | Docs updates and verification.        | Use before releases.                                  |
+| Explicit agent          | "Delegate to `fec-code-reviewer` for a PR-style review of `src/features/payments/`, then summarize blockers first."                                                          | agent: `fec-code-reviewer`        | Specialized agent report and summary. | Best for focused expert review.                       |