@bovinphang/frontend-craft 2.5.0 → 2.7.0

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개의 전문 에이전트**, **45개의 자동 활성화 스킬**, **8개의 슬래시 명령어**, **5개의 이벤트 기반 훅**, 6개 디자인 도구 엔드포인트를 위한 **MCP 통합**, 그리고 완전한 **규칙 라이브러리**를 하나의 설치 가능한 패키지로 묶었습니다. 명령어 하나만 실행하면, 팀의 모든 AI 세션이 React, Vue, Next.js, Nuxt를 같은 방식으로 작성합니다 — 타입 안전하고, 접근성 있고, 안전하며, 일관성 있게.
 
 ---
 
@@ -40,7 +40,7 @@
 
 | 문제점                                                                       | frontend-craft의 해결책                                                                                     |
 | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| AI 어시스턴트가 일관성 없고, 타입 없고, 안전하지 않은 프론트엔드 코드를 작성 | **40개 스킬**이 팀 표준을 인코딩 — 해당 파일을 건드릴 때 자동 활성화                                        |
+| AI 어시스턴트가 일관성 없고, 타입 없고, 안전하지 않은 프론트엔드 코드를 작성 | **45개 스킬**이 팀 표준을 인코딩 — 해당 파일을 건드릴 때 자동 활성화                                        |
 | 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` 이 모듈의 데드 코드를 정리해줘."
 ```
@@ -146,49 +160,50 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 
 슬래시 명령어는 구조화된 워크플로의 주요 진입점입니다. 대부분 `reports/`에 타임스탬프가 찍힌 Markdown 보고서를 출력합니다.
 
-| 명령어                | 용도                                                              | 보고서                                             |
-| --------------------- | ----------------------------------------------------------------- | -------------------------------------------------- |
-| `/fec-init`           | 프로젝트 템플릿 초기화 (CLAUDE.md, 규칙, 설정)                    | —                                                  |
-| `/fec-review`         | 지정되거나 최근 변경된 파일의 구조화된 리뷰                       | `code-review-*.md`                                 |
-| `/fec-scaffold`       | 규칙에 따라 page / feature / component 보일러플레이트 생성        | —                                                  |
-| `/fec-plan`           | 통합 계획: 구현 아키텍처 또는 테스트 전략                         | `architecture-proposal-*.md` 또는 `test-plan-*.md` |
-| `/fec-tdd`            | 빨강 → 초록 → 리팩토링 프론트엔드 TDD 루프                        | —                                                  |
-| `/fec-debug`          | 프론트엔드 문제 진단 및 수정: 빌드, 런타임, UI, API 장애          | `debug-*.md`                                       |
-| `/fec-refactor-clean` | 데드 코드, 미사용 export, 스타일, 의존성을 분류하고 안전하게 제거 | `refactor-clean-*.md`                              |
-| `/fec-doc-sync`       | README, 런타임 문서, 기능 표, 메타데이터 동기화                   | —                                                  |
+| 명령어                | 용도                                                                 | 보고서                                             |
+| --------------------- | -------------------------------------------------------------------- | -------------------------------------------------- |
+| `/fec-init`           | 프로젝트 템플릿 초기화 (CLAUDE.md, 규칙, 설정)                       | —                                                  |
+| `/fec-review`         | 지정되거나 최근 변경된 파일의 구조화된 리뷰                          | `code-review-*.md`                                 |
+| `/fec-scaffold`       | 규칙에 따라 page / feature / component 보일러플레이트 생성           | —                                                  |
+| `/fec-plan`           | 통합 계획: 구현 아키텍처 또는 테스트 전략                            | `architecture-proposal-*.md` 또는 `test-plan-*.md` |
+| `/fec-tdd`            | 빨강 → 초록 → 리팩토링 프론트엔드 TDD 루프                           | —                                                  |
+| `/fec-debug`          | 프론트엔드 문제 진단 및 수정: 빌드, 런타임, UI, API 장애             | `debug-*.md`                                       |
+| `/fec-refactor-clean` | 데드 코드, 미사용 export, 스타일, 의존성을 분류하고 안전하게 제거    | `refactor-clean-*.md`                              |
+| `/fec-doc-sync`       | README, docs, 환경 변수, 스크립트, API/라우트 설명, 배포 문서 동기화 | —                                                  |
 
 ### 스킬 (자동 활성화)
 
 스킬은 파일 패턴, 프레임워크, 또는 작업 컨텍스트에 기반하여 **자동으로 활성화**되는 워크플로 정의입니다. 리뷰 관점, 출력 규칙, 보고서 형식을 인코딩합니다.
 
