@bovinphang/frontend-craft 2.5.0 → 2.6.0

package/docs/example-prompts.md

@@ -17,7 +17,7 @@ Each example follows the same shape:
 | Initialize project rules       | "Initialize this repository with the frontend-craft project templates for my current runtime. Ask before overwriting existing files."                          | `/fec-init`                  | Runtime config, rules, and project guidance installed or a clear overwrite plan. | Works best from the target project root. |
 | Pick a runtime install path    | "I want to use frontend-craft with Codex and Claude Code on this machine. Explain whether I should install locally or globally, then show the exact commands." | runtime docs                 | A short recommendation and install commands.                                     | Mention team/shared vs personal use.     |
 | Learn how to ask               | "Show me five frontend-craft prompts for reviewing, building, testing, debugging, and design-to-code work in this repo."                                       | docs guidance                | A short prompt set tailored to the detected project.                             | Good first prompt after install.         |
-| Confirm available capabilities | "Inspect this repo and summarize which frontend-craft commands, skills, agents, hooks, and MCP templates are available."                                       | `fec-doc-sync`, runtime docs | Capability summary grounded in installed files.                                  | Useful after upgrades.                   |
+| Confirm available capabilities | "Inspect this repo and summarize which frontend-craft commands, skills, agents, hooks, and MCP templates are available."                                       | runtime docs                 | Capability summary grounded in installed files.                                  | Useful after upgrades.                   |
 
 ## Review And Quality
 
@@ -103,7 +103,8 @@ Each example follows the same shape:
 | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------- |
 | Build failure repair  | "`pnpm lint`, `pnpm typecheck`, and `pnpm test` are failing. Fix them incrementally without weakening rules or skipping tests."                                                   | `/fec-build-fix`, `fec-validation-fix`, `fec-build-fixer`                 | Minimal fixes and validation report.                                               | Paste exact failing commands.                   |
 | Dead-code cleanup     | "Find and safely remove unused exports, dead routes, stale styles, and unused dependencies. Preserve public API and write a report."                                              | `/fec-refactor-clean`, `fec-refactor-clean`, `fec-refactor-cleaner`       | Cleanup plan/changes and report.                                                   | Good before releases.                           |
-| Documentation sync    | "Update public docs so README, runtime docs, capability tables, and metadata match the current commands, skills, agents, hooks, and package files."                               | `/fec-doc-sync`, `fec-doc-sync`, `fec-doc-updater`                        | Synchronized docs and verification notes.                                          | Avoid copying temporary reports into docs.      |
+| Documentation sync    | "Update the README and docs so setup, scripts, environment variables, API routes, UI routes, and deployment notes match the current frontend code and config."                     | `/fec-doc-sync`, `fec-doc-sync`, `fec-doc-updater`                        | Synchronized docs and verification notes.                                          | Avoid copying temporary reports into docs.      |
+| Capability docs sync  | "This repo publishes skills and commands. Sync the capability tables, metadata, runtime docs, and package files with the installed contents."                                      | `/fec-doc-sync`, `fec-doc-sync`, `fec-doc-updater`                        | Distribution docs grounded in installed files.                                     | Use for skill/agent/command repos.              |
 | Source-backed upgrade | "Plan a safe upgrade for React Router/TanStack Query/Vite. Check official migration notes, compare current project usage, list breaking changes, and propose verification steps." | `fec-dependency-upgrade`, `fec-source-driven-development`, `fec-doc-sync` | Upgrade decision notes, affected files, migration risks, and validation checklist. | Pair with docs sync if public guidance changes. |
 | Legacy maintenance    | "Improve `public/js/legacy/cart.js` while keeping the current jQuery/MPA stack. Reduce risk, improve structure, and do not rewrite it to React yet."                              | `fec-legacy-web-standard`                                                 | Safe legacy maintenance changes or recommendations.                                | Mention browser support constraints.            |
 
@@ -120,5 +121,5 @@ Use these when you know the internal entry point you want.
 | Slash command TDD       | "`/fec-tdd` Add password strength validation with failing tests first, then implementation."                                                                                 | `/fec-tdd`            | TDD loop and validated change.        | Keep scope small.                                     |
 | Slash command build fix | "`/fec-build-fix` Fix the failing validation commands from this log: <paste log>."                                                                                           | `/fec-build-fix`      | Incremental validation fixes.         | Paste exact logs.                                     |
 | Slash command cleanup   | "`/fec-refactor-clean` Safely remove unused exports and dependencies from this package."                                                                                     | `/fec-refactor-clean` | Cleanup report and safe edits.        | Run tests after.                                      |
-| Slash command docs      | "`/fec-doc-sync` Sync README, runtime docs, and metadata with the current package contents."                                                                                 | `/fec-doc-sync`       | Docs updates and verification.        | Use before releases.                                  |
+| Slash command docs      | "`/fec-doc-sync` Sync README, docs, env examples, scripts, API/route notes, and deploy docs with the current project."                                                  | `/fec-doc-sync`       | Docs updates and verification.        | Use before releases.                                  |
 | Explicit agent          | "Delegate to `fec-code-reviewer` for a PR-style review of `src/features/payments/`, then summarize blockers first."                                                          | agent dispatch        | Specialized agent report and summary. | Best for focused expert review.                       |

package/docs/ja-JP/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 @@
 
 各ランタイムのパスと注意事項は [`docs/runtimes/`](../runtimes/) にあります。
 
