@bovinphang/frontend-craft 2.9.0 → 3.0.0

package/docs/project-structure.md

@@ -1,151 +1,166 @@
-# Project Structure
-
-Detailed directory layout for `frontend-craft`.
-
-## Repository Layout
-
-```text
-frontend-craft/
-|-- .claude-plugin/   # Claude Code plugin + marketplace manifests
-|   |-- plugin.json         # Plugin metadata
-|   |-- marketplace.json    # Marketplace directory metadata
-|
-|-- agents/           # Specialized sub-agents for delegation
-|   |-- fec-architect.md    # Page splitting, component architecture, state flow
-|   |-- fec-code-reviewer.md # Frontend-focused code review (quality, security, a11y)
-|   |-- fec-security-reviewer.md # Frontend attack surface: XSS, secrets, CSP, deps
-|   |-- fec-test-planner.md # Testing strategy, risk matrix, coverage planning
-|   |-- fec-debugger.md # Complex build/runtime/UI/API diagnostics
-|   |-- fec-refactor-cleaner.md # Dead-code and unused dependency cleanup
-|   |-- fec-refactoring-expert.md # Behavior-preserving smell diagnosis, planning, execution, validation
-|   |-- fec-doc-updater.md # README/runtime docs/capability table synchronization
-|   |-- fec-e2e-runner.md     # E2E authoring, execution, flaky handling, artifacts, CI
-|   |-- fec-typescript-reviewer.md    # TS/JS type safety, async, security, report-only review
-|   |-- fec-performance-optimizer.md # Performance bottleneck analysis and optimization
-|   |-- fec-ui-checker.md            # UI visual issues, design fidelity evaluation
-|   |-- fec-figma-implementer.md     # Precise UI implementation from design
-|   |-- fec-design-token-mapper.md   # Map design variables to Design Tokens
-|
-|-- skills/           # Workflow definitions and domain knowledge
-|   |-- fec-code-review/    # Architecture, types, rendering, styles, a11y
-|   |-- fec-security-review/     # XSS, CSRF, sensitive data, input validation
-|   |-- fec-accessibility-check/     # WCAG 2.2 accessibility, keyboard, focus, screen readers
-|   |-- fec-code-review/    # Architecture, types, rendering, styles, a11y
-|   |-- fec-security-review/     # XSS, CSRF, sensitive data, input validation
-|   |-- fec-accessibility-check/     # WCAG 2.2 accessibility, keyboard, focus, screen readers
-|   |-- fec-react-project-standard/  # React + TypeScript project standards
-|   |-- fec-vue3-project-standard/   # Vue 3 + TypeScript project standards
-|   |-- fec-implement-from-design/   # Implement UI from design tools, screenshots, and visual references
-|   |-- fec-validation-fix/            # lint, type-check, test, build and fix
-|   |-- fec-performance-optimization/  # Core Web Vitals, bundle, rendering, network, memory
-|   |-- fec-source-driven-development/ # Official sources, project facts, version-sensitive decisions
-|   |-- fec-typescript-project-standard/   # TypeScript config, public API types, declarations, DTOs, generics
-|   |-- fec-state-management/         # State ownership, store selection, URL/server/form/local boundaries
-|   |-- fec-tailwind-design-system/   # Tailwind tokens, variants, dark mode, class governance
-|   |-- fec-responsive-layout/        # Mobile-first layouts, container queries, touch-safe responsive UI
-|   |-- fec-dependency-upgrade/       # Dependency upgrades, lockfile risk, CVE remediation
-|   |-- fec-tdd-workflow/              # Test-first frontend implementation workflow
-|   |-- fec-refactor-clean/            # Safe dead-code and unused dependency cleanup
-|   |-- fec-refactoring/              # Core behavior-preserving refactoring workflow and safety gates
-|   |-- fec-code-smells/               # 24-smell evidence-based diagnosis
-|   |-- fec-refactoring-catalog/       # 61-technique selection and composition catalog
-|   |-- fec-refactoring-functions/     # Function family refactorings
-|   |-- fec-refactoring-encapsulation/ # Encapsulation family refactorings
-|   |-- fec-refactoring-move-features/ # Moving-feature family refactorings
-|   |-- fec-refactoring-data/          # Data family refactorings
-|   |-- fec-refactoring-control/       # Conditional/control family refactorings
-|   |-- fec-refactoring-api/           # API family refactorings
-|   |-- fec-refactoring-inheritance/   # Inheritance/delegation family refactorings
-|   |-- fec-refactoring-validation/    # Behavior-preservation validation and proof levels
-|   |-- fec-doc-sync/                  # Public docs and metadata synchronization
-|   |-- fec-legacy-web-standard/     # JS + jQuery + HTML legacy project standards
-|   |-- fec-legacy-to-modern-migration/ # jQuery/MPA migration to React/Vue strategy and workflow
-|   |-- fec-testing-strategy/          # Testing layer selection and coverage matrix
-|   |-- fec-e2e-testing/                # Playwright/Cypress E2E testing standards
-|   |-- fec-component-testing/          # RTL / Vue Test Utils component tests
-|   |-- fec-debug-framework/            # Unified 5-step diagnostic framework for build/runtime/UI/API failures
-|   |-- fec-nextjs-project-standard/    # Next.js 14+ App Router, SSR/SSG standards
-|   |-- fec-nuxt-project-standard/      # Nuxt 3 SSR/SSG, composables standards
-|   |-- fec-monorepo-project-standard/  # pnpm workspace, Turborepo, Nx standards
-|   |-- fec-vite-project-standard/      # Vite config, env safety, HMR, proxy, build and library mode
-|   |-- fec-data-fetching/              # TanStack Query and server-state workflows
-|   |-- fec-api-integration/            # Typed API clients, auth refresh, uploads, realtime integration
-|   |-- fec-backend-requirements-handoff/ # Frontend-to-backend UI data and state needs
-|   |-- fec-form-handling/              # React Hook Form + Zod form workflows
-|   |-- fec-route-protection/           # Authenticated and permissioned routes
-|   |-- fec-pwa-implementation/         # PWA manifest, service worker, offline
-|   |-- fec-web-workers/                # Worker integration and background compute
-|   |-- fec-canvas-threejs/             # Canvas, Three.js, React Three Fiber
-|   |-- fec-svg-animation/              # SVG motion and reduced-motion fallbacks
-|   |-- fec-browser-storage/            # localStorage/sessionStorage/IndexedDB/Cookies selection and safe client persistence
-|   |-- fec-list-virtualization/        # Large-list windowing with react-window / TanStack Virtual and measurement strategies
-|   |-- fec-storybook-component-doc/    # Storybook component docs, addons, MDX, interaction and visual test integration
-|   |-- fec-ui-design/                  # Product-context UI direction, design dials, media strategy, visual QA
-|   |-- fec-image-generation/           # Diagram/image generation, editing workflows, PNG QA and repair loops
-|   |-- fec-drawio-studio/              # Editable draw.io diagrams, shape lookup, auto-layout, code structure maps
-|   |-- fec-web-video-presentation/     # Recordable 16:9 step-driven web video presentations
-|   |-- fec-motion-interaction/         # Context-aware motion intensity, transitions, scroll animation, reduced motion
-|   |-- fec-alchemy/                    # Project absorption workflow — extract reference ideas and redesign natively
-|
-|-- commands/         # Slash commands for quick execution
-|   |-- fec-init.md     # /fec-init - Initialize project templates
-|   |-- fec-review.md   # /fec-review - Project by default; targeted scope or explicit changes
-|   |-- fec-scaffold.md # /fec-scaffold - Create page/feature/component
-|   |-- fec-plan.md     # /fec-plan - Implementation planning before frontend changes
-|   |-- fec-tdd.md      # /fec-tdd - Test-driven frontend implementation
-|   |-- fec-debug.md    # /fec-debug - Diagnose and fix frontend failures
-|   |-- fec-refactor-clean.md # /fec-refactor-clean - Safe dead-code cleanup
-|   |-- fec-smell.md          # /fec-smell - Read-only code-smell diagnosis
-|   |-- fec-refactor-plan.md  # /fec-refactor-plan - Read-only small-step refactoring plan
-|   |-- fec-refactor.md       # /fec-refactor - Controlled behavior-preserving execution
-|   |-- fec-doc-sync.md # /fec-doc-sync - Public docs and metadata sync
-|
-|-- hooks/            # Event-driven automation
-|   |-- hooks.json     # PreToolUse, PostToolUse, Stop, Notification, etc.
-|
-|-- src/              # TypeScript source for published runtime code
-|   |-- hooks/         # Runtime hook scripts bundled to dist/hooks
-|   |-- security-check.ts      # Block dangerous commands
-|   |-- format-changed-file.ts # Auto Prettier formatting
-|   |-- run-tests.ts           # Run checks on session end
-|   |-- session-start.ts       # Detect framework on session start
-|   |-- notify.ts              # Cross-platform desktop notifications
-|   |-- install/       # Installer core (CLI, interactive wizard, runtime converters)
-|   |-- openclaw/      # OpenClaw runtime TypeScript source
-|
-|-- scripts/          # Source-run repository maintenance scripts, not published to npm
-|
-|-- templates/        # Runtime-specific project templates
-|   |-- claude/        # CLAUDE.md and settings.json
-|   |-- codex/         # AGENTS.md and config.toml
-|   |-- cursor/        # Cursor runtime project stubs
-|   |-- gemini/        # Gemini CLI runtime project stubs
-|   |-- openclaw/      # AGENTS.md and OPENCLAW-CONFIG.md
-|   |-- windsurf/      # Windsurf runtime project stubs
-|   |-- shared/rules/  # 20 rule files: vue, react, rendering patterns, responsive design, testing, source-driven development, etc.
-|
-|-- .mcp.json         # MCP server config (Figma, Figma Desktop, Sketch, MasterGo, Pixso, 墨刀)
-└-- README.md
-```
-
-## Directory Responsibilities
-
-| Directory       | Purpose                                                                                                               |
-| --------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `agents/`       | Specialized sub-agent definitions (Markdown + YAML frontmatter)                                                       |
-| `bin/`          | CLI entry point (`frontend-craft.ts`)                                                                                 |
-| `commands/`     | Custom slash commands (`fec-init`, `fec-review`, `fec-scaffold`, workflow commands)                                   |
-| `docs/`         | Runtime installation docs and localized READMEs                                                                       |
-| `hooks/`        | Hook configuration (`hooks.json`)                                                                                     |
-| `scripts/`      | Source-run maintenance scripts (build, packaging, publishing checks, metadata sync), excluded from npm runtime output |
-| `skills/`       | Skill definitions (`SKILL.md`, `metadata.json`)                                                                       |
-| `src/hooks/`    | Runtime hook source bundled into `dist/hooks/` for Claude/Qoder execution                                             |
-| `src/install/`  | Installer core (CLI, interactive wizard, runtime converters)                                                          |
-| `src/openclaw/` | OpenClaw runtime TypeScript source                                                                                    |
-| `templates/`    | Runtime-specific project templates (Claude/Codex/Cursor/Gemini/OpenClaw/Windsurf configs + shared rules)             |
-| `tests/`        | Test suite (converter tests, installer tests)                                                                         |
-
-
-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.
+# Project Structure
+
+Directory layout for `frontend-craft` 3.0.0. The CLI uses TypeScript, ESM and esbuild; tests use Node.js `node:test`. Distribution includes 14 agents, 74 skills (53 frontend + 21 common) and 11 commands.
+
+## Repository Layout
+
+```text
+frontend-craft/
+|-- .claude-plugin/   # Claude Code plugin + marketplace manifests
+|   |-- plugin.json         # Plugin metadata
+|   |-- marketplace.json    # Marketplace directory metadata
+|
+|-- agents/           # Specialized sub-agents for delegation
+|   |-- fec-architect.md    # Page splitting, component architecture, state flow
+|   |-- fec-code-reviewer.md # Frontend-focused code review (quality, security, a11y)
+|   |-- fec-security-reviewer.md # Frontend attack surface: XSS, secrets, CSP, deps
+|   |-- fec-test-planner.md # Testing strategy, risk matrix, coverage planning
+|   |-- fec-debugger.md # Complex build/runtime/UI/API diagnostics
+|   |-- fec-refactor-cleaner.md # Dead-code and unused dependency cleanup
+|   |-- fec-refactoring-expert.md # Behavior-preserving smell diagnosis, planning, execution, validation
+|   |-- fec-doc-updater.md # README/runtime docs/capability table synchronization
+|   |-- fec-e2e-runner.md     # E2E authoring, execution, flaky handling, artifacts, CI
+|   |-- fec-typescript-reviewer.md    # TS/JS type safety, async, security, report-only review
+|   |-- fec-performance-optimizer.md # Performance bottleneck analysis and optimization
+|   |-- fec-ui-checker.md            # UI visual issues, design fidelity evaluation
+|   |-- fec-figma-implementer.md     # Precise UI implementation from design
+|   |-- fec-design-token-mapper.md   # Map design variables to Design Tokens
+|
+|-- skills/           # Workflow definitions and domain knowledge
+|   |-- fec-code-review/    # Architecture, types, rendering, styles, a11y
+|   |-- fec-security-review/     # XSS, CSRF, sensitive data, input validation
+|   |-- fec-accessibility-check/     # WCAG 2.2 accessibility, keyboard, focus, screen readers
+|   |-- fec-react-project-standard/  # React + TypeScript project standards
+|   |-- fec-vue3-project-standard/   # Vue 3 + TypeScript project standards
+|   |-- fec-implement-from-design/   # Implement UI from design tools, screenshots, and visual references
+|   |-- fec-validation-fix/            # lint, type-check, test, build and fix
+|   |-- fec-performance-optimization/  # Core Web Vitals, bundle, rendering, network, memory
+|   |-- cc-source-driven-development/ # Official sources, project facts, version-sensitive decisions
+|   |-- cc-typescript-project-standard/   # TypeScript config, public API types, declarations, DTOs, generics
+|   |-- fec-state-management/         # State ownership, store selection, URL/server/form/local boundaries
+|   |-- fec-tailwind-design-system/   # Tailwind tokens, variants, dark mode, class governance
+|   |-- fec-responsive-layout/        # Mobile-first layouts, container queries, touch-safe responsive UI
+|   |-- fec-dependency-upgrade/       # Dependency upgrades, lockfile risk, CVE remediation
+|   |-- fec-tdd-workflow/              # Test-first frontend implementation workflow
+|   |-- fec-refactor-clean/            # Safe dead-code and unused dependency cleanup
+|   |-- fec-refactoring/              # Core behavior-preserving refactoring workflow and safety gates
+|   |-- fec-code-smells/               # 24-smell evidence-based diagnosis
+|   |-- fec-refactoring-catalog/       # 61-technique selection and composition catalog
+|   |-- fec-refactoring-functions/     # Function family refactorings
+|   |-- fec-refactoring-encapsulation/ # Encapsulation family refactorings
+|   |-- fec-refactoring-move-features/ # Moving-feature family refactorings
+|   |-- fec-refactoring-data/          # Data family refactorings
+|   |-- fec-refactoring-control/       # Conditional/control family refactorings
+|   |-- fec-refactoring-api/           # API family refactorings
+|   |-- fec-refactoring-inheritance/   # Inheritance/delegation family refactorings
+|   |-- fec-refactoring-validation/    # Behavior-preservation validation and proof levels
+|   |-- fec-doc-sync/                  # Public docs and metadata synchronization
+|   |-- fec-legacy-web-standard/     # JS + jQuery + HTML legacy project standards
+|   |-- fec-legacy-to-modern-migration/ # jQuery/MPA migration to React/Vue strategy and workflow
+|   |-- fec-testing-strategy/          # Testing layer selection and coverage matrix
+|   |-- fec-e2e-testing/                # Playwright/Cypress E2E testing standards
+|   |-- fec-component-testing/          # RTL / Vue Test Utils component tests
+|   |-- fec-debug-framework/            # Unified 5-step diagnostic framework for build/runtime/UI/API failures
+|   |-- fec-nextjs-project-standard/    # Next.js 14+ App Router, SSR/SSG standards
+|   |-- fec-nuxt-project-standard/      # Nuxt 3 SSR/SSG, composables standards
+|   |-- fec-monorepo-project-standard/  # pnpm workspace, Turborepo, Nx standards
+|   |-- fec-vite-project-standard/      # Vite config, env safety, HMR, proxy, build and library mode
+|   |-- fec-data-fetching/              # TanStack Query and server-state workflows
+|   |-- fec-api-integration/            # Typed API clients, auth refresh, uploads, realtime integration
+|   |-- fec-backend-requirements-handoff/ # Frontend-to-backend UI data and state needs
+|   |-- fec-form-handling/              # React Hook Form + Zod form workflows
+|   |-- fec-route-protection/           # Authenticated and permissioned routes
+|   |-- fec-pwa-implementation/         # PWA manifest, service worker, offline
+|   |-- fec-web-workers/                # Worker integration and background compute
+|   |-- fec-canvas-threejs/             # Canvas, Three.js, React Three Fiber
+|   |-- fec-svg-animation/              # SVG motion and reduced-motion fallbacks
+|   |-- fec-browser-storage/            # localStorage/sessionStorage/IndexedDB/Cookies selection and safe client persistence
+|   |-- fec-list-virtualization/        # Large-list windowing with react-window / TanStack Virtual and measurement strategies
+|   |-- fec-storybook-component-doc/    # Storybook component docs, addons, MDX, interaction and visual test integration
+|   |-- fec-ui-design/                  # Product-context UI direction, design dials, media strategy, visual QA
+|   |-- fec-image-generation/           # UI/product/brand image generation, editing and shared PNG QA
+|   |-- cc-drawio-studio/              # Editable draw.io diagrams, shape lookup, auto-layout, code structure maps
+|   |-- fec-web-video-presentation/     # Recordable 16:9 step-driven web video presentations
+|   |-- fec-motion-interaction/         # Context-aware motion intensity, transitions, scroll animation, reduced motion
+|   |-- fec-alchemy/                    # Project absorption workflow — extract reference ideas and redesign natively
+|   |-- cc-technical-diagrams/ # Technical diagrams, export and PNG QA
+|   |-- cc-doc-sync-core/ # Shared documentation fact synchronization
+|   |-- cc-debug-methodology/ # Shared evidence-driven diagnosis
+|   |-- cc-refactoring-core/ # Shared behavior-preserving refactoring
+|   |-- cc-tdd-methodology/ # Shared TDD methodology
+|
+|-- commands/         # Slash commands for quick execution
+|   |-- fec-init.md     # /fec-init - Initialize project templates
+|   |-- fec-review.md   # /fec-review - Project by default; targeted scope or explicit changes
+|   |-- fec-scaffold.md # /fec-scaffold - Create page/feature/component
+|   |-- fec-plan.md     # /fec-plan - Implementation planning before frontend changes
+|   |-- fec-tdd.md      # /fec-tdd - Test-driven frontend implementation
+|   |-- fec-debug.md    # /fec-debug - Diagnose and fix frontend failures
+|   |-- fec-refactor-clean.md # /fec-refactor-clean - Safe dead-code cleanup
+|   |-- fec-smell.md          # /fec-smell - Read-only code-smell diagnosis
+|   |-- fec-refactor-plan.md  # /fec-refactor-plan - Read-only small-step refactoring plan
+|   |-- fec-refactor.md       # /fec-refactor - Controlled behavior-preserving execution
+|   |-- fec-doc-sync.md # /fec-doc-sync - Public docs and metadata sync
+|
+|-- hooks/            # Event-driven automation
+|   |-- hooks.json     # PreToolUse, PostToolUse, Stop, Notification, etc.
+|
+|-- src/              # TypeScript source for published runtime code
+|   |-- hooks/         # Runtime hook scripts bundled to dist/hooks
+|   |   |-- security-check.ts      # Block dangerous commands
+|   |   |-- format-changed-file.ts # Auto Prettier formatting
+|   |   |-- run-tests.ts           # Run checks on session end
+|   |   |-- session-start.ts       # Detect framework on session start
+|   |   |-- notify.ts              # Cross-platform desktop notifications
+|   |-- install/       # Installer core (CLI, interactive wizard, runtime converters)
+|   |   |-- cli-lifecycle.ts # CLI self-update/removal and resource refresh
+|   |   |-- migration.ts # Read-only legacy-entry checks
+|   |   |-- shared/ # Common snapshots, ownership and product transactions
+|   |-- openclaw/      # OpenClaw runtime TypeScript source
+|
+|-- bin/              # TypeScript CLI entry bundled into dist/bin/
+|-- localized/zh-CN/  # Chinese agents, commands, skills and templates
+|-- common-content.lock.json # Pinned common version, provenance and hashes
+|-- tests/            # Content, install, migration, shared transaction and CLI lifecycle tests
+|-- dist/             # Generated CLI, hooks and OpenClaw bundles; do not edit
+|
+|-- scripts/          # Source-run repository maintenance scripts, not published to npm
+|
+|-- templates/        # Runtime-specific project templates
+|   |-- claude/        # CLAUDE.md and settings.json
+|   |-- codex/         # AGENTS.md and config.toml
+|   |-- cursor/        # Cursor runtime project stubs
+|   |-- gemini/        # Gemini CLI runtime project stubs
+|   |-- openclaw/      # AGENTS.md and OPENCLAW-CONFIG.md
+|   |-- windsurf/      # Windsurf runtime project stubs
+|   |-- shared/rules/  # 20 rule files: vue, react, rendering patterns, responsive design, testing, source-driven development, etc.
+|
+|-- .mcp.json         # MCP server config (Figma, Figma Desktop, Sketch, MasterGo, Pixso, 墨刀)
+└-- README.md
+```
+
+## Directory Responsibilities
+
+| Directory       | Purpose                                                                                                               |
+| --------------- | --------------------------------------------------------------------------------------------------------------------- |
+| `agents/`       | Specialized sub-agent definitions (Markdown + YAML frontmatter)                                                       |
+| `bin/`          | CLI entry point (`frontend-craft.ts`)                                                                                 |
+| `commands/`     | Custom slash commands (`fec-init`, `fec-review`, `fec-scaffold`, workflow commands)                                   |
+| `docs/`         | Runtime installation docs and localized READMEs                                                                       |
+| `hooks/`        | Hook configuration (`hooks.json`)                                                                                     |
+| `scripts/`      | Source-run maintenance scripts (build, packaging, publishing checks, metadata sync), excluded from npm runtime output |
+| `skills/`       | Skill definitions (`SKILL.md`, `metadata.json`)                                                                       |
+| `src/hooks/`    | Runtime hook source bundled into `dist/hooks/` for Claude/Qoder execution                                             |
+| `src/install/`  | Installer core (CLI, interactive wizard, runtime converters)                                                          |
+| `src/openclaw/` | OpenClaw runtime TypeScript source                                                                                    |
+| `templates/`    | Runtime-specific project templates (Claude/Codex/Cursor/Gemini/OpenClaw/Windsurf configs + shared rules)             |
+| `tests/`        | Test suite (converter tests, installer tests)                                                                         |
+
+
+Technical diagram quality: `cc-technical-diagrams` 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/cc-technical-diagrams/assets/quality-examples/`.
+
+[Review scope and technical diagram delivery](review-and-diagram-workflows.md) — scope, tool prerequisites, export commands, and QA limits.
+
+Shared `cc-*` entries and embedded method copies are generated from `craft-common@2.0.0`. Run `pnpm run sync:common` after upstream changes and `pnpm run check:common` for a read-only comparison. Do not edit generated common snapshots. Frontend domain content is maintained here, with Chinese mirrors in `localized/zh-CN/`.
+
+`src/project/` keeps product framework declarations and inspect integration. Bounded discovery and task recommendation live in craft-common; backend retains the six-language validation projection. 产品不复制扫描器或公共安装算法。

package/docs/review-and-diagram-workflows.md

@@ -20,20 +20,20 @@ Examples: “Review the project”; “Review all code in `src/features/`”;
 
 ## Technical diagrams
 
-Use `fec-image-generation` for sequence diagrams and workflows with local Mermaid where available; use `fec-drawio-studio` for editable architecture diagrams. Use the JSON/HTML renderer when these tools are unavailable. Keep technical relationships and labels in editable source rather than relying on raster image generation for exact structure.
+Use `cc-technical-diagrams` for sequence diagrams and workflows with local Mermaid where available; use `cc-drawio-studio` for editable architecture diagrams. Use the JSON/HTML renderer when these tools are unavailable. Keep technical relationships and labels in editable source rather than relying on raster image generation for exact structure.
 
 The Mermaid adapter uses an installed CLI only; it does not download packages. PNG export requires a local Chromium browser, with `FEC_BROWSER_PATH` available for an explicit executable. Missing tools must be reported rather than claimed as successful exports.
 
 For the JSON/HTML route, render the source, export PNG with a browser-measured manifest at the same scale, run QA, and inspect the final image:
 
 ```bash