-아래 스킬은 사용 사례별로 묶여 있어 프로젝트 표준, 구현, 테스트, 리뷰, 디자인, 마이그레이션, 문서 유지보수 워크플로를 빠르게 찾을 수 있습니다.
+아래 스킬은 사용 사례별로 묶여 있어 프로젝트 표준, 구현, 테스트, 리뷰, 디자인, 마이그레이션, 프로젝트 진화, 문서 유지보수 워크플로를 빠르게 찾을 수 있습니다.
 
 **프로젝트 표준** — 해당 프레임워크가 감지되면 자동 적용:
 
-| 스킬                            | 범위                                                         |
-| ------------------------------- | ------------------------------------------------------------ |
-| `fec-react-project-standard`    | React + TypeScript (구조, 컴포넌트, 라우팅, 상태, API 계층)  |
-| `fec-vue3-project-standard`     | Vue 3 + TypeScript (구조, 컴포넌트, 라우팅, Pinia, API 계층) |
-| `fec-nextjs-project-standard`   | Next.js 14+ App Router, SSR/SSG, 스트리밍, 메타데이터        |
-| `fec-nuxt-project-standard`     | Nuxt 3 SSR/SSG, Composition API, 데이터 페칭, 미들웨어       |
-| `fec-vite-project-standard`     | Vite 설정, 환경 변수 안전, HMR, 개발 프록시, 빌드 최적화     |
-| `fec-monorepo-project-standard` | pnpm workspace, Turborepo, Nx 구조 및 태스크 오케스트레이션  |
+| 스킬                              | 범위                                                         |
+| --------------------------------- | ------------------------------------------------------------ |
+| `fec-react-project-standard`      | React + TypeScript (구조, 컴포넌트, 라우팅, 상태, API 계층)  |
+| `fec-vue3-project-standard`       | Vue 3 + TypeScript (구조, 컴포넌트, 라우팅, Pinia, API 계층) |
+| `fec-nextjs-project-standard`     | Next.js 14+ App Router, SSR/SSG, 스트리밍, 메타데이터        |
+| `fec-nuxt-project-standard`       | Nuxt 3 SSR/SSG, Composition API, 데이터 페칭, 미들웨어       |
+| `fec-vite-project-standard`       | Vite 설정, 환경 변수 안전, HMR, 개발 프록시, 빌드 최적화     |
+| `fec-monorepo-project-standard`   | pnpm workspace, Turborepo, Nx 구조 및 태스크 오케스트레이션  |
+| `fec-typescript-project-standard` | TypeScript 설정, 공개 API 타입, 선언 파일, DTO, 제네릭       |
 
 **구현 기능** — 특정 프론트엔드 기능을 구축할 때 활성화:
 
 | 스킬                      | 범위                                                          |
 | ------------------------- | ------------------------------------------------------------- |
-| `fec-data-fetching`       | 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,7 +219,7 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 | 스킬                           | 범위                                                            |
 | ------------------------------ | --------------------------------------------------------------- |
 | `fec-code-review`              | 아키텍처, 타입, 렌더링, 스타일, 접근성 리뷰                     |
-| `fec-typescript-type-safety`   | 타입 계약, DTO 매핑, 타입 가드, 제네릭, 타입 수준 검사          |
+| `fec-debug-framework`          | 빌드, 런타임, UI, API/데이터 장애의 체계적 진단                 |
 | `fec-security-review`          | XSS, CSRF, 민감 데이터 유출, 입력 검증                          |
 | `fec-accessibility-check`      | WCAG 2.2, 키보드, 포커스, 터치, 스크린 리더 동작                |
 | `fec-dependency-upgrade`       | 의존성 업그레이드, lockfile 리뷰, CVE 수정, 마이그레이션 검증   |
@@ -214,28 +229,38 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 
 **디자인 UI** — 디자인 구현, 디자인 시스템, 시각적 마무리에서 활성화:
 