-**13 の専門エージェント**、**40 の自動起動スキル**、**8 のスラッシュコマンド**、**5 のイベント駆動フック**、6 つのデザインツールエンドポイント向け **MCP 統合**、そして完全な**ルールライブラリ**をひとつのパッケージにまとめています。コマンドひとつ実行するだけで、チームのすべての AI セッションが React、Vue、Next.js、Nuxt を同じように書きます——型安全で、アクセシブルで、セキュアで、一貫性を持って。
+**13 の専門エージェント**、**41 の自動起動スキル**、**8 のスラッシュコマンド**、**5 のイベント駆動フック**、6 つのデザインツールエンドポイント向け **MCP 統合**、そして完全な**ルールライブラリ**をひとつのパッケージにまとめています。コマンドひとつ実行するだけで、チームのすべての AI セッションが React、Vue、Next.js、Nuxt を同じように書きます——型安全で、アクセシブルで、セキュアで、一貫性を持って。
 
 ---
 
@@ -40,7 +40,7 @@
 
 | 課題                                                                          | frontend-craft の解決策                                                                                        |
 | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| AI アシスタントが一貫性のない、型なしの、安全でないフロントエンドコードを書く | **40 のスキル**がチーム標準をエンコード——該当ファイルに触れると自動起動                                        |
+| AI アシスタントが一貫性のない、型なしの、安全でないフロントエンドコードを書く | **41 のスキル**がチーム標準をエンコード——該当ファイルに触れると自動起動                                        |
 | AI ツールごとにプラグイン形式が異なる                                         | **ひとつの CLI** で同じルール、エージェント、フックを 15 のランタイムにインストール                            |
 | デザインからコードへの受け渡しで情報が失われる                                | **MCP 統合**が Figma、Figma Desktop、Sketch、MasterGo、Pixso、墨刀からより豊富なデザインコンテキストを取り込み |
 | レビューが場当たり的で浅い                                                    | **13 のエージェント**がグレード付きレポートを出力：コード、セキュリティ、a11y、パフォーマンス、TS、UI 忠実度   |
@@ -53,45 +53,59 @@
 
 **Node.js 22+** が必要です。**Windows、macOS、Linux** で動作します（すべてのフックとスクリプトは Node.js で実装）。
 
-### 方法 1：グローバル CLI でプロジェクトを初期化（推奨）
+### 方法 1：fec CLI をグローバルインストール（推奨）
 
 ```bash
-npm install -g frontend-craft@latest
+# 1. fec コマンドをグローバルにインストール
+npm install -g @bovinphang/frontend-craft@latest
+
+# 2. フロントエンドプロジェクトへ移動
 cd your-project
-fec init
-fec init codex      # 特定のランタイム向けに初期化
-fec init claude     # Claude Code 向けに初期化
-```
 
-`fec init` は現在のプロジェクトを初期化するターミナル CLI コマンドです。対話型ターミナルでは、runtime を省略すると選択プロンプトが表示されます。非対話環境で runtime を省略した場合、CLI は `claude` を既定値にします。`init` は明示的に `--global` を渡さない限り、既定で現在のプロジェクトへインストールします。例：`fec init codex --global`。AI アシスタント内の `/fec-init` スラッシュコマンドは別の入口で、先に frontend-craft を対象ランタイムへインストールしてから使用します。
+# 3. 接続する AI ランタイムを対話的に選択
+fec setup
 
-### 方法 2：グローバルインストール不要の対話ウィザード
+# 4. 現在のプロジェクトに接続
+fec setup codex
+fec setup claude
+fec setup all
 
-```bash
-npx frontend-craft@latest
+# 5. グローバル接続、すべてのプロジェクトで利用
+fec setup codex --global
+fec setup claude --global
+fec setup all --global
+
+# 6. プレビュー / 確認
+fec install --all --dry-run --global
+fec list
 ```
 
-グローバルな `fec` コマンドをインストールしたくない場合はこちらを使います。ウィザードは完全なインストール手順を案内します。まず 1 つ以上のランタイムを選択し、次にグローバルまたは現在のプロジェクトへインストールするかを決定します。
+`npm install -g` は `fec` ターミナルコマンドだけをインストールします。`fec setup` は frontend-craft をプロジェクトに接続するターミナル CLI コマンドで、AI アシスタント内の `/fec-init` スラッシュコマンドとは別です。対話型ターミナルでは、引数なしの `fec setup` が runtime の選択を求めます。`fec setup <runtime>` と `fec setup all` は既定で現在のプロジェクトに接続します。`--global` を渡した場合だけ、選択した AI ツールのグローバル設定ディレクトリに接続され、すべてのプロジェクトで利用できます。
 
-### 方法 3：スクリプト向けインストール
+### 方法 2：npx で一時実行（グローバル fec 不要）
 
 ```bash
-# 現在のプロジェクトにインストール
-npx frontend-craft@latest install --local claude
-
-# あるランタイムにグローバルインストール
-npx frontend-craft@latest install --global codex
-
-# すべてのランタイムへのインストール内容をプレビュー（実際には書き込まない）
-npx frontend-craft@latest install --all --dry-run --global
-
-# 対応ランタイムを一覧表示
-npx frontend-craft@latest list
+# 1. 対話ウィザード
+npx @bovinphang/frontend-craft@latest
+
+# 2. 現在のプロジェクトに接続
+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. グローバル接続、すべてのプロジェクトで利用
+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. プレビュー / 確認
+npx @bovinphang/frontend-craft@latest install --all --dry-run --global
+npx @bovinphang/frontend-craft@latest list
 ```
 
