@bovinphang/frontend-craft 2.6.0 → 2.7.0

package/docs/ko-KR/README.md

@@ -32,7 +32,7 @@
 
 각 런타임의 경로와 주의사항은 [`docs/runtimes/`](../runtimes/)에 있습니다.
 
-**13개의 전문 에이전트**, **41개의 자동 활성화 스킬**, **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 어시스턴트가 일관성 없고, 타입 없고, 안전하지 않은 프론트엔드 코드를 작성 | **41개 스킬**이 팀 표준을 인코딩 — 해당 파일을 건드릴 때 자동 활성화                                        |
+| AI 어시스턴트가 일관성 없고, 타입 없고, 안전하지 않은 프론트엔드 코드를 작성 | **45개 스킬**이 팀 표준을 인코딩 — 해당 파일을 건드릴 때 자동 활성화                                        |
 | AI 도구마다 플러그인 형식이 다름                                             | **하나의 CLI**로 동일한 규칙, 에이전트, 훅을 15개 런타임에 설치                                             |
 | 디자인에서 코드로의 전달 과정에서 정보 손실                                  | **MCP 통합**이 Figma, Figma Desktop, Sketch, MasterGo, Pixso, 墨刀에서 더 풍부한 디자인 컨텍스트를 가져오기 |
 | 리뷰가 즉흥적이고 얕음                                                       | **13개 에이전트**가 등급별 보고서 출력: 코드, 보안, 접근성, 성능, TS, UI 충실도                             |
@@ -160,15 +160,15 @@ 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-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/라우트 설명, 배포 문서 동기화 | —                                                  |
 
 ### 스킬 (자동 활성화)
@@ -179,14 +179,15 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 
 **프로젝트 표준** — 해당 프레임워크가 감지되면 자동 적용:
 
-| 스킬                            | 범위                                                         |
-| ------------------------------- | ------------------------------------------------------------ |
-| `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, 제네릭       |
 
 **구현 기능** — 특정 프론트엔드 기능을 구축할 때 활성화:
 
@@ -202,7 +203,7 @@ Marketplace가 이미 설치된 경우, `--force`를 사용해도 CLI는 두 번
 | `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` | 프레임워크별 대규모 리스트 가상화, 측정, 그리드, 무한 스크롤 |
+| `fec-list-virtualization` | 프레임워크별 대규모 리스트 가상화, 측정, 그리드, 무한 스크롤  |
 
 **테스트** — 프론트엔드 테스트 범위를 계획하거나 작성할 때 활성화:
 
@@ -219,7 +220,6 @@ 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, 키보드, 포커스, 터치, 스크린 리더 동작                |
 | `fec-dependency-upgrade`       | 의존성 업그레이드, lockfile 리뷰, CVE 수정, 마이그레이션 검증   |
@@ -229,34 +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-web-standard`        | JS + jQuery + HTML 레거시 프로젝트 개발 및 유지보수 기준  |
 | `fec-legacy-to-modern-migration` | 레거시 프론트엔드 현대화, 대상 스택 선택, 단계별 워크플로 |
 
 **프로젝트 진화** — 참조 시스템을 프로젝트 네이티브 개선으로 흡수할 때 활성화:
 
-| 스킬          | 범위                                                  |
-| ------------- | ----------------------------------------------------- |
+| 스킬          | 범위                                                      |
+| ------------- | --------------------------------------------------------- |
 | `fec-alchemy` | 참조 시스템 역량을 독창적인 프로젝트 네이티브 설계로 흡수 |
 
 **문서 유지보수** — 문서 작업에서 활성화:
 
-| 스킬                            | 범위                                                  |
-| ------------------------------- | ----------------------------------------------------- |
-| `fec-doc-sync`                  | 프론트엔드 문서를 코드, 설정, 스크립트, 라우트, API, 환경 변수, 배포 사실과 동기화 |
-| `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`    | 프로젝트 사실과 공식 소스로 버전 의존 결정을 검증                                    |
 
 ### 에이전트
 
@@ -457,10 +461,10 @@ npx skills update                          # 최신 버전으로 업데이트
 npx skills check                           # 사용 가능한 업데이트 미리보기
 ```
 
-| CLI                  | 설치 내용                                             |
-| -------------------- | ----------------------------------------------------- |
+| CLI                              | 설치 내용                                             |
+| -------------------------------- | ----------------------------------------------------- |
 | `npx @bovinphang/frontend-craft` | 스킬 + 런타임 전용 에이전트, 명령어, 훅, 규칙, 템플릿 |
-| `npx skills`         | 스킬만 (기존 Skills CLI 워크플로용)                   |
+| `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