npm - @bovinphang/frontend-craft - Versions diffs - 2.6.0 → 2.8.0 - Mend

@bovinphang/frontend-craft 2.6.0 → 2.8.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 (414) hide show

package/docs/example-prompts.md CHANGED Viewed

@@ -14,7 +14,7 @@ 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."                                       | runtime docs                 | Capability summary grounded in installed files.                                  | Useful after upgrades.                   |
@@ -23,90 +23,105 @@ Each example follows the same shape:
 | 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.                     |
+| System blueprint diagram | "Create a presentation-ready system blueprint for our checkout platform. Keep the JSON and generated HTML as source, then export SVG and PNG delivery artifacts." | skill: `fec-image-generation` | JSON/HTML source, exported SVG/PNG, and source/asset handoff notes. | Best for architecture, deployment topology, agent runtime, memory, and before/after system maps. |
+| Process workflow diagram | "Turn this approval and automation flow into a readable process workflow diagram with lanes, ordered steps, decisions, exception paths, loop-backs, and waypoint-routed edges." | skill: `fec-image-generation` | Workflow JSON/HTML source, exported image, and notes about lanes, nodes, edges, and waypoints. | Use when ownership and branching matter more than exact infrastructure topology. |
+| Interactive live diagram | "Start a local interactive diagram session for the onboarding flow. Add nodes and edges incrementally, let me drag, relabel, remove, zoom, and then export the final deliverables." | skill: `fec-image-generation` | Live browser preview plus saved JSON/SVG/PNG or a handoff to HTML/draw.io source. | Good for collaborative sketching; switch to HTML technical diagrams or draw.io for long-term source ownership. |
+| 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 the README and docs so setup, scripts, environment variables, API routes, UI routes, and deployment notes match the current frontend code and config."                     | `/fec-doc-sync`, `fec-doc-sync`, `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."                                      | `/fec-doc-sync`, `fec-doc-sync`, `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." | `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
@@ -114,12 +129,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, docs, env examples, scripts, API/route notes, and deploy docs with the current project."                                                  | `/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.                       |

package/docs/ja-JP/README.md CHANGED Viewed

@@ -32,7 +32,7 @@
 各ランタイムのパスと注意事項は [`docs/runtimes/`](../runtimes/) にあります。
-**13 の専門エージェント**、**41 の自動起動スキル**、**8 のスラッシュコマンド**、**5 のイベント駆動フック**、6 つのデザインツールエンドポイント向け **MCP 統合**、そして完全な**ルールライブラリ**をひとつのパッケージにまとめています。コマンドひとつ実行するだけで、チームのすべての AI セッションが React、Vue、Next.js、Nuxt を同じように書きます——型安全で、アクセシブルで、セキュアで、一貫性を持って。
+**13 の専門エージェント**、**45 の自動起動スキル**、**8 のスラッシュコマンド**、**5 のイベント駆動フック**、6 つのデザインツールエンドポイント向け **MCP 統合**、そして完全な**ルールライブラリ**をひとつのパッケージにまとめています。コマンドひとつ実行するだけで、チームのすべての AI セッションが React、Vue、Next.js、Nuxt を同じように書きます——型安全で、アクセシブルで、セキュアで、一貫性を持って。
 ---
@@ -40,7 +40,7 @@
 | 課題                                                                          | frontend-craft の解決策                                                                                        |
 | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| AI アシスタントが一貫性のない、型なしの、安全でないフロントエンドコードを書く | **41 のスキル**がチーム標準をエンコード——該当ファイルに触れると自動起動                                        |
+| AI アシスタントが一貫性のない、型なしの、安全でないフロントエンドコードを書く | **45 のスキル**がチーム標準をエンコード——該当ファイルに触れると自動起動                                        |
 | AI ツールごとにプラグイン形式が異なる                                         | **ひとつの CLI** で同じルール、エージェント、フックを 15 のランタイムにインストール                            |
 | デザインからコードへの受け渡しで情報が失われる                                | **MCP 統合**が Figma、Figma Desktop、Sketch、MasterGo、Pixso、墨刀からより豊富なデザインコンテキストを取り込み |
 | レビューが場当たり的で浅い                                                    | **13 のエージェント**がグレード付きレポートを出力：コード、セキュリティ、a11y、パフォーマンス、TS、UI 忠実度   |