-> **CI / スクリプト環境：** 常に `--global` / `-g` または `--local` / `-l` を指定してください。TTY でなく未指定の場合、CLI は `claude --global` をデフォルトとします。
+グローバルな `fec` コマンドをインストールしたくない場合は `npx` を使います。引数なしでは対話ウィザードを開きます。まず 1 つ以上のランタイムを選択し、次にグローバルまたは現在のプロジェクトへ接続するかを決定します。すべての runtime をスクリプトでインストールする場合は `install --all --local` または `install --all --global` を使い、`install all` とは書きません。CI / スクリプト環境では常に `--global` / `-g` または `--local` / `-l` を指定してください。TTY でなく未指定の場合、CLI は `claude --global` をデフォルトとします。
 
-### 方法 4：Claude Code Marketplace
+### 方法 3：Claude Code Marketplace
 
 Claude Code ユーザーには、**Claude Code Marketplace** からの单一ソースでのインストールを推奨します。CLI を Claude 用に使うのは、クロスランタイムインストール、スクリプト/オフラインのファイルコピー、または非 Marketplace 環境の場合に限ってください。
 
@@ -133,7 +147,7 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 ```text
 あなた：「マージ前に最近の変更をレビューして。アーキテクチャ、型安全性、レンダリング挙動、スタイル、アクセシビリティ、足りないテストを重点的に見て。」
 あなた：「コードを書く前に、アカウント請求機能を計画して。ルート構成、コンポーネント境界、データフロー、状態の所有、バリデーションフロー、リリースリスクを含めて。」
-あなた：「React Hook Form + Zod で、ファイルアップロード、条件付きフィールド、非同期バリデーション、アクセシブルなエラーを含む複数ステップ登録フォームを作って。」
+あなた：「複数ステップ登録フォームを作って。プロジェクトのフレームワークに合うフォームと schema バリデーションの方針を選び、ファイルアップロード、条件付きフィールド、非同期バリデーション、アクセシブルなエラーを含めて。」
 あなた：「Figma ノード 123:456 に基づいて UI を実装して。既存の design token とコンポーネントを再利用し、余白とレスポンシブ状態を合わせ、前提も記録して。」
 あなた：「`/fec-refactor-clean` このモジュールのデッドコードを整理して。」
 ```
@@ -155,13 +169,13 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 | `/fec-tdd`            | 赤 → 緑 → リファクタリングのフロントエンド TDD ループ               | —                                                    |
 | `/fec-debug`          | フロントエンド問題の診断と修復：ビルド、ランタイム、UI、API 障害    | `debug-*.md`                                         |
 | `/fec-refactor-clean` | デッドコード、未使用 export、スタイル、依存関係を分類して安全に削除 | `refactor-clean-*.md`                                |
-| `/fec-doc-sync`       | README、ランタイムドキュメント、機能表、メタデータを同期            | —                                                    |
+| `/fec-doc-sync`       | README、docs、環境変数、スクリプト、API/ルート説明、デプロイ文書を同期 | —                                                    |
 
 ### スキル（自動起動）
 
 スキルはファイルパターン、フレームワーク、タスクコンテキストに基づいて**自動起動**するワークフロー定義です。レビュー観点、出力規約、レポート形式をエンコードしています。
 
-以下のスキルはユースケース別に分類されているため、プロジェクト標準、実装、テスト、レビュー、デザイン、移行、ドキュメント保守のワークフローをすばやく見つけられます。
+以下のスキルはユースケース別に分類されているため、プロジェクト標準、実装、テスト、レビュー、デザイン、移行、プロジェクト進化、ドキュメント保守のワークフローをすばやく見つけられます。
 
 **プロジェクト標準** — 該当フレームワークが検出されると自動適用：
 
@@ -178,17 +192,17 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 
 | スキル                    | 範囲                                                                         |
 | ------------------------- | ---------------------------------------------------------------------------- |
-| `fec-data-fetching`       | TanStack Query / サーバー状態取得、キャッシュ、楽観的更新                    |
+| `fec-data-fetching`       | サーバー状態取得、キャッシュ、無効化、SSR、無限読み込み                      |
 | `fec-api-integration`     | 型付き API client、認証 refresh、アップロード、リアルタイム統合              |
 | `fec-state-management`    | 状態の所属、ストア選定、URL 状態、サーバー/フォーム/ローカル状態の境界       |
