@bovinphang/frontend-craft 2.5.0 → 2.7.0

package/README.md

@@ -8,7 +8,7 @@
 
 [![Stars](https://img.shields.io/github/stars/bovinphang/frontend-craft?style=flat)](https://github.com/bovinphang/frontend-craft/stargazers)
 [![CI](https://github.com/bovinphang/frontend-craft/actions/workflows/ci.yml/badge.svg)](https://github.com/bovinphang/frontend-craft/actions/workflows/ci.yml)
-[![npm version](https://img.shields.io/npm/v/frontend-craft)](https://www.npmjs.com/package/frontend-craft)
+[![npm version](https://img.shields.io/npm/v/@bovinphang/frontend-craft)](https://www.npmjs.com/package/@bovinphang/frontend-craft)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 ![Node](https://img.shields.io/badge/Node.js-22+-5FA04E?logo=node.js&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?logo=typescript&logoColor=white)
@@ -32,7 +32,7 @@
 
 Per-runtime paths and caveats live in [`docs/runtimes/`](docs/runtimes/).
 
-It bundles **13 specialized agents**, **40 auto-activated skills**, **8 slash commands**, **5 event-driven hooks**, **MCP integrations** for 6 design-tool endpoints, and a complete **rules library** into a single installable package. Run one command, and every AI session on your team writes React, Vue, Next.js, or Nuxt the same way — typed, accessible, secure, and consistent.
+It bundles **13 specialized agents**, **45 auto-activated skills**, **8 slash commands**, **5 event-driven hooks**, **MCP integrations** for 6 design-tool endpoints, and a complete **rules library** into a single installable package. Run one command, and every AI session on your team writes React, Vue, Next.js, or Nuxt the same way — typed, accessible, secure, and consistent.
 
 ---
 
@@ -40,7 +40,7 @@ It bundles **13 specialized agents**, **40 auto-activated skills**, **8 slash co
 
 | Problem                                                              | What frontend-craft does                                                                       |
 | -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| AI assistants write inconsistent, untyped, or insecure frontend code | **40 skills** encode team standards — auto-activated when the assistant touches matching files |
+| AI assistants write inconsistent, untyped, or insecure frontend code | **45 skills** encode team standards — auto-activated when the assistant touches matching files |
 | Each AI tool has its own plugin format                               | **One CLI** installs the same rules, agents, and hooks into 15 runtimes                        |
 | Design-to-code handoff is lossy                                      | **MCP integrations** bring in richer context from Figma, Figma Desktop, Sketch, MasterGo, Pixso, and 墨刀 |
 | Reviews are ad-hoc and shallow                                       | **13 agents** produce graded reports: code, security, a11y, performance, TS, UI fidelity       |
@@ -53,45 +53,59 @@ It bundles **13 specialized agents**, **40 auto-activated skills**, **8 slash co
 
 Requires **Node.js 22+**. Works on **Windows, macOS, and Linux**.
 
-### Option 1 - Global CLI project init (recommended)
+### Option 1 - Install the fec CLI globally (recommended)
 
 ```bash
-npm install -g frontend-craft@latest
+# 1. Install the fec command globally
+npm install -g @bovinphang/frontend-craft@latest
+
+# 2. Go to your frontend project
 cd your-project
-fec init
-fec init codex      # initialize for a specific runtime
-fec init claude     # initialize for Claude Code
-```
 
-`fec init` is the terminal CLI command for initializing the current project. In an interactive terminal, omit the runtime to choose one from the prompt; in non-interactive terminals, the CLI defaults to `claude` when no runtime is specified. `init` installs locally by default unless you explicitly pass `--global`, for example `fec init codex --global`. The in-assistant `/fec-init` slash command is separate and runs after frontend-craft is installed in your AI runtime.
+# 3. Choose the AI runtime(s) interactively
+fec setup
 
-### Option 2 — No-global interactive wizard
+# 4. Connect the current project
+fec setup codex
+fec setup claude
+fec setup all
 
-```bash
-npx frontend-craft@latest
+# 5. Connect globally, available across all projects
+fec setup codex --global
+fec setup claude --global
+fec setup all --global
+
+# 6. Preview / query
+fec install --all --dry-run --global
+fec list
 ```
 
-Use this when you do not want to install a global `fec` command. The wizard walks through the full install flow: choose one or more runtimes, then choose whether to install globally or into the current project.
+`npm install -g` only installs the `fec` terminal command. `fec setup` is the terminal CLI command for connecting frontend-craft to a project; it is not the in-assistant `/fec-init` slash command. In an interactive terminal, running only `fec setup` asks you to choose runtimes. `fec setup <runtime>` and `fec setup all` connect frontend-craft to the current project by default. Only pass `--global` when you want to connect frontend-craft to the selected AI tool's global config directory so it is available across projects.
 
-### Option 3 — Scripted install
+### Option 2 — Temporary npx run (no global fec command)
 
 ```bash
-# Install into the current project
-npx frontend-craft@latest install --local claude
-
-# Install globally for a runtime
-npx frontend-craft@latest install --global codex
-
-# Preview what would be installed across all runtimes
-npx frontend-craft@latest install --all --dry-run --global
-
-# List available runtimes
-npx frontend-craft@latest list
+# 1. Interactive wizard
+npx @bovinphang/frontend-craft@latest
+
+# 2. Connect the current project
+npx @bovinphang/frontend-craft@latest install --local codex
+npx @bovinphang/frontend-craft@latest install --local claude
+npx @bovinphang/frontend-craft@latest install --all --local
+
+# 3. Connect globally, available across all projects
+npx @bovinphang/frontend-craft@latest install --global codex
+npx @bovinphang/frontend-craft@latest install --global claude
+npx @bovinphang/frontend-craft@latest install --all --global
+
+# 4. Preview / query
+npx @bovinphang/frontend-craft@latest install --all --dry-run --global
+npx @bovinphang/frontend-craft@latest list
 ```
 
-> **CI / scripts:** always pass `--global` / `-g` or `--local` / `-l`. Without a TTY, the CLI defaults to `claude --global` if neither is set.
+Use `npx` when you do not want to install a global `fec` command. Without arguments, it opens the interactive wizard: choose one or more runtimes, then choose whether to connect globally or into the current project. For scripted all-runtime installs, use `install --all --local` or `install --all --global`; do not write `install all`. For CI / scripts, always pass `--global` / `-g` or `--local` / `-l`; in non-TTY environments without an explicit location, the CLI defaults to `claude --global`.
 
-### Option 4 — Claude Code Marketplace
+### Option 3 — Claude Code Marketplace
 
 For Claude Code users, **Claude Code Marketplace** is the preferred single-source install. Use the CLI for Claude only when you need cross-runtime installs, scripted/offline file copies, or non-Marketplace environments.
 
@@ -133,7 +147,7 @@ For a complete scenario-based prompt library, see [docs/example-prompts.md](docs
 ```text
 You: "Review my recent changes before merge. Focus on architecture, type safety, rendering behavior, styles, accessibility, and missing tests."
 You: "Before coding, plan the account billing feature: route structure, component boundaries, data flow, state ownership, validation flow, and rollout risks."
-You: "Build a multi-step registration form with React Hook Form + Zod, file upload, conditional fields, async validation, and accessible errors."
+You: "Build a multi-step registration form; choose the right form and schema validation approach for this project, with file upload, conditional fields, async validation, and accessible errors."
 You: "Implement the UI from Figma node 123:456. Use existing design tokens and components, match spacing and responsive states, and document assumptions."
 You: "`/fec-refactor-clean` Clean up dead code in this module."
 ```
@@ -155,13 +169,13 @@ Slash commands are the primary entry points for structured workflows. Most produ
 | `/fec-tdd`            | Red → green → refactor loop for frontend TDD                           | —                                                |
 | `/fec-debug`          | Diagnose and fix frontend issues: build, runtime, UI, and API failures | `debug-*.md`                                     |
 | `/fec-refactor-clean` | Classify and safely remove dead code, unused exports, styles, and deps | `refactor-clean-*.md`                            |
-| `/fec-doc-sync`       | Sync READMEs, runtime docs, capability tables, and metadata            | —                                                |
+| `/fec-doc-sync`       | Sync READMEs, docs, env notes, scripts, API/route notes, and deploy docs | —                                                |
 
 ### Skills (auto-activated)
 
 Skills are workflow definitions that activate automatically based on file patterns, frameworks, or task context. They encode review dimensions, output conventions, and report formats.
 
-The skills below are grouped by use case so you can quickly find project standards, implementation, testing, review, design, migration, and documentation workflows.
+The skills below are grouped by use case so you can quickly find project standards, implementation, testing, review, design, migration, project evolution, and documentation workflows.
 
 **Project standards** — conventions enforced whenever matching frameworks are detected:
 
@@ -173,22 +187,23 @@ The skills below are grouped by use case so you can quickly find project standar
 | `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG, composables, data fetching, middleware                |
 | `fec-vite-project-standard`     | Vite config, env safety, HMR, dev proxy, build optimization           |
 | `fec-monorepo-project-standard` | pnpm workspace, Turborepo, Nx structure and task orchestration        |
+| `fec-typescript-project-standard`   | TypeScript config, public API types, declarations, DTOs, generics             |
 
 **Implementation capabilities** — activated when building specific frontend behavior:
 
 | Skill                     | Scope                                                                     |
 | ------------------------- | ------------------------------------------------------------------------- |
-| `fec-data-fetching`       | TanStack Query / server-state fetching, caching, optimistic updates       |
+| `fec-data-fetching`       | Server-state fetching, caching, invalidation, SSR, infinite loading       |
 | `fec-api-integration`     | Typed API clients, auth refresh, uploads, realtime integration            |
 | `fec-state-management`    | State ownership, store selection, URL state, server/form/local boundaries |
-| `fec-form-handling`       | React Hook Form + Zod, dynamic fields, uploads, multi-step flows          |
+| `fec-form-handling`       | Framework-aware forms, schema validation, dynamic fields, uploads         |
 | `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies selection             |
 | `fec-route-protection`    | Auth and permission routes for React Router, Next.js, Vue Router, Nuxt    |
 | `fec-pwa-implementation`  | Manifest, service worker, offline cache, install prompts                  |
 | `fec-web-workers`         | Web Worker integration, transferables, Comlink, worker pools              |
 | `fec-canvas-threejs`      | Canvas 2D, Three.js, React Three Fiber, WebGL                             |
 | `fec-svg-animation`       | CSS / Framer Motion / GSAP SVG animation with reduced-motion              |
-| `fec-list-virtualization` | react-window / TanStack Virtual with measurement strategies               |
+| `fec-list-virtualization` | Framework-aware list virtualization, measurement, grids, infinite scroll  |
 
 **Testing** — activated when planning or authoring frontend test coverage:
 
@@ -204,7 +219,7 @@ The skills below are grouped by use case so you can quickly find project standar
 | Skill                          | Scope                                                                         |
 | ------------------------------ | ----------------------------------------------------------------------------- |
 | `fec-code-review`              | Architecture, types, rendering, styles, a11y review                           |
-| `fec-typescript-type-safety`   | Type contracts, DTO mapping, type guards, generics, type-level checks         |
+| `fec-debug-framework`          | Systematic diagnostics for build, runtime, UI, and API/data failures          |
 | `fec-security-review`          | XSS, CSRF, sensitive data leakage, input validation                           |
 | `fec-accessibility-check`      | WCAG 2.2, keyboard, focus, touch, and screen-reader behavior                  |
 | `fec-dependency-upgrade`       | Dependency upgrades, lockfile review, CVE remediation, migration verification |
@@ -216,11 +231,14 @@ The skills below are grouped by use case so you can quickly find project standar
 
 | Skill                         | Scope                                                                         |
 | ----------------------------- | ----------------------------------------------------------------------------- |
-| `fec-ui-design`               | UI direction, visual identity, polish, states, visual QA                      |
+| `fec-ui-design`               | Product-context UI direction, anti-generic design dials, media strategy, states, visual QA |
+| `fec-image-generation`        | Diagrams, image generation/editing, visual assets, PNG QA and repair loops     |
+| `fec-drawio-studio`         | Editable draw.io / diagrams.net technical diagrams, XML/Mermaid/CSV URL handoff, shape lookup, auto-layout, code maps |
+| `fec-web-video-presentation` | Recordable 16:9 step-driven web presentations from articles, scripts, lessons, and demos |
 | `fec-tailwind-design-system`  | Tailwind tokens, theme extension, variants, class governance, dark mode       |
 | `fec-responsive-layout`       | Mobile-first layouts, container queries, data-dense responsive UI             |
-| `fec-motion-interaction`      | Interaction motion, page transitions, scroll animation, reduced motion        |
-| `fec-implement-from-design`   | Build UI from Figma/Sketch/MasterGo/Pixso/墨刀 design files, or 摹客 assets   |
+| `fec-motion-interaction`      | Context-aware motion intensity, page transitions, scroll animation, reduced motion |
+| `fec-implement-from-design`   | Build UI from design tools, screenshots, or section-level visual references   |
 | `fec-storybook-component-doc` | Storybook component docs, design-system presentation, isolated state previews |
 
 **Legacy migration** — activated during modernization work:
@@ -228,13 +246,20 @@ The skills below are grouped by use case so you can quickly find project standar
 | Skill                            | Scope                                                      |
 | -------------------------------- | ---------------------------------------------------------- |
 | `fec-legacy-web-standard`        | Standards for JS + jQuery + HTML maintenance               |
-| `fec-legacy-to-modern-migration` | jQuery/MPA → React/Vue 3 + TS strategy and phased workflow |
+| `fec-legacy-to-modern-migration` | Legacy frontend modernization, target-stack selection, phased workflow |
+
+**Project evolution** — activated when absorbing reference systems into project-native improvements:
+
+| Skill         | Scope                                                                  |
+| ------------- | ---------------------------------------------------------------------- |
+| `fec-alchemy` | Absorb reference system ideas through original, project-native redesign |
 
 **Maintenance docs** — activated during documentation upkeep:
 
 | Skill                           | Scope                                                                                  |
 | ------------------------------- | -------------------------------------------------------------------------------------- |
-| `fec-doc-sync`                  | Keep public docs in sync with scripts, skills, agents, commands                        |
+| `fec-backend-requirements-handoff` | Frontend-to-backend handoff for UI data needs, actions, states, rules, and questions |
+| `fec-doc-sync`                  | Keep frontend docs in sync with code, config, scripts, routes, APIs, env, and deploy facts |
 | `fec-source-driven-development` | Verify version-sensitive frontend decisions against project facts and official sources |
 
 ### Agents
@@ -365,11 +390,12 @@ $env:MODAO_TOKEN = "your-modao-token"
 Every review, analysis, and evaluation writes a timestamped Markdown report to `reports/`. These serve as an audit trail and a handoff artifact for PRs.
 
 <details>
-<summary>Click to see all 15 report types</summary>
+<summary>Click to see all 16 report types</summary>
 
 | Report type            | Filename pattern                             | Produced by                                                         |
 | ---------------------- | -------------------------------------------- | ------------------------------------------------------------------- |
 | Code review            | `code-review-YYYY-MM-DD-HHmmss.md`           | `/fec-review`, `fec-code-review`, `fec-code-reviewer`               |
+| Debug diagnostics      | `debug-YYYY-MM-DD-HHmmss.md`                 | `/fec-debug`, `fec-debug-framework`, `fec-debugger`                 |
 | TypeScript / JS review | `typescript-review-YYYY-MM-DD-HHmmss.md`     | `fec-typescript-reviewer`                                           |
 | Security review        | `security-review-YYYY-MM-DD-HHmmss.md`       | `fec-security-review`, `fec-security-reviewer`                      |
 | Accessibility          | `accessibility-review-YYYY-MM-DD-HHmmss.md`  | `fec-accessibility-check`                                           |
@@ -393,7 +419,7 @@ Every review, analysis, and evaluation writes a timestamped Markdown report to `
 
 ## Update and Remove
 
-`fec` is the short command for `frontend-craft`. If you have not installed the global `fec` command, use the same arguments with `npx frontend-craft@latest`, for example `npx frontend-craft@latest update`.
+`fec` is the short command for `frontend-craft`. If you have not installed the global `fec` command, use the same arguments with `npx @bovinphang/frontend-craft@latest`, for example `npx @bovinphang/frontend-craft@latest update`.
 
 ### Update
 
@@ -437,7 +463,7 @@ npx skills check                           # preview available updates
 
 | CLI                  | Installs                                                            |
 | -------------------- | ------------------------------------------------------------------- |
-| `npx frontend-craft` | Skills + runtime-specific agents, commands, hooks, rules, templates |
+| `npx @bovinphang/frontend-craft` | Skills + runtime-specific agents, commands, hooks, rules, templates |
 | `npx skills`         | Skills only (for existing Skills CLI workflows)                     |
 
 To disable telemetry: `DISABLE_TELEMETRY=1`. Details: [skills.sh CLI docs](https://skills.sh/docs/cli).

package/README.openclaw.md

@@ -143,31 +143,32 @@ frontend-craft/
 | `fec-accessibility-check`        | WCAG-oriented semantic structure, keyboard support, focus, labels                    |
 | `fec-react-project-standard`     | React + TypeScript project standards                                                 |
 | `fec-vue3-project-standard`      | Vue 3 + TypeScript project standards                                                 |
+| `fec-typescript-project-standard`     | TypeScript config, public API types, declarations, DTOs, and generics                |
 | `fec-implement-from-design`      | Implement UI from Figma, Sketch, MasterGo, Pixso, Modao, or screenshots              |
 | `fec-validation-fix`             | Run validation commands, diagnose failures, and fix safely                           |
 | `fec-legacy-web-standard`        | JavaScript + jQuery + HTML/CSS legacy frontend standards                             |
-| `fec-legacy-to-modern-migration` | jQuery / MPA migration strategy to React or Vue + TypeScript                         |
+| `fec-legacy-to-modern-migration` | Legacy frontend modernization, target-stack selection, and phased migration          |
 | `fec-testing-strategy`           | Testing layer selection, risk matrix, and coverage planning                          |
 | `fec-e2e-testing`                | Playwright / Cypress E2E structure, artifacts, CI, and flaky test handling           |
 | `fec-nextjs-project-standard`    | Next.js App Router, SSR/SSG, routing, metadata, middleware                           |
 | `fec-nuxt-project-standard`      | Nuxt 3 SSR/SSG, composables, routing, middleware                                     |
 | `fec-monorepo-project-standard`  | pnpm workspace, Turborepo, Nx structure and task orchestration                       |
-| `fec-data-fetching`              | TanStack Query / server-state fetching, caching, invalidation, optimistic updates    |
+| `fec-data-fetching`              | Server-state fetching, caching, invalidation, SSR, and infinite loading              |
 | `fec-state-management`           | State ownership, store selection, URL/server/form/local state boundaries             |
-| `fec-form-handling`              | React Hook Form + Zod forms, dynamic fields, uploads, multi-step flows               |
+| `fec-form-handling`              | Framework-aware forms, schema validation, dynamic fields, uploads, multi-step flows  |
 | `fec-tailwind-design-system`     | Tailwind tokens, theme extension, variants, class governance, dark mode              |
 | `fec-responsive-layout`          | Mobile-first layouts, container queries, data-dense responsive UI                    |
 | `fec-browser-storage`            | localStorage/sessionStorage/IndexedDB/Cookies selection and safe client persistence  |
 | `fec-route-protection`           | Authenticated and permissioned routes for React Router, Next.js, Vue Router, Nuxt    |
 | `fec-component-testing`          | React Testing Library / Vue Test Utils component tests and regression scenarios      |
 | `fec-storybook-component-doc`    | Storybook component docs, addons, MDX, interaction and visual test integration       |
-| `fec-list-virtualization`        | Large-list windowing with react-window / TanStack Virtual and measurement strategies |
+| `fec-list-virtualization`        | Framework-aware virtualization, item measurement, grids, and infinite scrolling      |
 | `fec-pwa-implementation`         | Manifest, service worker, offline cache, install prompts, update handling            |
 | `fec-web-workers`                | Web Worker integration, transferable objects, Comlink, worker pools                  |
 | `fec-canvas-threejs`             | Canvas 2D, Three.js, React Three Fiber, WebGL performance and accessibility          |
 | `fec-svg-animation`              | SVG animation with CSS, Framer Motion, GSAP, reduced-motion fallbacks                |
 | `fec-ui-design`                  | UI direction, visual identity, polish, states, visual QA                             |
-| `fec-typescript-type-safety`     | Type contracts, DTO mapping, type guards, generics, and type-level checks            |
+| `fec-web-video-presentation`     | Recordable 16:9 step-driven web presentations from articles, scripts, lessons, demos |
 | `fec-dependency-upgrade`         | Dependency upgrades, lockfile review, CVE remediation, migration verification        |
 | `fec-vite-project-standard`      | Vite config, env safety, HMR, dev proxy, build optimization, library mode            |
 
@@ -195,24 +196,25 @@ This section is a quick OpenClaw-oriented sample, not the full prompt catalog. F
 | Implement from Figma / screenshot          | `fec-implement-from-design`      | “Implement this screen from Figma node `123:456`: match spacing and design tokens, reuse our `Button`, and note any assumptions.”                |
 | CI red or local script failures            | `fec-validation-fix`             | “`pnpm lint` and `pnpm test` are failing—find the root causes, fix them, and don’t weaken types or skip checks.”                                 |
 | Maintain jQuery / MPA legacy pages         | `fec-legacy-web-standard`        | “For `public/js/legacy/*.js`, suggest safe refactors and patterns that keep current behavior; we still ship this in production.”                 |
-| Plan jQuery → React/Vue migration          | `fec-legacy-to-modern-migration` | “We have `static/app.js` in jQuery + MPA. Outline a phased migration to React + TypeScript with risks and milestones.”                           |
+| Plan legacy frontend modernization         | `fec-legacy-to-modern-migration` | “We have `static/app.js` in jQuery + MPA. Evaluate keeping the MPA, local modernization, or moving to our target stack with risks and milestones.” |
 | Plan frontend test coverage                | `fec-testing-strategy`           | “For this checkout refactor, map risks to static checks, unit/component tests, E2E, visual, a11y, and security coverage before we write tests.”  |
 | Add or stabilize E2E                       | `fec-e2e-testing`                | “Add a Playwright smoke test for login; use a clear folder layout and Page Objects, and mention how to run it in CI.”                            |
 | Next.js App Router feature                 | `fec-nextjs-project-standard`    | “Review `app/(dashboard)/reports/page.tsx` and related server actions for Next.js App Router best practices (data fetching, errors, metadata).”  |
 | Nuxt 3 feature or layout                   | `fec-nuxt-project-standard`      | “Review `pages/admin/*.vue` and `composables/useApi.ts` for Nuxt 3 SSR/data/composables conventions.”                                            |
 | Monorepo boundaries and tasks              | `fec-monorepo-project-standard`  | “`apps/web` depends on `packages/ui`—check package boundaries, workspace config, and Turborepo task graph for issues.”                           |
-| Server-state data fetching                 | `fec-data-fetching`              | “Review `src/queries/useReports.ts` for TanStack Query patterns: caching keys, invalidation, and optimistic updates.”                            |
+| Server-state data fetching                 | `fec-data-fetching`              | “Review `src/data/reports.ts` for server-state fetching, cache keys, invalidation, SSR hydration, and whether a query library is warranted.”       |
 | State ownership and store selection        | `fec-state-management`           | “Audit our dashboard state: decide what belongs in URL params, TanStack Query, local state, or the global store, then propose a safe migration.” |
-| Complex form with validation               | `fec-form-handling`              | “Build a multi-step registration form with Zod validation, file upload, and dynamic conditional fields using React Hook Form.”                   |
+| Complex form with validation               | `fec-form-handling`              | “Build a multi-step registration form; choose the project-appropriate form library and schema validation approach, with uploads and dynamic fields.” |
 | Add route guards to an app                 | `fec-route-protection`           | “Secure the `/admin` routes in our React Router app: redirect unauthenticated users and enforce role-based access.”                              |
 | Write component unit tests                 | `fec-component-testing`          | “Add RTL tests for `src/components/UserCard.tsx`: render, user-event interactions, and snapshot for regression.”                                 |
 | Document a component library               | `fec-storybook-component-doc`    | “Set up Storybook for `packages/ui/` with MDX docs, accessibility addon, and interaction tests.”                                                 |
-| Render thousands of list rows              | `fec-list-virtualization`        | “Our `ProductList` renders 10k items—virtualize it with react-window or TanStack Virtual and measure scroll performance.”                        |
+| Render thousands of list rows              | `fec-list-virtualization`        | “Our `ProductList` renders 10k items—choose a virtualization approach for our framework, dynamic heights, browser search, and SEO constraints.”   |
 | Add offline support                        | `fec-pwa-implementation`         | “Make this React app a PWA: manifest, service worker, offline cache strategy, and install prompt.”                                               |
 | Heavy computation off main thread          | `fec-web-workers`                | “Move the image-processing logic to a Web Worker with Comlink to keep the UI responsive.”                                                        |
 | Build an interactive 3D scene              | `fec-canvas-threejs`             | “Add a Three.js product viewer to `src/components/ProductViewer.tsx` with performance and fallback considerations.”                              |
 | Add SVG motion to a landing page           | `fec-svg-animation`              | “Animate the hero SVG with Framer Motion, and ensure reduced-motion users get a static fallback.”                                                |
 | Design and polish UI                       | `fec-ui-design`                  | “Review `src/components/Dashboard.tsx` for UI direction, visual identity, spacing, states, and motion polish.”                                   |
+| Build a recordable web presentation        | `fec-web-video-presentation`     | “Turn this product demo script into a 16:9 browser presentation with script beats, chapter steps, theme tokens, and recording guidance.”          |
 | Optimize Vite build config                 | `fec-vite-project-standard`      | “Audit our `vite.config.ts` for HMR, dev proxy, env variable safety, and library mode best practices.”                                           |
 
 **Slash commands (markdown under `commands/`)**

package/README.openclaw.zh-CN.md

@@ -143,31 +143,32 @@ frontend-craft/
 | `fec-accessibility-check`        | 面向 WCAG 的语义结构、键盘支持、焦点、标签检查                 |
 | `fec-react-project-standard`     | React + TypeScript 项目规范                                    |
 | `fec-vue3-project-standard`      | Vue 3 + TypeScript 项目规范                                    |
+| `fec-typescript-project-standard`     | TypeScript 配置、公开类型、声明文件、DTO 和泛型                |
 | `fec-implement-from-design`      | 基于 Figma、Sketch、MasterGo、Pixso、墨刀或截图实现 UI         |
 | `fec-validation-fix`             | 执行校验命令、分析失败并安全修复                               |
 | `fec-legacy-web-standard`        | JavaScript + jQuery + HTML/CSS 传统前端规范                    |
-| `fec-legacy-to-modern-migration` | jQuery / MPA 迁移到 React 或 Vue + TypeScript 的策略           |
+| `fec-legacy-to-modern-migration` | 遗留前端现代化、目标栈识别与分阶段迁移策略                     |
 | `fec-testing-strategy`           | 测试层级选择、风险矩阵与覆盖规划                               |
 | `fec-e2e-testing`                | Playwright / Cypress E2E 结构、产物、CI 与不稳定用例治理       |
 | `fec-nextjs-project-standard`    | Next.js App Router、SSR/SSG、路由、元数据、中间件              |
 | `fec-nuxt-project-standard`      | Nuxt 3 SSR/SSG、组合式函数、路由、中间件                       |
 | `fec-monorepo-project-standard`  | pnpm workspace、Turborepo、Nx 结构与任务编排                   |
-| `fec-data-fetching`              | TanStack Query / 服务端状态获取、缓存、失效、乐观更新          |
+| `fec-data-fetching`              | 服务端状态获取、缓存、失效、SSR 与无限加载                     |
 | `fec-state-management`           | 状态归属、store 选型、URL/服务端/表单/本地状态边界             |
-| `fec-form-handling`              | React Hook Form + Zod 表单、动态字段、上传、多步流程           |
+| `fec-form-handling`              | 跨框架表单选型、schema 校验、动态字段、上传、多步流程          |
 | `fec-tailwind-design-system`     | Tailwind token、主题扩展、组件变体、class 治理和暗色模式       |
 | `fec-responsive-layout`          | 移动优先布局、容器查询、数据密集型响应式界面                   |
 | `fec-browser-storage`            | localStorage/sessionStorage/IndexedDB/Cookies 选型与安全持久化 |
 | `fec-route-protection`           | React Router、Next.js、Vue Router、Nuxt 的权限路由保护         |
 | `fec-component-testing`          | RTL / Vue Test Utils 组件测试与回归用例                        |
 | `fec-storybook-component-doc`    | Storybook 组件文档、Addon、MDX、交互与视觉测试集成             |
-| `fec-list-virtualization`        | react-window / TanStack Virtual 大列表虚拟滚动                 |
+| `fec-list-virtualization`        | 按框架选型的大列表虚拟滚动、测量、网格和无限滚动               |
 | `fec-pwa-implementation`         | PWA manifest、Service Worker、离线缓存与安装提示               |
 | `fec-web-workers`                | Web Worker、Transferable、Comlink、Worker 池                   |
 | `fec-canvas-threejs`             | Canvas 2D、Three.js、React Three Fiber、WebGL 性能与可访问性   |
 | `fec-svg-animation`              | CSS、Framer Motion、GSAP SVG 动画与 reduced-motion 降级        |
 | `fec-ui-design`                  | UI 方向、视觉识别、界面打磨、状态与视觉 QA                     |
-| `fec-typescript-type-safety`     | 类型契约、DTO 映射、类型守卫、泛型和类型级检查                 |
+| `fec-web-video-presentation`     | 将文章、口播稿、课程和 demo 转成可录屏的 16:9 步进网页演示     |
 | `fec-dependency-upgrade`         | 依赖升级、lockfile 评审、CVE 修复和迁移验证                    |
 | `fec-vite-project-standard`      | Vite 配置、环境变量安全、HMR、开发代理、构建优化与库模式       |
 
@@ -195,24 +196,25 @@ frontend-craft/
 | 按设计稿 / 截图实现 UI       | `fec-implement-from-design`      | 「请按 Figma 节点 `123:456` 实现该界面：间距与设计 Token 对齐，复用现有 `Button`，并说明假设条件。」                                   |
 | CI 或本地脚本失败            | `fec-validation-fix`             | 「`pnpm lint` 和 `pnpm test` 都挂了，请定位根因并修复，不要放宽类型或跳过检查。」                                                      |
 | 维护 jQuery / MPA 老页面     | `fec-legacy-web-standard`        | 「`public/js/legacy/*.js` 仍在生产使用，请在保持行为的前提下给出可维护性改进与模式建议。」                                             |
-| 规划 jQuery → React/Vue 迁移 | `fec-legacy-to-modern-migration` | 「我们有 `static/app.js` 的 jQuery + 多页应用，请输出迁到 React + TypeScript 的分阶段方案、风险与里程碑。」                            |
+| 规划遗留前端现代化         | `fec-legacy-to-modern-migration` | 「我们有 `static/app.js` 的 jQuery + 多页应用，请评估保留 MPA、局部现代化或迁到目标栈的分阶段方案、风险与里程碑。」                  |
 | 规划前端测试覆盖             | `fec-testing-strategy`           | 「这次 checkout 重构先别急着写测试，请把风险映射到静态检查、单元/组件、E2E、视觉、无障碍和安全覆盖。」                                 |
 | 补充或稳定 E2E               | `fec-e2e-testing`                | 「请用 Playwright 给登录流程加冒烟用例：目录清晰、使用 Page Object，并说明如何在 CI 里跑。」                                           |
 | Next.js App Router 功能      | `fec-nextjs-project-standard`    | 「请评审 `app/(dashboard)/reports/page.tsx` 及相关 server actions 是否符合 Next.js App Router 最佳实践（数据获取、错误、元数据等）。」 |
 | Nuxt 3 页面或布局            | `fec-nuxt-project-standard`      | 「请评审 `pages/admin/*.vue` 与 `composables/useApi.ts` 是否符合 Nuxt 3 的 SSR、数据与组合式用法惯例。」                               |
 | Monorepo 边界与任务编排      | `fec-monorepo-project-standard`  | 「`apps/web` 依赖 `packages/ui`，请检查包边界、workspace 配置和 Turborepo 任务图是否有问题。」                                         |
-| 服务端数据获取               | `fec-data-fetching`              | 「请评审 `src/queries/useReports.ts` 的 TanStack Query 模式：缓存 key、失效策略和乐观更新。」                                          |
+| 服务端数据获取               | `fec-data-fetching`              | 「请评审 `src/data/reports.ts` 的服务端状态获取：缓存 key、失效策略、SSR 水合，以及是否需要查询库。」                                  |
 | 状态归属与 store 选型        | `fec-state-management`           | 「请审计 dashboard 的状态：哪些属于 URL 参数、TanStack Query、本地 state 或全局 store，并给出安全迁移方案。」                          |
-| 复杂表单与校验               | `fec-form-handling`              | 「用 React Hook Form + Zod 构建多步注册表单，包含文件上传和动态条件字段。」                                                            |
+| 复杂表单与校验               | `fec-form-handling`              | 「构建多步注册表单：按项目框架选择表单库和 schema 校验方案，包含文件上传和动态条件字段。」                                             |
 | 为应用添加路由守卫           | `fec-route-protection`           | 「为 React Router 的 `/admin` 路由做权限保护：未登录用户重定向，基于角色控制访问。」                                                   |
 | 编写组件单元测试             | `fec-component-testing`          | 「为 `src/components/UserCard.tsx` 编写 RTL 测试：渲染、user-event 交互和快照回归用例。」                                              |
 | 组件库文档化                 | `fec-storybook-component-doc`    | 「为 `packages/ui/` 搭建 Storybook：MDX 文档、无障碍 addon 和交互测试。」                                                              |
-| 渲染上万条列表数据           | `fec-list-virtualization`        | 「`ProductList` 渲染上万行太卡，请用 react-window 或 TanStack Virtual 做虚拟滚动并测量滚动性能。」                                     |
+| 渲染上万条列表数据           | `fec-list-virtualization`        | 「`ProductList` 渲染上万行太卡，请按现有框架、动态高度、浏览器查找和 SEO 约束选择虚拟滚动方案并测量性能。」                            |
 | 添加离线支持                 | `fec-pwa-implementation`         | 「把这个 React 应用做成 PWA：manifest、Service Worker、离线缓存策略和安装提示。」                                                      |
 | 重计算移出主线程             | `fec-web-workers`                | 「把图片处理逻辑移到 Web Worker，用 Comlink 通信，保持 UI 响应。」                                                                     |
 | 构建交互式 3D 场景           | `fec-canvas-threejs`             | 「在 `src/components/ProductViewer.tsx` 添加 Three.js 产品展示，兼顾性能和降级方案。」                                                 |
 | 为落地页添加 SVG 动效        | `fec-svg-animation`              | 「用 Framer Motion 为 hero 区 SVG 添加动画，并为 reduced-motion 用户提供静态降级方案。」                                               |
 | 设计与打磨 UI                | `fec-ui-design`                  | 「请评审 `src/components/Dashboard.tsx` 的 UI 方向、视觉识别、间距、状态和动效打磨。」                                                 |
+| 构建可录屏网页演示           | `fec-web-video-presentation`     | 「把这段产品 demo 口播稿转成 16:9 浏览器演示：拆口播节拍、章节 step、主题 token，并给出录屏指引。」                                    |
 | 优化 Vite 构建配置           | `fec-vite-project-standard`      | 「请审计 `vite.config.ts` 的 HMR、开发代理、环境变量安全和库模式最佳实践。」                                                           |
 
 **斜杠命令（`commands/` 下的 Markdown）**