@@ -160,15 +160,15 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 スラッシュコマンドは構造化ワークフローの主要なエントリーポイントです。ほとんどが `reports/` にタイムスタンプ付き Markdown レポートを出力します。
-| コマンド              | 用途                                                                | レポート                                             |
-| --------------------- | ------------------------------------------------------------------- | ---------------------------------------------------- |
-| `/fec-init`           | プロジェクトテンプレート（CLAUDE.md、ルール、設定）を初期化         | —                                                    |
-| `/fec-review`         | 指定または最近変更したファイルの構造化レビュー                      | `code-review-*.md`                                   |
-| `/fec-scaffold`       | 規約に従い page / feature / component のボイラープレートを作成      | —                                                    |
-| `/fec-plan`           | 統合計画：実装アーキテクチャまたはテスト戦略                        | `architecture-proposal-*.md` または `test-plan-*.md` |
-| `/fec-tdd`            | 赤 → 緑 → リファクタリングのフロントエンド TDD ループ               | —                                                    |
-| `/fec-debug`          | フロントエンド問題の診断と修復：ビルド、ランタイム、UI、API 障害    | `debug-*.md`                                         |
-| `/fec-refactor-clean` | デッドコード、未使用 export、スタイル、依存関係を分類して安全に削除 | `refactor-clean-*.md`                                |
+| コマンド              | 用途                                                                   | レポート                                             |
+| --------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------- |
+| `/fec-init`           | プロジェクトテンプレート（CLAUDE.md、ルール、設定）を初期化            | —                                                    |
+| `/fec-review`         | 指定または最近変更したファイルの構造化レビュー                         | `code-review-*.md`                                   |
+| `/fec-scaffold`       | 規約に従い page / feature / component のボイラープレートを作成         | —                                                    |
+| `/fec-plan`           | 統合計画：実装アーキテクチャまたはテスト戦略                           | `architecture-proposal-*.md` または `test-plan-*.md` |
+| `/fec-tdd`            | 赤 → 緑 → リファクタリングのフロントエンド TDD ループ                  | —                                                    |
+| `/fec-debug`          | フロントエンド問題の診断と修復：ビルド、ランタイム、UI、API 障害       | `debug-*.md`                                         |
+| `/fec-refactor-clean` | デッドコード、未使用 export、スタイル、依存関係を分類して安全に削除    | `refactor-clean-*.md`                                |
 | `/fec-doc-sync`       | README、docs、環境変数、スクリプト、API/ルート説明、デプロイ文書を同期 | —                                                    |
 ### スキル（自動起動）