-| `fec-form-handling`       | React Hook Form + Zod、動的フィールド、アップロード、マルチステップ          |
+| `fec-form-handling`       | フレームワークに応じたフォーム選定、schema バリデーション、動的フィールド、アップロード |
 | `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies の選定                   |
 | `fec-route-protection`    | React Router、Next.js、Vue Router、Nuxt の認証・権限ルーティング             |
 | `fec-pwa-implementation`  | マニフェスト、サービスワーカー、オフラインキャッシュ、インストールプロンプト |
 | `fec-web-workers`         | Web Worker、Transferable、Comlink、ワーカープール                            |
 | `fec-canvas-threejs`      | Canvas 2D、Three.js、React Three Fiber、WebGL                                |
 | `fec-svg-animation`       | CSS / Framer Motion / GSAP SVG アニメーションと reduced-motion               |
-| `fec-list-virtualization` | react-window / TanStack Virtual による大規模リスト仮想化                     |
+| `fec-list-virtualization` | フレームワークに応じた大規模リスト仮想化、計測、グリッド、無限スクロール     |
 
 **テスト** — フロントエンドテストの計画や作成時に起動：
 
@@ -204,6 +218,7 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 | スキル                         | 範囲                                                                          |
 | ------------------------------ | ----------------------------------------------------------------------------- |
 | `fec-code-review`              | アーキテクチャ、型、レンダリング、スタイル、a11y レビュー                     |
+| `fec-debug-framework`          | ビルド、ランタイム、UI、API/データ障害の体系的な診断                          |
 | `fec-typescript-type-safety`   | 型契約、DTO マッピング、型ガード、ジェネリクス、型レベルチェック              |
 | `fec-security-review`          | XSS、CSRF、機密データ漏洩、入力検証                                           |
 | `fec-accessibility-check`      | WCAG 2.2、キーボード、フォーカス、タッチ、スクリーンリーダー動作              |
@@ -228,13 +243,19 @@ Marketplace が既にインストールされている場合、CLI は `--force`
 | スキル                           | 範囲                                                           |
 | -------------------------------- | -------------------------------------------------------------- |
 | `fec-legacy-web-standard`        | JS + jQuery + HTML のレガシープロジェクト開発・保守基準        |
-| `fec-legacy-to-modern-migration` | jQuery/MPA → React/Vue 3 + TS への移行戦略と段階的ワークフロー |
+| `fec-legacy-to-modern-migration` | レガシーフロントエンドのモダナイズ、ターゲットスタック選定、段階的ワークフロー |
+
+**プロジェクト進化** — 参照システムをプロジェクトネイティブな改善として吸収する時に起動：
+
+| スキル        | 範囲                                                               |
+| ------------- | ------------------------------------------------------------------ |
+| `fec-alchemy` | 参照システムの能力を独自のプロジェクトネイティブ設計として吸収 |
 
 **ドキュメント保守** — ドキュメント作業時に起動：
 
 | スキル                          | 範囲                                                               |
 | ------------------------------- | ------------------------------------------------------------------ |
-| `fec-doc-sync`                  | 公開ドキュメントをスクリプト、スキル、エージェント、コマンドと同期 |
+| `fec-doc-sync`                  | フロントエンド文書をコード、設定、スクリプト、ルート、API、環境変数、デプロイ事実と同期 |
 | `fec-source-driven-development` | プロジェクト事実と公式ソースでバージョン依存の判断を検証           |
 
 ### エージェント
@@ -365,11 +386,12 @@ $env:MODAO_TOKEN = "your-modao-token"
 すべてのレビュー、分析、評価は `reports/` にタイムスタンプ付き Markdown レポートとして書き出されます。これらは監査証跡および PR の成果物として機能します。
 
 <details>
-<summary>全 15 レポートタイプを表示</summary>
+<summary>全 16 レポートタイプを表示</summary>
 
 | レポートタイプ           | ファイル名パターン                           | 生成元                                                              |
 | ------------------------ | -------------------------------------------- | ------------------------------------------------------------------- |
 | コードレビュー           | `code-review-YYYY-MM-DD-HHmmss.md`           | `/fec-review`、`fec-code-review`、`fec-code-reviewer`               |
+| デバッグ診断             | `debug-YYYY-MM-DD-HHmmss.md`                 | `/fec-debug`、`fec-debug-framework`、`fec-debugger`                 |
 | TypeScript / JS レビュー | `typescript-review-YYYY-MM-DD-HHmmss.md`     | `fec-typescript-reviewer`                                           |
 | セキュリティレビュー     | `security-review-YYYY-MM-DD-HHmmss.md`       | `fec-security-review`、`fec-security-reviewer`                      |
 | アクセシビリティ         | `accessibility-review-YYYY-MM-DD-HHmmss.md`  | `fec-accessibility-check`                                           |
@@ -393,7 +415,7 @@ $env:MODAO_TOKEN = "your-modao-token"
 
 ## アップデートと削除
 
-`fec` は `frontend-craft` の短いコマンドです。グローバルの `fec` コマンドをインストールしていない場合は、同じ引数を `npx frontend-craft@latest` に渡してください。例：`npx frontend-craft@latest update`。
+`fec` は `frontend-craft` の短いコマンドです。グローバルの `fec` コマンドをインストールしていない場合は、同じ引数を `npx @bovinphang/frontend-craft@latest` に渡してください。例：`npx @bovinphang/frontend-craft@latest update`。
 
 ### アップデート
 
@@ -437,7 +459,7 @@ npx skills check                           # 利用可能なアップデート
 
 | CLI                  | インストール内容                                                              |
 | -------------------- | ----------------------------------------------------------------------------- |
-| `npx frontend-craft` | スキル + ランタイム固有のエージェント、コマンド、フック、ルール、テンプレート |
+| `npx @bovinphang/frontend-craft` | スキル + ランタイム固有のエージェント、コマンド、フック、ルール、テンプレート |
 | `npx skills`         | スキルのみ（既存の Skills CLI ワークフロー向け）                              |
 
 テレメトリを無効化：`DISABLE_TELEMETRY=1`。詳細は [skills.sh CLI ドキュメント](https://skills.sh/docs/cli) を参照。

package/docs/ko-KR/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 @@
 
 각 런타임의 경로와 주의사항은 [`docs/runtimes/`](../runtimes/)에 있습니다.
 
-**13개의 전문 에이전트**, **40개의 자동 활성화 스킬**, **8개의 슬래시 명령어**, **5개의 이벤트 기반 훅**, 6개 디자인 도구 엔드포인트를 위한 **MCP 통합**, 그리고 완전한 **규칙 라이브러리**를 하나의 설치 가능한 패키지로 묶었습니다. 명령어 하나만 실행하면, 팀의 모든 AI 세션이 React, Vue, Next.js, Nuxt를 같은 방식으로 작성합니다 — 타입 안전하고, 접근성 있고, 안전하며, 일관성 있게.
+**13개의 전문 에이전트**, **41개의 자동 활성화 스킬**, **8개의 슬래시 명령어**, **5개의 이벤트 기반 훅**, 6개 디자인 도구 엔드포인트를 위한 **MCP 통합**, 그리고 완전한 **규칙 라이브러리**를 하나의 설치 가능한 패키지로 묶었습니다. 명령어 하나만 실행하면, 팀의 모든 AI 세션이 React, Vue, Next.js, Nuxt를 같은 방식으로 작성합니다 — 타입 안전하고, 접근성 있고, 안전하며, 일관성 있게.
 
 ---
 
@@ -40,7 +40,7 @@
 
 | 문제점                                                                       | frontend-craft의 해결책                                                                                     |
 | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| AI 어시스턴트가 일관성 없고, 타입 없고, 안전하지 않은 프론트엔드 코드를 작성 | **40개 스킬**이 팀 표준을 인코딩 — 해당 파일을 건드릴 때 자동 활성화                                        |
+| AI 어시스턴트가 일관성 없고, 타입 없고, 안전하지 않은 프론트엔드 코드를 작성 | **41개 스킬**이 팀 표준을 인코딩 — 해당 파일을 건드릴 때 자동 활성화                                        |
 | AI 도구마다 플러그인 형식이 다름                                             | **하나의 CLI**로 동일한 규칙, 에이전트, 훅을 15개 런타임에 설치                                             |
 | 디자인에서 코드로의 전달 과정에서 정보 손실                                  | **MCP 통합**이 Figma, Figma Desktop, Sketch, MasterGo, Pixso, 墨刀에서 더 풍부한 디자인 컨텍스트를 가져오기 |
 | 리뷰가 즉흥적이고 얕음                                                       | **13개 에이전트**가 등급별 보고서 출력: 코드, 보안, 접근성, 성능, TS, UI 충실도                             |
@@ -53,45 +53,59 @@
 
 **Node.js 22+**가 필요합니다. **Windows, macOS, Linux**에서 동작합니다(모든 훅과 스크립트는 Node.js로 구현).
 
-### 방법 1: 전역 CLI로 프로젝트 초기화 (권장)
+### 방법 1: fec CLI 전역 설치 (권장)
 
 ```bash
