@bovinphang/frontend-craft 2.8.0 → 2.9.0

package/dist/hooks/fec-run-tests.js

@@ -1 +1,5 @@
-import{existsSync as i,readFileSync as n}from"node:fs";import{execSync as o}from"node:child_process";try{let e=function(t){if(c[t])try{o(`${s} run ${t}`,{stdio:["ignore","pipe","pipe"],timeout:12e4})}catch{r=!0}};a=e,process.stdin.resume(),process.stdin.on("data",()=>{}),i("package.json")||process.exit(0);let p=process.env.FRONTEND_CRAFT_VALIDATION_MODE==="blocking",r=!1,c={};try{c=JSON.parse(n("package.json","utf-8")).scripts??{}}catch{process.exit(0)}let s="npm";i("pnpm-lock.yaml")?s="pnpm":i("yarn.lock")&&(s="yarn"),e("lint"),c["type-check"]?e("type-check"):e("typecheck"),e("test"),e("build"),p&&r&&process.exit(1)}catch{process.env.FRONTEND_CRAFT_VALIDATION_MODE==="blocking"&&process.exit(1)}var a;process.exit(0);
+import{existsSync as f,readFileSync as k}from"node:fs";import{execSync as y}from"node:child_process";import{existsSync as d}from"node:fs";function g(n){let e=n?.match(/^(npm|pnpm|yarn|bun)@/i)?.[1]?.toLowerCase();if(e==="npm"||e==="pnpm"||e==="yarn"||e==="bun")return e;let a=[["pnpm-lock.yaml","pnpm"],["yarn.lock","yarn"],["bun.lock","bun"],["bun.lockb","bun"],["package-lock.json","npm"]],t=new Set(a.filter(([c])=>d(c)).map(([,c])=>c));return t.size===1?[...t][0]:"npm"}process.stdin.resume();process.stdin.on("data",()=>{});f("package.json")||process.exit(0);var l=process.env.FRONTEND_CRAFT_VALIDATION_MODE==="blocking",o=!1;try{let n=JSON.parse(k("package.json","utf8")),e=n.scripts??{},a=g(n.packageManager),t=["lint",e["type-check"]?"type-check":"typecheck","test","build"],c=t.filter(s=>e[s]&&!t.some(r=>r!==s&&u(e,r,s)));for(let s of c)try{y(`${a} run ${s}`,{stdio:["ignore","pipe","pipe"],timeout:12e4})}catch(r){o=!0;let i=r,p=[i.stderr,i.stdout,i.message].map(m=>String(m??"").trim()).find(Boolean);process.stderr.write(`[frontend-craft] ${s} failed${p?`:
+${p.slice(-2e3)}`:"."}
+`)}o&&process.stderr.write(`[frontend-craft] Validation failed (${l?"blocking":"advisory"} mode).
+`)}catch(n){o=!0,process.stderr.write(`[frontend-craft] Validation could not run: ${n instanceof Error?n.message:String(n)}
+`)}process.exit(l&&o?1:0);function u(n,e,a,t=new Set){return!n[e]||t.has(e)?!1:(t.add(e),[...n[e].replace(/"(?:\\.|[^"\\])*"|'[^']*'/g," ").matchAll(/(?:^|&&|;|\|\|)\s*(?:npm|pnpm|yarn|bun)\s+(?:run\s+)?([a-z][\w:-]*)\b/gi)].map(r=>r[1]).some(r=>r===a||u(n,r,a,t)))}

package/dist/hooks/fec-session-start.js

@@ -1 +1 @@
-import{existsSync as a,readFileSync as c}from"node:fs";process.stdin.resume();process.stdin.on("data",()=>{});a("package.json")||process.exit(0);var r="unknown";try{let t=JSON.parse(c("package.json","utf-8")),e={...t.dependencies,...t.devDependencies},n=[];(e.vue||e.nuxt)&&n.push("Vue "+(e.vue||e.nuxt)),(e.react||e.next)&&n.push("React "+(e.react||e.next)),e["@angular/core"]&&n.push("Angular "+e["@angular/core"]),r=n.join(", ")||"unknown"}catch{}var s="npm";a("pnpm-lock.yaml")?s="pnpm":a("yarn.lock")?s="yarn":a("bun.lockb")&&(s="bun");r!=="unknown"&&process.stdout.write(`[frontend-craft] Framework: ${r} | Package manager: ${s}`);process.exit(0);
+import{existsSync as i,readFileSync as u}from"node:fs";import{existsSync as p}from"node:fs";function o(a){let n=a?.match(/^(npm|pnpm|yarn|bun)@/i)?.[1]?.toLowerCase();if(n==="npm"||n==="pnpm"||n==="yarn"||n==="bun")return n;let e=[["pnpm-lock.yaml","pnpm"],["yarn.lock","yarn"],["bun.lock","bun"],["bun.lockb","bun"],["package-lock.json","npm"]],c=new Set(e.filter(([r])=>p(r)).map(([,r])=>r));return c.size===1?[...c][0]:"npm"}process.stdin.resume();process.stdin.on("data",()=>{});i("package.json")||process.exit(0);var t="unknown",s;try{let a=JSON.parse(u("package.json","utf-8"));s=a.packageManager;let n={...a.dependencies,...a.devDependencies},e=[];(n.vue||n.nuxt)&&e.push("Vue "+(n.vue||n.nuxt)),(n.react||n.next)&&e.push("React "+(n.react||n.next)),n["@angular/core"]&&e.push("Angular "+n["@angular/core"]),t=e.join(", ")||"unknown"}catch{}var g=o(s);t!=="unknown"&&process.stdout.write(`[frontend-craft] Framework: ${t} | Package manager: ${g}`);process.exit(0);

package/docs/example-prompts.md

@@ -1,140 +1,157 @@
-# Example Prompts
-
-Use these prompts after installing `frontend-craft` in any supported runtime. You do not need to memorize internal skill, command, or agent names; describe the outcome you want and include useful context such as file paths, framework, failing commands, design links, or acceptance criteria.
-
-Each example follows the same shape:
-
-- **Scenario**: when to use it.
-- **Prompt**: text you can paste or adapt.
-- **Best for**: the `frontend-craft` capability most likely to help.
-- **Expected output**: what the assistant should produce.
-- **Notes**: extra context that improves the result.
-
-## Getting Started
-
-| 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."                          | 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.                   |
-
-## 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."              | 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."                                      | 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."                                                                               | 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."                                                                      | 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."              | 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."                                                   | 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
-
-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."                                               | 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.                       |
+# Example Prompts
+
+Use these prompts after installing `frontend-craft` in any supported runtime. You do not need to memorize internal skill, command, or agent names; describe the outcome you want and include useful context such as file paths, framework, failing commands, design links, or acceptance criteria.
+
+Each example follows the same shape:
+
+- **Scenario**: when to use it.
+- **Prompt**: text you can paste or adapt.
+- **Best for**: the `frontend-craft` capability most likely to help.
+- **Expected output**: what the assistant should produce.
+- **Notes**: extra context that improves the result.
+
+## Getting Started
+
+| 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."                          | 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.                   |
+
+## Review And Quality
+
+| Scenario              | Prompt                                                                                                                                                                      | Best for                                                    | Expected output                                                                                   | Notes                                                                            |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| Default project review | "`/fec-review`" | cmd: `/fec-review` | Project risk assessment with coverage, exclusions and remaining modules. | Defaults to full project review even when Git changes exist. |
+| 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 the changes in this PR. Call out blockers, risky assumptions, and what must be tested before merge." | agent: `fec-code-reviewer` | Merge readiness assessment and structured report. | Provide the PR link or explicit diff range. |
+| Review a specified file | "Review `src/components/Button.tsx`, including unchanged code. Report only; do not fix." | cmd: `/fec-review` · skill: `fec-code-review` | File risk assessment and coverage. | No Git diff required. |
+| Review a directory | "Review all existing frontend code in `src/features/checkout/`, including unchanged code." | agent: `fec-code-reviewer` | Directory risk assessment and unreviewed inventory. | Explicit scope overrides the default project mode. |
+| Review the entire project | "Review all project-owned frontend code, related tests, configuration and dependency declarations. Inventory first, review by module, record exclusions and unreviewed scope, and mark incomplete coverage partial. Report only; do not fix." | skill: `fec-code-review` · cmd: `/fec-review` | Project risk assessment and coverage inventory. | Works without changes; does not replace backend audit. |
+| 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."                                      | 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."                                                                               | 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."                                                                      | 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."              | 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.                          |
+
+## Refactoring
+
+| Scenario | Prompt | Best for | Expected output | Notes |
+| --- | --- | --- | --- | --- |
+| Smell diagnosis only | "Use `/fec-smell` on `src/features/compose/`. Show evidence, confidence, false-positive checks, and candidate techniques; do not edit business code." | cmd: `/fec-smell` · skill: `fec-code-smells` | Prioritized smell report. | Use when you want diagnosis before committing to a change. |
+| Refactoring plan only | "Use `/fec-refactor-plan` to turn the current compose-module smells into ordered, small, behavior-preserving steps with risk, diff budget, validation, and rollback boundaries." | cmd: `/fec-refactor-plan` · skill: `fec-refactoring` | Refactoring plan. | Plan-only; no source edits. |
+| Behavior-preserving execution | "Use `/fec-refactor` on this validation/request/state function. Keep observable behavior unchanged, apply one main transformation at a time, verify each step, and revert before repairing a regression." | cmd: `/fec-refactor` · agent: `fec-refactoring-expert` | Validated refactoring plus report. | Pure refactoring uses GREEN → REFACTOR → GREEN. |
+
+## 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."                                                   | 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
+
+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."                                               | 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` to review existing code in `src/features/payments/`, including unchanged code, then summarize blockers first." | agent: `fec-code-reviewer` | Targeted risk assessment and specialist report. | No Git diff required. |
+
+
+Technical diagram quality: `fec-image-generation` prefers local Mermaid for standard sequence/workflow diagrams and the draw.io workflow for editable architecture, with JSON/HTML fallback when tools are unavailable. Export a browser-measured manifest scaled to the PNG, run QA and inspect the final image. Preserve complete text, explicit layout and relationships; repair the source for at most two automatic rounds and report unresolved issues. Reproducible fixtures are in `skills/fec-image-generation/assets/quality-examples/`.
+
+[Review scope and technical diagram delivery](review-and-diagram-workflows.md) — scope, tool prerequisites, export commands, and QA limits.