@@ -179,30 +179,31 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 **プロジェクト標準** — 該当フレームワークが検出されると自動適用：
-| スキル                          | 範囲                                                                    |
-| ------------------------------- | ----------------------------------------------------------------------- |
-| `fec-react-project-standard`    | React + TypeScript（構造、コンポーネント、ルーティング、状態、API 層）  |
-| `fec-vue3-project-standard`     | Vue 3 + TypeScript（構造、コンポーネント、ルーティング、Pinia、API 層） |
-| `fec-nextjs-project-standard`   | Next.js 14+ App Router、SSR/SSG、ストリーミング、メタデータ             |
-| `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG、Composition API、データ取得、ミドルウェア               |
-| `fec-vite-project-standard`     | Vite 設定、環境変数安全性、HMR、開発プロキシ、ビルド最適化              |
-| `fec-monorepo-project-standard` | pnpm workspace、Turborepo、Nx の構造とタスクオーケストレーション        |
+| スキル                            | 範囲                                                                    |
+| --------------------------------- | ----------------------------------------------------------------------- |
+| `fec-react-project-standard`      | React + TypeScript（構造、コンポーネント、ルーティング、状態、API 層）  |
+| `fec-vue3-project-standard`       | Vue 3 + TypeScript（構造、コンポーネント、ルーティング、Pinia、API 層） |
+| `fec-nextjs-project-standard`     | Next.js 14+ App Router、SSR/SSG、ストリーミング、メタデータ             |
+| `fec-nuxt-project-standard`       | Nuxt 3 SSR/SSG、Composition API、データ取得、ミドルウェア               |
+| `fec-vite-project-standard`       | Vite 設定、環境変数安全性、HMR、開発プロキシ、ビルド最適化              |
+| `fec-monorepo-project-standard`   | pnpm workspace、Turborepo、Nx の構造とタスクオーケストレーション        |
+| `fec-typescript-project-standard` | TypeScript 設定、公開 API 型、宣言ファイル、DTO、ジェネリクス           |
 **実装機能** — 特定のフロントエンド機能を構築する際に起動：
-| スキル                    | 範囲                                                                         |
-| ------------------------- | ---------------------------------------------------------------------------- |
-| `fec-data-fetching`       | サーバー状態取得、キャッシュ、無効化、SSR、無限読み込み                      |
-| `fec-api-integration`     | 型付き API client、認証 refresh、アップロード、リアルタイム統合              |
-| `fec-state-management`    | 状態の所属、ストア選定、URL 状態、サーバー/フォーム/ローカル状態の境界       |
+| スキル                    | 範囲                                                                                    |
+| ------------------------- | --------------------------------------------------------------------------------------- |
+| `fec-data-fetching`       | サーバー状態取得、キャッシュ、無効化、SSR、無限読み込み                                 |
+| `fec-api-integration`     | 型付き API client、認証 refresh、アップロード、リアルタイム統合                         |
+| `fec-state-management`    | 状態の所属、ストア選定、URL 状態、サーバー/フォーム/ローカル状態の境界                  |
 | `fec-form-handling`       | フレームワークに応じたフォーム選定、schema バリデーション、動的フィールド、アップロード |
-| `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies の選定                   |
-| `fec-route-protection`    | React Router、Next.js、Vue Router、Nuxt の認証・権限ルーティング             |
-| `fec-pwa-implementation`  | マニフェスト、サービスワーカー、オフラインキャッシュ、インストールプロンプト |
-| `fec-web-workers`         | Web Worker、Transferable、Comlink、ワーカープール                            |
-| `fec-canvas-threejs`      | Canvas 2D、Three.js、React Three Fiber、WebGL                                |
-| `fec-svg-animation`       | CSS / Framer Motion / GSAP SVG アニメーションと reduced-motion               |
-| `fec-list-virtualization` | フレームワークに応じた大規模リスト仮想化、計測、グリッド、無限スクロール     |
+| `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies の選定                              |
+| `fec-route-protection`    | React Router、Next.js、Vue Router、Nuxt の認証・権限ルーティング                        |
+| `fec-pwa-implementation`  | マニフェスト、サービスワーカー、オフラインキャッシュ、インストールプロンプト            |
+| `fec-web-workers`         | Web Worker、Transferable、Comlink、ワーカープール                                       |
+| `fec-canvas-threejs`      | Canvas 2D、Three.js、React Three Fiber、WebGL                                           |
+| `fec-svg-animation`       | CSS / Framer Motion / GSAP SVG アニメーションと reduced-motion                          |
+| `fec-list-virtualization` | フレームワークに応じた大規模リスト仮想化、計測、グリッド、無限スクロール                |
 **テスト** — フロントエンドテストの計画や作成時に起動：
@@ -219,7 +220,6 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 | ------------------------------ | ----------------------------------------------------------------------------- |
 | `fec-code-review`              | アーキテクチャ、型、レンダリング、スタイル、a11y レビュー                     |
 | `fec-debug-framework`          | ビルド、ランタイム、UI、API/データ障害の体系的な診断                          |
-| `fec-typescript-type-safety`   | 型契約、DTO マッピング、型ガード、ジェネリクス、型レベルチェック              |
 | `fec-security-review`          | XSS、CSRF、機密データ漏洩、入力検証                                           |
 | `fec-accessibility-check`      | WCAG 2.2、キーボード、フォーカス、タッチ、スクリーンリーダー動作              |
 | `fec-dependency-upgrade`       | 依存関係アップグレード、lockfile レビュー、CVE 修正、移行検証                 |
@@ -229,34 +229,38 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 **デザイン UI** — デザイン実装、デザインシステム、視覚仕上げで起動：
-| スキル                        | 範囲                                                                          |
-| ----------------------------- | ----------------------------------------------------------------------------- |
-| `fec-ui-design`               | UI 方向性、ビジュアル識別、ポリッシュ、状態、ビジュアル QA                    |
-| `fec-tailwind-design-system`  | Tailwind token、テーマ拡張、variants、class 管理、ダークモード                |
-| `fec-responsive-layout`       | モバイルファースト、container queries、データ密集 responsive UI               |
-| `fec-motion-interaction`      | インタラクション motion、ページ遷移、スクロール animation、reduced-motion     |
-| `fec-implement-from-design`   | Figma/Sketch/MasterGo/Pixso/墨刀 のデザイン、または摹客アセットから UI を実装 |
-| `fec-storybook-component-doc` | Storybook コンポーネント文書、デザインシステム表示、隔離状態プレビュー        |
+| スキル                        | 範囲                                                                                                             |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `fec-ui-design`               | プロダクト文脈に沿った UI 方向性、反テンプレート設計ダイヤル、メディア戦略、状態、ビジュアル QA                  |
+| `fec-image-generation`        | システムブループリント、プロセスワークフロー、インタラクティブなライブ図、HTML/SVG/PNG エクスポート、画像生成/編集、ビジュアルアセット、PNG QA |
+| `fec-drawio-studio`           | 編集可能な draw.io / diagrams.net 技術図、XML/Mermaid/CSV URL 受け渡し、shape 検索、自動レイアウト、コード構造図 |
+| `fec-web-video-presentation`  | 記事、台本、レッスン、demo から録画可能な 16:9 step-driven Web プレゼンを作成                                    |
+| `fec-tailwind-design-system`  | Tailwind token、テーマ拡張、variants、class 管理、ダークモード                                                   |
+| `fec-responsive-layout`       | モバイルファースト、container queries、データ密集 responsive UI                                                  |
+| `fec-motion-interaction`      | 文脈に応じた motion 強度、ページ遷移、スクロール animation、reduced-motion                                       |
+| `fec-implement-from-design`   | デザインツール、スクリーンショット、または section 単位のビジュアル参照から UI を実装                            |
+| `fec-storybook-component-doc` | Storybook コンポーネント文書、デザインシステム表示、隔離状態プレビュー                                           |
 **レガシー移行** — モダナイゼーション時に起動：
-| スキル                           | 範囲                                                           |
-| -------------------------------- | -------------------------------------------------------------- |
-| `fec-legacy-web-standard`        | JS + jQuery + HTML のレガシープロジェクト開発・保守基準        |
+| スキル                           | 範囲                                                                           |
+| -------------------------------- | ------------------------------------------------------------------------------ |
+| `fec-legacy-web-standard`        | JS + jQuery + HTML のレガシープロジェクト開発・保守基準                        |
 | `fec-legacy-to-modern-migration` | レガシーフロントエンドのモダナイズ、ターゲットスタック選定、段階的ワークフロー |
 **プロジェクト進化** — 参照システムをプロジェクトネイティブな改善として吸収する時に起動：
-| スキル        | 範囲                                                               |
-| ------------- | ------------------------------------------------------------------ |
+| スキル        | 範囲                                                           |
+| ------------- | -------------------------------------------------------------- |
 | `fec-alchemy` | 参照システムの能力を独自のプロジェクトネイティブ設計として吸収 |
 **ドキュメント保守** — ドキュメント作業時に起動：
-| スキル                          | 範囲                                                               |
-| ------------------------------- | ------------------------------------------------------------------ |
-| `fec-doc-sync`                  | フロントエンド文書をコード、設定、スクリプト、ルート、API、環境変数、デプロイ事実と同期 |
-| `fec-source-driven-development` | プロジェクト事実と公式ソースでバージョン依存の判断を検証           |
+| スキル                             | 範囲                                                                                    |
+| ---------------------------------- | --------------------------------------------------------------------------------------- |
+| `fec-backend-requirements-handoff` | Frontend-to-backend handoff for UI data needs, actions, states, rules, and questions    |
+| `fec-doc-sync`                     | フロントエンド文書をコード、設定、スクリプト、ルート、API、環境変数、デプロイ事実と同期 |
+| `fec-source-driven-development`    | プロジェクト事実と公式ソースでバージョン依存の判断を検証                                |
 ### エージェント
@@ -457,10 +461,10 @@ npx skills update                          # 最新版にアップデート
 npx skills check                           # 利用可能なアップデートをプレビュー
 ```
-| CLI                  | インストール内容                                                              |
-| -------------------- | ----------------------------------------------------------------------------- |
+| CLI                              | インストール内容                                                              |
+| -------------------------------- | ----------------------------------------------------------------------------- |
 | `npx @bovinphang/frontend-craft` | スキル + ランタイム固有のエージェント、コマンド、フック、ルール、テンプレート |
-| `npx skills`         | スキルのみ（既存の Skills CLI ワークフロー向け）                              |
+| `npx skills`                     | スキルのみ（既存の Skills CLI ワークフロー向け）                              |
 テレメトリを無効化：`DISABLE_TELEMETRY=1`。詳細は [skills.sh CLI ドキュメント](https://skills.sh/docs/cli) を参照。