-npm install -g frontend-craft@latest
+# 1. fec 명령어를 전역으로 설치
+npm install -g @bovinphang/frontend-craft@latest
+
+# 2. 프론트엔드 프로젝트로 이동
 cd your-project
-fec init
-fec init codex      # 특정 런타임으로 초기화
-fec init claude     # Claude Code로 초기화
-```
 
-`fec init`은 현재 프로젝트를 초기화하는 터미널 CLI 명령어입니다. 대화형 터미널에서는 runtime을 생략하면 선택 프롬프트가 표시됩니다. 비대화형 환경에서 runtime을 생략하면 CLI는 `claude`를 기본값으로 사용합니다. `init`은 명시적으로 `--global`을 전달하지 않는 한 기본적으로 현재 프로젝트에 설치합니다. 예: `fec init codex --global`. AI 어시스턴트 안의 `/fec-init` 슬래시 명령어는 별도 진입점이며, 먼저 frontend-craft를 대상 런타임에 설치한 뒤 사용합니다.
+# 3. 연결할 AI 런타임을 대화형으로 선택
+fec setup
 
-### 방법 2: 전역 설치 없는 대화형 마법사
+# 4. 현재 프로젝트에 연결
+fec setup codex
+fec setup claude
+fec setup all
 
-```bash
-npx frontend-craft@latest
+# 5. 전역 연결, 모든 프로젝트에서 사용
+fec setup codex --global
+fec setup claude --global
+fec setup all --global
+
+# 6. 미리보기 / 조회
+fec install --all --dry-run --global
+fec list
 ```
 
-전역 `fec` 명령어를 설치하고 싶지 않을 때 이 방식을 사용합니다. 마법사는 전체 설치 흐름을 안내합니다. 먼저 하나 이상의 런타임을 선택한 다음, 전역 또는 현재 프로젝트에 설치할지 결정합니다.
+`npm install -g`는 `fec` 터미널 명령어만 설치합니다. `fec setup`은 frontend-craft를 프로젝트에 연결하는 터미널 CLI 명령어이며, AI 어시스턴트 안의 `/fec-init` 슬래시 명령어와는 다릅니다. 대화형 터미널에서 인자 없는 `fec setup`은 runtime 선택을 먼저 요청합니다. `fec setup <runtime>`과 `fec setup all`은 기본적으로 현재 프로젝트에 연결합니다. `--global`을 전달할 때만 선택한 AI 도구의 전역 설정 디렉터리에 연결되어 모든 프로젝트에서 사용할 수 있습니다.
 
-### 방법 3: 스크립트 설치
+### 방법 2: npx로 임시 실행 (전역 fec 불필요)
 
 ```bash