-| 스킬                          | 범위                                                               |
-| ----------------------------- | ------------------------------------------------------------------ |
-| `fec-ui-design`               | UI 방향, 시각적 정체성, polish, 상태, visual QA                    |
-| `fec-tailwind-design-system`  | Tailwind token, 테마 확장, variants, class 관리, dark mode         |
-| `fec-responsive-layout`       | 모바일 우선, container queries, 데이터 밀집 responsive UI          |
-| `fec-motion-interaction`      | 인터랙션 motion, 페이지 전환, 스크롤 animation, reduced-motion     |
-| `fec-implement-from-design`   | Figma/Sketch/MasterGo/Pixso/墨刀 디자인 또는 摹客 에셋에서 UI 구현 |
-| `fec-storybook-component-doc` | Storybook 컴포넌트 문서, 디자인 시스템 표시, 격리 상태 미리보기    |
+| 스킬                          | 범위                                                                                                                     |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `fec-ui-design`               | 제품 맥락 UI 방향, 반템플릿 디자인 다이얼, 미디어 전략, 상태, visual QA                                                  |
+| `fec-image-generation`        | 다이어그램, 이미지 생성/편집, 비주얼 에셋, PNG QA 및 수정 루프                                                           |
+| `fec-drawio-studio`           | 편집 가능한 draw.io / diagrams.net 기술 다이어그램, XML/Mermaid/CSV URL 핸드오프, shape 검색, 자동 레이아웃, 코드 구조도 |
+| `fec-web-video-presentation`  | 글, 스크립트, 레슨, demo를 녹화 가능한 16:9 step-driven 웹 프레젠테이션으로 변환                                         |
+| `fec-tailwind-design-system`  | Tailwind token, 테마 확장, variants, class 관리, dark mode                                                               |
+| `fec-responsive-layout`       | 모바일 우선, container queries, 데이터 밀집 responsive UI                                                                |
+| `fec-motion-interaction`      | 맥락 기반 motion 강도, 페이지 전환, 스크롤 animation, reduced-motion                                                     |
+| `fec-implement-from-design`   | 디자인 도구, 스크린샷 또는 section 단위 시각 참조에서 UI 구현                                                            |
+| `fec-storybook-component-doc` | Storybook 컴포넌트 문서, 디자인 시스템 표시, 격리 상태 미리보기                                                          |
 
 **레거시 마이그레이션** — 현대화 작업에서 활성화:
 
-| 스킬                             | 범위                                                               |
-| -------------------------------- | ------------------------------------------------------------------ |
-| `fec-legacy-web-standard`        | JS + jQuery + HTML 레거시 프로젝트 개발 및 유지보수 기준           |
-| `fec-legacy-to-modern-migration` | jQuery/MPA → React/Vue 3 + TS 마이그레이션 전략 및 단계별 워크플로 |
+| 스킬                             | 범위                                                      |
+| -------------------------------- | --------------------------------------------------------- |
+| `fec-legacy-web-standard`        | JS + jQuery + HTML 레거시 프로젝트 개발 및 유지보수 기준  |
+| `fec-legacy-to-modern-migration` | 레거시 프론트엔드 현대화, 대상 스택 선택, 단계별 워크플로 |
+
+**프로젝트 진화** — 참조 시스템을 프로젝트 네이티브 개선으로 흡수할 때 활성화:
+
+| 스킬          | 범위                                                      |
+| ------------- | --------------------------------------------------------- |
+| `fec-alchemy` | 참조 시스템 역량을 독창적인 프로젝트 네이티브 설계로 흡수 |
 
 **문서 유지보수** — 문서 작업에서 활성화:
 
-| 스킬                            | 범위                                                  |
-| ------------------------------- | ----------------------------------------------------- |
-| `fec-doc-sync`                  | 공개 문서를 스크립트, 스킬, 에이전트, 명령어와 동기화 |
-| `fec-source-driven-development` | 프로젝트 사실과 공식 소스로 버전 의존 결정을 검증     |
+| 스킬                               | 범위                                                                                 |
+| ---------------------------------- | ------------------------------------------------------------------------------------ |
+| `fec-backend-requirements-handoff` | Frontend-to-backend handoff for UI data needs, actions, states, rules, and questions |
+| `fec-doc-sync`                     | 프론트엔드 문서를 코드, 설정, 스크립트, 라우트, API, 환경 변수, 배포 사실과 동기화   |
+| `fec-source-driven-development`    | 프로젝트 사실과 공식 소스로 버전 의존 결정을 검증                                    |
 
 ### 에이전트
 