-node skills/fec-image-generation/scripts/tech-diagram-render.mjs --input skills/fec-image-generation/assets/quality-examples/workflow.json --type workflow --output workflow.html --manifest workflow.layout.json
-node skills/fec-image-generation/scripts/export-diagram.mjs --input workflow.html --format png --output workflow.png --theme light --scale 2 --manifest workflow.layout.json --output-manifest workflow.actual.json
-node skills/fec-image-generation/scripts/png-qa.mjs --png workflow.png --manifest workflow.actual.json --format json
+node skills/cc-technical-diagrams/scripts/tech-diagram-render.mjs --input skills/cc-technical-diagrams/assets/quality-examples/workflow.json --type workflow --output workflow.html --manifest workflow.layout.json
+node skills/cc-technical-diagrams/scripts/export-diagram.mjs --input workflow.html --format png --output workflow.png --theme light --scale 2 --manifest workflow.layout.json --output-manifest workflow.actual.json
+node skills/cc-technical-diagrams/scripts/png-qa.mjs --png workflow.png --manifest workflow.actual.json --format json
 ```
 
 Preserve complete Unicode labels, explicit geometry, edge direction, sequence order, and self calls. Keep exported SVG styles self-contained. Geometry QA and browser measurement support visual inspection; neither proves semantic correctness nor completes a human visual review. Missing measurements or partial coverage must be disclosed. Repair the editable source for at most two automatic rounds, then report unresolved defects.
 
-Deliver editable source, the requested export, and QA/coverage results. See [reproducible examples](../skills/fec-image-generation/assets/quality-examples/README.md), [diagram workflows](../skills/fec-image-generation/references/diagram-workflows.md), and [PNG QA](../skills/fec-image-generation/references/png-qa-autofix.md).
+Deliver editable source, the requested export, and QA/coverage results. See [reproducible examples](../skills/cc-technical-diagrams/assets/quality-examples/README.md), [diagram workflows](../skills/cc-technical-diagrams/references/diagram-workflows.md), and [PNG QA](../skills/cc-technical-diagrams/references/png-qa-autofix.md).
 
 [简体中文](zh-CN/review-and-diagram-workflows.md)

package/docs/runtimes/antigravity.md

@@ -1,18 +1,18 @@
-# frontend-craft: Antigravity
-
-```bash
-fec setup antigravity
-fec setup antigravity --global
-fec doctor antigravity --local
-fec doctor antigravity --global
-```
-
-Without a global CLI installation, use `npx @bovinphang/frontend-craft install antigravity --local` or `--global`.
-
-Project skills retain backward-compatible `.agent/skills`; the current IDE/2.0 user base is `~/.gemini/config`, so skills go in `~/.gemini/config/skills`. For Antigravity CLI set `ANTIGRAVITY_CONFIG_DIR` to `~/.gemini/antigravity-cli` before global installation. The override selects one product scope; this adapter does not install plugins or hooks. After upgrading an old default global install, run `fec setup antigravity --global`; the old `~/.gemini/antigravity` files are preserved.
-
-The capability matrix describes what frontend-craft installs, not every feature offered by the host. `doctor` checks installation artifacts; it does not launch the host or certify a release version.
-
-[Official reference](https://antigravity.google/docs/skills) · [Compatibility and upgrade notes](compatibility.md)
-
-Review defaults to the full project; a file/directory request includes unchanged code, while incremental review requires an explicit changes/PR/commit request. Technical diagrams use structured sources; PNG export requires a local browser and disclosed QA coverage. See [review scope and technical diagram delivery](../review-and-diagram-workflows.md).
+# frontend-craft: Antigravity
+
+```bash
+fec setup antigravity
+fec setup antigravity --global
+fec doctor antigravity --local
+fec doctor antigravity --global
+```
+
+Without a global CLI installation, use `npx @bovinphang/frontend-craft runtime install antigravity --local` or `--global`.
+
+Project skills retain backward-compatible `.agent/skills`; the current IDE/2.0 user base is `~/.gemini/config`, so skills go in `~/.gemini/config/skills`. For Antigravity CLI set `ANTIGRAVITY_CONFIG_DIR` to `~/.gemini/antigravity-cli` before global installation. The override selects one product scope; this adapter does not install plugins or hooks. After upgrading an old default global install, run `fec setup antigravity --global`; the old `~/.gemini/antigravity` files are preserved.
+
+The capability matrix describes what frontend-craft installs, not every feature offered by the host. `doctor` checks installation artifacts; it does not launch the host or certify a release version.
+
+[Official reference](https://antigravity.google/docs/skills) · [Compatibility and upgrade notes](compatibility.md)
+
+Review defaults to the full project; a file/directory request includes unchanged code, while incremental review requires an explicit changes/PR/commit request. Technical diagrams use structured sources; PNG export requires a local browser and disclosed QA coverage. See [review scope and technical diagram delivery](../review-and-diagram-workflows.md).

package/docs/runtimes/augment.md

@@ -1,18 +1,18 @@
-# frontend-craft: Augment
-
-```bash
-fec setup augment
-fec setup augment --global
-fec doctor augment --local
-fec doctor augment --global
-```
-
-Without a global CLI installation, use `npx @bovinphang/frontend-craft install augment --local` or `--global`.
-
-Skills use `.augment/skills` or `~/.augment/skills` (`AUGMENT_CONFIG_DIR` override). The adapter currently installs skills only. Native agents, rules, hooks and MCP support in Augment do not imply that this adapter installs those capabilities.
-
-The capability matrix describes what frontend-craft installs, not every feature offered by the host. `doctor` checks installation artifacts; it does not launch the host or certify a release version.
-
-[Official reference](https://docs.augmentcode.com/cli/skills) · [Compatibility and upgrade notes](compatibility.md)
-
-Review defaults to the full project; a file/directory request includes unchanged code, while incremental review requires an explicit changes/PR/commit request. Technical diagrams use structured sources; PNG export requires a local browser and disclosed QA coverage. See [review scope and technical diagram delivery](../review-and-diagram-workflows.md).
+# frontend-craft: Augment
+
+```bash
+fec setup augment
+fec setup augment --global
+fec doctor augment --local
+fec doctor augment --global
+```
+
+Without a global CLI installation, use `npx @bovinphang/frontend-craft runtime install augment --local` or `--global`.
+
+Skills use `.augment/skills` or `~/.augment/skills` (`AUGMENT_CONFIG_DIR` override). The adapter currently installs skills only. Native agents, rules, hooks and MCP support in Augment do not imply that this adapter installs those capabilities.
+
+The capability matrix describes what frontend-craft installs, not every feature offered by the host. `doctor` checks installation artifacts; it does not launch the host or certify a release version.
+
+[Official reference](https://docs.augmentcode.com/cli/skills) · [Compatibility and upgrade notes](compatibility.md)
+
+Review defaults to the full project; a file/directory request includes unchanged code, while incremental review requires an explicit changes/PR/commit request. Technical diagrams use structured sources; PNG export requires a local browser and disclosed QA coverage. See [review scope and technical diagram delivery](../review-and-diagram-workflows.md).