-# 현재 프로젝트에 설치
-npx frontend-craft@latest install --local claude
-
-# 특정 런타임에 전역 설치
-npx frontend-craft@latest install --global codex
-
-# 모든 런타임의 설치 내용 미리보기 (실제 작성하지 않음)
-npx frontend-craft@latest install --all --dry-run --global
-
-# 지원되는 런타임 목록
-npx frontend-craft@latest list
+# 1. 대화형 마법사
+npx @bovinphang/frontend-craft@latest
+
+# 2. 현재 프로젝트에 연결
+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. 전역 연결, 모든 프로젝트에서 사용
+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. 미리보기 / 조회
+npx @bovinphang/frontend-craft@latest install --all --dry-run --global
+npx @bovinphang/frontend-craft@latest list
 ```
 
-> **CI / 스크립트 환경:** 항상 `--global` / `-g` 또는 `--local` / `-l`을 지정하세요. TTY가 아니고 미지정 시, CLI는 `claude --global`을 기본값으로 합니다.
+전역 `fec` 명령어를 설치하고 싶지 않을 때는 `npx`를 사용합니다. 인자 없이 실행하면 대화형 마법사가 열립니다. 먼저 하나 이상의 런타임을 선택한 다음, 전역 또는 현재 프로젝트에 연결할지 결정합니다. 모든 runtime을 스크립트로 설치할 때는 `install --all --local` 또는 `install --all --global`을 사용하고, `install all`이라고 쓰지 않습니다. CI / 스크립트 환경에서는 항상 `--global` / `-g` 또는 `--local` / `-l`을 지정하세요. TTY가 아니고 미지정 시, CLI는 `claude --global`을 기본값으로 합니다.
 
-### 방법 4: Claude Code Marketplace
+### 방법 3: Claude Code Marketplace
 
 Claude Code 사용자라면 **Claude Code Marketplace**를 단일 소스 설치 방식으로 권장합니다. CLI를 Claude에 사용하는 것은 교차 런타임 설치, 스크립트/오프라인 파일 복사, 또는 비 Marketplace 환경이 필요한 경우에만 사용하세요.
 
@@ -133,7 +147,7 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 ```text
 사용자: "병합 전에 최근 변경사항을 리뷰해줘. 아키텍처, 타입 안전성, 렌더링 동작, 스타일, 접근성, 누락된 테스트를 중점적으로 봐줘."
 사용자: "코딩하기 전에 계정 결제 기능을 계획해줘: 라우트 구조, 컴포넌트 경계, 데이터 흐름, 상태 소유권, 검증 흐름, 출시 리스크까지."