@@ -365,11 +390,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 +419,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`.
 
 ### 업데이트
 
@@ -435,10 +461,10 @@ npx skills update                          # 최신 버전으로 업데이트
 npx skills check                           # 사용 가능한 업데이트 미리보기
 ```
 
-| CLI                  | 설치 내용                                             |
-| -------------------- | ----------------------------------------------------- |
-| `npx frontend-craft` | 스킬 + 런타임 전용 에이전트, 명령어, 훅, 규칙, 템플릿 |
-| `npx skills`         | 스킬만 (기존 Skills CLI 워크플로용)                   |
+| CLI                              | 설치 내용                                             |
+| -------------------------------- | ----------------------------------------------------- |
+| `npx @bovinphang/frontend-craft` | 스킬 + 런타임 전용 에이전트, 명령어, 훅, 규칙, 템플릿 |
+| `npx skills`                     | 스킬만 (기존 Skills CLI 워크플로용)                   |
 
 텔레메트리 비활성화: `DISABLE_TELEMETRY=1`. 자세한 내용은 [skills.sh CLI 문서](https://skills.sh/docs/cli) 참조.
 

package/docs/project-structure.md

@@ -31,11 +31,11 @@ frontend-craft/
 |   |-- 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 files
+|   |-- 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-type-safety/   # Type contracts, DTO mapping, type guards, generics
+|   |-- 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
@@ -52,6 +52,7 @@ frontend-craft/
 |   |-- fec-monorepo-project-standard/  # pnpm workspace, Turborepo, Nx standards
 |   |-- 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-component-testing/          # RTL / Vue Test Utils component tests
@@ -62,8 +63,11 @@ frontend-craft/
 |   |-- 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/                  # UI direction, visual identity, polish, states, visual QA
-|   |-- fec-motion-interaction/         # Interaction motion, page transitions, scroll animation, reduced motion
+|   |-- 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-vite-project-standard/      # Vite config, env safety, HMR, proxy, build and library mode
 |
 |-- commands/         # Slash commands for quick execution

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
 ```
 
 ---

package/docs/runtimes/claude.zh-CN.md

@@ -5,9 +5,9 @@
 仅当你需要跨运行时安装、离线/脚本化复制文件，或处在非 Marketplace 环境时，再使用 CLI：
 
 ```bash
-npx frontend-craft@latest install --local claude
+npx @bovinphang/frontend-craft@latest install --local claude
 # 或
-npx frontend-craft@latest install --global claude
+npx @bovinphang/frontend-craft@latest install --global claude
 ```
 
 > **非交互场景：** 请加上 `--local` 或 `--global`，避免询问安装位置。交互与脚本行为说明见根目录 README **通用安装**。
@@ -22,6 +22,8 @@ CLI 会对 Marketplace 安装执行单一来源保护：如果已经由 Claude C
 
 仍可将 `frontend-craft` 作为 Claude Code 的 Marketplace 插件安装，由 Claude Code 原生加载插件。
 
+Marketplace 条目会从已发布的 npm 包解析插件；npm 包中包含 Claude hooks 使用的已编译 `dist/hooks/*.js` 运行时文件。如果 Marketplace 安装后提示缺少 `dist/hooks/fec-*.js`，请通过 Marketplace 更新或重新安装插件，让 Claude 刷新插件缓存，不建议手动复制文件到缓存目录。
+
 ---
 
 ## Marketplace 安装后的快速开始
@@ -33,7 +35,7 @@ CLI 会对 Marketplace 安装执行单一来源保护：如果已经由 Claude C
 /plugin marketplace add bovinphang/frontend-craft
 
 # 安装插件
-/plugin install frontend-craft@bovinphang-frontend-craft
+/plugin install frontend-craft@frontend-craft
 
 # 激活
 /reload-plugins
@@ -67,7 +69,7 @@ CLI 会对 Marketplace 安装执行单一来源保护：如果已经由 Claude C
 /fec-scaffold component DataTable
 
 # 查看可用命令
-/plugin list frontend-craft@bovinphang-frontend-craft
+/plugin list frontend-craft@frontend-craft
 ```
 
 具体 agents、skills、commands 清单见根目录 README **功能概览**。
@@ -105,10 +107,14 @@ CLI 会对 Marketplace 安装执行单一来源保护：如果已经由 Claude C
 
 ```bash
 git clone https://github.com/bovinphang/frontend-craft.git
+cd frontend-craft
+npm install
+npm run build
+cd ..
 claude --plugin-dir ./frontend-craft
 ```
 
-使用 `--plugin-dir` 做开发调试时，请避免在同一会话里同时启用 Marketplace 版本，这样才能确定当前运行的是哪一份代码。
+使用 `--plugin-dir` 做开发调试时，修改 hooks 或 CLI 源码后需要重新执行 `npm run build`，因为 Claude 会运行 `dist/` 下的已编译文件。请避免在同一会话里同时启用 Marketplace 版本，这样才能确定当前运行的是哪一份代码。
 
 ### 选项 4：Git Submodule（项目内共享）
 
@@ -139,14 +145,14 @@ claude --plugin-dir .claude/plugins/frontend-craft
 通过 Marketplace 安装的插件，在 Claude Code 中执行：
 
 ```text
-/plugin marketplace update bovinphang-frontend-craft
+/plugin marketplace update frontend-craft
 ```
 
 或开启自动更新，每次启动 Claude Code 时拉取最新版本：
 
 1. 在 Claude Code 中执行 `/plugin` 打开插件管理器
 2. 切换到 **Marketplaces** 标签页
-3. 选中 `bovinphang-frontend-craft`
+3. 选中 `frontend-craft`
 4. 选择 **Enable auto-update**
 
 > 第三方 Marketplace 默认不开启自动更新。启用后，Claude Code 每次启动时会刷新 Marketplace 数据并更新已安装插件。
@@ -157,11 +163,11 @@ claude --plugin-dir .claude/plugins/frontend-craft
 git submodule update --remote .claude/plugins/frontend-craft
 ```
 
-**CLI 安装：** 对同一作用域执行 `npx frontend-craft@latest update claude --local` 或 `... --global`，版本说明见 [CHANGELOG.zh-CN.md](../../CHANGELOG.zh-CN.md) 或 [CHANGELOG.md](../../CHANGELOG.md)。如果已经检测到 Claude Code Marketplace 安装，CLI 会拒绝 Claude install/update，并提示通过 Marketplace 更新。如果另一个 CLI 作用域已安装，交互式终端会询问是保持该来源并更新，还是卸载后切换；非交互终端会打印可执行命令。
+**CLI 安装：** 对同一作用域执行 `npx @bovinphang/frontend-craft@latest update claude --local` 或 `... --global`，版本说明见 [CHANGELOG.zh-CN.md](../../CHANGELOG.zh-CN.md) 或 [CHANGELOG.md](../../CHANGELOG.md)。如果已经检测到 Claude Code Marketplace 安装，CLI 会拒绝 Claude install/update，并提示通过 Marketplace 更新。如果另一个 CLI 作用域已安装，交互式终端会询问是保持该来源并更新，还是卸载后切换；非交互终端会打印可执行命令。
 
 ```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
 ```
 
 ---

package/docs/runtimes/cline.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install cline
+npx @bovinphang/frontend-craft install cline
 ```
 
 > **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/codebuddy.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install codebuddy
+npx @bovinphang/frontend-craft install codebuddy
 ```
 
 > **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/codex.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install codex
+npx @bovinphang/frontend-craft install codex
 ```
 
 > **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/copilot.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install copilot
+npx @bovinphang/frontend-craft install copilot
 ```
 
 > **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/cursor.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install cursor
+npx @bovinphang/frontend-craft install cursor
 ```
 
 > **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/gemini.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install gemini
+npx @bovinphang/frontend-craft install gemini
 ```
 
 > **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/kilo.md

@@ -3,7 +3,7 @@
 See root README **Universal Install** and run:
 
 ```bash
-npx frontend-craft install kilo
+npx @bovinphang/frontend-craft install kilo
 ```
 
 > **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/openclaw.md

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