-사용자: "React Hook Form + Zod로 파일 업로드, 조건부 필드, 비동기 검증, 접근 가능한 오류가 포함된 다단계 등록 폼을 만들어줘."
+사용자: "다단계 등록 폼을 만들어줘. 프로젝트 프레임워크에 맞는 폼과 schema 검증 방식을 선택하고, 파일 업로드, 조건부 필드, 비동기 검증, 접근 가능한 오류를 포함해줘."
 사용자: "Figma 노드 123:456을 기준으로 UI를 구현해줘. 기존 design token과 컴포넌트를 재사용하고, 간격과 반응형 상태를 맞추고, 가정도 문서화해줘."
 사용자: "`/fec-refactor-clean` 이 모듈의 데드 코드를 정리해줘."
 ```
@@ -155,13 +169,13 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 | `/fec-tdd`            | 빨강 → 초록 → 리팩토링 프론트엔드 TDD 루프                        | —                                                  |
 | `/fec-debug`          | 프론트엔드 문제 진단 및 수정: 빌드, 런타임, UI, API 장애          | `debug-*.md`                                       |
 | `/fec-refactor-clean` | 데드 코드, 미사용 export, 스타일, 의존성을 분류하고 안전하게 제거 | `refactor-clean-*.md`                              |
-| `/fec-doc-sync`       | README, 런타임 문서, 기능 표, 메타데이터 동기화                   | —                                                  |
+| `/fec-doc-sync`       | README, docs, 환경 변수, 스크립트, API/라우트 설명, 배포 문서 동기화 | —                                                  |
 
 ### 스킬 (자동 활성화)
 
 스킬은 파일 패턴, 프레임워크, 또는 작업 컨텍스트에 기반하여 **자동으로 활성화**되는 워크플로 정의입니다. 리뷰 관점, 출력 규칙, 보고서 형식을 인코딩합니다.
 
-아래 스킬은 사용 사례별로 묶여 있어 프로젝트 표준, 구현, 테스트, 리뷰, 디자인, 마이그레이션, 문서 유지보수 워크플로를 빠르게 찾을 수 있습니다.
+아래 스킬은 사용 사례별로 묶여 있어 프로젝트 표준, 구현, 테스트, 리뷰, 디자인, 마이그레이션, 프로젝트 진화, 문서 유지보수 워크플로를 빠르게 찾을 수 있습니다.
 
 **프로젝트 표준** — 해당 프레임워크가 감지되면 자동 적용:
 
@@ -178,17 +192,17 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 
 | 스킬                      | 범위                                                          |
 | ------------------------- | ------------------------------------------------------------- |
-| `fec-data-fetching`       | TanStack Query / 서버 상태 페칭, 캐시, 낙관적 업데이트        |
+| `fec-data-fetching`       | 서버 상태 페칭, 캐시, 무효화, SSR, 무한 로딩                  |
 | `fec-api-integration`     | Typed API client, 인증 refresh, 업로드, 실시간 통합           |
 | `fec-state-management`    | 상태 소유권, 스토어 선택, URL 상태, 서버/폼/로컬 상태 경계    |
-| `fec-form-handling`       | React Hook Form + Zod, 동적 필드, 업로드, 멀티스텝            |
+| `fec-form-handling`       | 프레임워크별 폼 선택, schema 검증, 동적 필드, 업로드          |
 | `fec-browser-storage`     | localStorage / sessionStorage / IndexedDB / Cookies 선택      |
 | `fec-route-protection`    | React Router, Next.js, Vue Router, Nuxt의 인증 및 권한 라우팅 |
 | `fec-pwa-implementation`  | 매니페스트, 서비스 워커, 오프라인 캐시, 설치 프롬프트         |
 | `fec-web-workers`         | Web Worker, Transferable, Comlink, 워커 풀                    |
 | `fec-canvas-threejs`      | Canvas 2D, Three.js, React Three Fiber, WebGL                 |
 | `fec-svg-animation`       | CSS / Framer Motion / GSAP SVG 애니메이션과 reduced-motion    |
-| `fec-list-virtualization` | react-window / TanStack Virtual를 이용한 대규모 리스트 가상화 |
+| `fec-list-virtualization` | 프레임워크별 대규모 리스트 가상화, 측정, 그리드, 무한 스크롤 |
 
 **테스트** — 프론트엔드 테스트 범위를 계획하거나 작성할 때 활성화:
 
@@ -204,6 +218,7 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 | 스킬                           | 범위                                                            |
 | ------------------------------ | --------------------------------------------------------------- |
 | `fec-code-review`              | 아키텍처, 타입, 렌더링, 스타일, 접근성 리뷰                     |
+| `fec-debug-framework`          | 빌드, 런타임, UI, API/데이터 장애의 체계적 진단                 |
 | `fec-typescript-type-safety`   | 타입 계약, DTO 매핑, 타입 가드, 제네릭, 타입 수준 검사          |
 | `fec-security-review`          | XSS, CSRF, 민감 데이터 유출, 입력 검증                          |
 | `fec-accessibility-check`      | WCAG 2.2, 키보드, 포커스, 터치, 스크린 리더 동작                |
@@ -228,13 +243,19 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 | 스킬                             | 범위                                                               |
 | -------------------------------- | ------------------------------------------------------------------ |
 | `fec-legacy-web-standard`        | JS + jQuery + HTML 레거시 프로젝트 개발 및 유지보수 기준           |
-| `fec-legacy-to-modern-migration` | jQuery/MPA → React/Vue 3 + TS 마이그레이션 전략 및 단계별 워크플로 |
+| `fec-legacy-to-modern-migration` | 레거시 프론트엔드 현대화, 대상 스택 선택, 단계별 워크플로 |
+
+**프로젝트 진화** — 참조 시스템을 프로젝트 네이티브 개선으로 흡수할 때 활성화:
+
+| 스킬          | 범위                                                  |
+| ------------- | ----------------------------------------------------- |
+| `fec-alchemy` | 참조 시스템 역량을 독창적인 프로젝트 네이티브 설계로 흡수 |
 
 **문서 유지보수** — 문서 작업에서 활성화:
 
 | 스킬                            | 범위                                                  |
 | ------------------------------- | ----------------------------------------------------- |
-| `fec-doc-sync`                  | 공개 문서를 스크립트, 스킬, 에이전트, 명령어와 동기화 |
+| `fec-doc-sync`                  | 프론트엔드 문서를 코드, 설정, 스크립트, 라우트, API, 환경 변수, 배포 사실과 동기화 |
 | `fec-source-driven-development` | 프로젝트 사실과 공식 소스로 버전 의존 결정을 검증     |
 
 ### 에이전트
@@ -365,11 +386,12 @@ $env:MODAO_TOKEN = "your-modao-token"
 모든 리뷰, 분석, 평가는 `reports/`에 타임스탬프가 찍힌 Markdown 보고서로 작성됩니다. 이는 감사 추적 및 PR 산출물로 기능합니다.
 
 <details>
-<summary>전체 15개 보고서 유형 보기</summary>
+<summary>전체 16개 보고서 유형 보기</summary>
 
 | 보고서 유형          | 파일명 패턴                                  | 생성 출처                                                           |
 | -------------------- | -------------------------------------------- | ------------------------------------------------------------------- |
 | 코드 리뷰            | `code-review-YYYY-MM-DD-HHmmss.md`           | `/fec-review`, `fec-code-review`, `fec-code-reviewer`               |
+| 디버그 진단          | `debug-YYYY-MM-DD-HHmmss.md`                 | `/fec-debug`, `fec-debug-framework`, `fec-debugger`                 |
 | TypeScript / JS 리뷰 | `typescript-review-YYYY-MM-DD-HHmmss.md`     | `fec-typescript-reviewer`                                           |
 | 보안 리뷰            | `security-review-YYYY-MM-DD-HHmmss.md`       | `fec-security-review`, `fec-security-reviewer`                      |
 | 접근성               | `accessibility-review-YYYY-MM-DD-HHmmss.md`  | `fec-accessibility-check`                                           |
@@ -393,7 +415,7 @@ $env:MODAO_TOKEN = "your-modao-token"
 
 ## 업데이트와 제거
 
-`fec`는 `frontend-craft`의 짧은 명령어입니다. 전역 `fec` 명령어를 설치하지 않았다면 같은 인자를 `npx frontend-craft@latest` 뒤에 붙여 사용하세요. 예: `npx frontend-craft@latest update`.
+`fec`는 `frontend-craft`의 짧은 명령어입니다. 전역 `fec` 명령어를 설치하지 않았다면 같은 인자를 `npx @bovinphang/frontend-craft@latest` 뒤에 붙여 사용하세요. 예: `npx @bovinphang/frontend-craft@latest update`.
 
 ### 업데이트
 
@@ -437,7 +459,7 @@ npx skills check                           # 사용 가능한 업데이트 미
 
 | CLI                  | 설치 내용                                             |
 | -------------------- | ----------------------------------------------------- |
-| `npx frontend-craft` | 스킬 + 런타임 전용 에이전트, 명령어, 훅, 규칙, 템플릿 |
+| `npx @bovinphang/frontend-craft` | 스킬 + 런타임 전용 에이전트, 명령어, 훅, 규칙, 템플릿 |
 | `npx skills`         | 스킬만 (기존 Skills CLI 워크플로용)                   |
 
 텔레메트리 비활성화: `DISABLE_TELEMETRY=1`. 자세한 내용은 [skills.sh CLI 문서](https://skills.sh/docs/cli) 참조.

package/docs/runtimes/antigravity.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install antigravity
+npx @bovinphang/frontend-craft install antigravity
 ```
 
 > **Non-interactive:** append `--local` or `--global` to skip install-location prompts. See the repository README **Universal Install** for interactive vs. scripted behavior.

package/docs/runtimes/augment.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install augment
+npx @bovinphang/frontend-craft install augment
 ```
 
 > **Non-interactive:** append `--local` or `--global` to skip install-location prompts. See the repository README **Universal Install** for interactive vs. scripted behavior.

package/docs/runtimes/claude.md

@@ -5,9 +5,9 @@ Recommended path for most Claude Code users: install through **Claude Code Marke
 Use the CLI only when you need cross-runtime installation, offline/scripted file copies, or a non-Marketplace environment:
 
 ```bash
-npx frontend-craft@latest install --local claude
+npx @bovinphang/frontend-craft@latest install --local claude
 # or
-npx frontend-craft@latest install --global claude
+npx @bovinphang/frontend-craft@latest install --global claude
 ```
 
 > **Non-interactive:** append `--local` or `--global` to skip install-location prompts. See the repository README **Universal Install** for interactive vs. scripted behavior.
@@ -22,6 +22,8 @@ The CLI enforces this for Marketplace installs: if Claude Code Marketplace alrea
 
 You can install `frontend-craft` as a Claude Code marketplace plugin. This loads the plugin natively inside Claude Code.
 
+The Marketplace entry resolves the plugin from the published npm package, which includes the compiled `dist/hooks/*.js` runtime files used by Claude hooks. If a Marketplace install reports a missing `dist/hooks/fec-*.js` file, update or reinstall the Marketplace plugin so Claude refreshes its plugin cache instead of copying files into the cache manually.
+
 ---
 
 ## Quick start after Marketplace install
@@ -35,7 +37,7 @@ Get started in a few minutes:
 /plugin marketplace add bovinphang/frontend-craft
 
 # Install plugin
-/plugin install frontend-craft@bovinphang-frontend-craft
+/plugin install frontend-craft@frontend-craft
 
 # Activate
 /reload-plugins
@@ -69,7 +71,7 @@ After initialization, customize for your project:
 /fec-scaffold component DataTable
 
 # List available commands
-/plugin list frontend-craft@bovinphang-frontend-craft
+/plugin list frontend-craft@frontend-craft
 ```
 
 You now have access to the bundled agents, skills, and commands (see the root README **Feature overview** for the current list).
@@ -107,10 +109,14 @@ Clone the repo and load via `--plugin-dir` (no install, suitable for development
 
 ```bash
 git clone https://github.com/bovinphang/frontend-craft.git
+cd frontend-craft
+npm install
+npm run build
+cd ..
 claude --plugin-dir ./frontend-craft
 ```
 
-When using `--plugin-dir` for development, disable or avoid a Marketplace install of the same plugin in that session so you know which copy is running.
+When using `--plugin-dir` for development, run `npm run build` after changing hook or CLI sources because Claude executes the compiled files under `dist/`. Disable or avoid a Marketplace install of the same plugin in that session so you know which copy is running.
 
 ### Option 4: Git Submodule (project-level sharing)
 
@@ -141,14 +147,14 @@ claude --plugin-dir .claude/plugins/frontend-craft
 For Marketplace installs, run in Claude Code:
 
 ```text
-/plugin marketplace update bovinphang-frontend-craft
+/plugin marketplace update frontend-craft
 ```
 
 Or enable auto-update so Claude Code pulls the latest on each start:
 
 1. Run `/plugin` in Claude Code to open the plugin manager
 2. Switch to the **Marketplaces** tab
-3. Select `bovinphang-frontend-craft`
+3. Select `frontend-craft`
 4. Choose **Enable auto-update**
 
 > Third-party Marketplaces do not enable auto-update by default. After enabling, Claude Code will refresh Marketplace data and update installed plugins on each start.
@@ -159,11 +165,11 @@ For Git submodule installs:
 git submodule update --remote .claude/plugins/frontend-craft
 ```
 
-**CLI installs:** re-run `npx frontend-craft@latest update claude --local` or `... --global` for the same scope, and read [CHANGELOG.md](../../CHANGELOG.md) for release notes. If Claude Code Marketplace is already installed, the CLI refuses Claude install/update and prints the Marketplace update path. If the opposite CLI scope is already installed, interactive terminals ask whether to keep that source updated or uninstall it before switching; non-interactive terminals print the exact commands to run.
+**CLI installs:** re-run `npx @bovinphang/frontend-craft@latest update claude --local` or `... --global` for the same scope, and read [CHANGELOG.md](../../CHANGELOG.md) for release notes. If Claude Code Marketplace is already installed, the CLI refuses Claude install/update and prints the Marketplace update path. If the opposite CLI scope is already installed, interactive terminals ask whether to keep that source updated or uninstall it before switching; non-interactive terminals print the exact commands to run.
 
 ```bash
-npx frontend-craft@latest update claude --global
-npx frontend-craft@latest update claude --local
+npx @bovinphang/frontend-craft@latest update claude --global
+npx @bovinphang/frontend-craft@latest update claude --local
 ```
 
 ---