@su-record/vibe 2.8.13 → 2.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.13",
+  "version": "2.8.15",
   "description": "AI Coding Framework for Claude Code — 49 agents, 41+ tools, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe-figma/SKILL.md

@@ -38,18 +38,46 @@ URL에서 fileKey, nodeId 추출:
   → nodeId: 하이픈을 콜론으로 ("1-109" → "1:109")
 
 1. get_metadata(fileKey, nodeId) → 전체 프레임 목록
-2. 관련 섹션별 get_design_context:
-   - "해상도 대응" / "Media Query" → 브레이크포인트
+2. 관련 섹션별 get_design_context 또는 get_screenshot:
+   - "해상도 대응" / "Media Query" → 브레이크포인트 + ⚠️ 디자인 시안 사이즈
    - "인터랙션" / "Interaction" → 호버/클릭/스크롤 스펙
    - "애니메이션" / "Animation" / "Motion" → 트랜지션 스펙
    - "상태" / "State" → 로딩/에러/성공 UI
    - "컬러" / "Color" / "타이포" / "Typography" → 디자인 가이드
 ```
 
+### ⚠️ 해상도 대응 프레임에서 반드시 추출해야 하는 값
+
+```
+Media Query Guide에서 추출:
+  1. PC Main Target: 1920px (실제 타겟 해상도)
+  2. Breakpoint: 1024px (PC↔Mobile 경계)
+  3. Mobile Portrait: ~480px
+  4. Mobile Minimum: 360px~
+  5. ⚠️ 디자인 시안 PC: 2560px (Figma 아트보드 크기)
+  6. ⚠️ 디자인 시안 Mobile: 720px (Figma 아트보드 크기)
+
+디자인 시안 사이즈가 없으면 Step B에서 스케일 팩터를 계산할 수 없음:
+  Figma 값 × (타겟 / 시안) = 실제 코드 값
+  예: Figma PC font-size 48px × (1920/2560) = 36px
+  예: Figma Mobile font-size 28px × (480/720) = 18.67px → 19px
+```
+
 추출 결과를 `storyboardSpec`으로 저장:
 ```
 storyboardSpec = {
-  breakpoints: { ... },
+  breakpoints: {
+    pcTarget: 1920,          // PC 타겟 해상도
+    breakpoint: 1024,        // PC↔Mobile 경계
+    mobilePortrait: 480,     // Mobile portrait max
+    mobileMinimum: 360,      // Mobile minimum
+    designPc: 2560,          // ⚠️ Figma PC 시안 사이즈
+    designMobile: 720,       // ⚠️ Figma Mobile 시안 사이즈
+  },
+  scaleFactor: {
+    pc: 1920 / 2560,         // = 0.75 (PC 스케일)
+    mobile: 480 / 720,       // = 0.667 (Mobile 스케일)
+  },
   interactions: [ ... ],
   animations: [ ... ],
   states: { ... },
@@ -65,10 +93,7 @@ storyboardSpec = {
 2. 디자인 시스템 감지 (--new 미지정 시)
 3. 브레이크포인트 로드 (vibe-figma-rules Phase 3-3 참조, 스토리보드 우선)
 4. 피처명 결정 (Figma 파일명에서 추출)
-5. 파일 구조 생성:
-   - 루트 페이지 파일 (빈 shell)
-   - 컴포넌트 디렉토리 (빈 폴더)
-   - 토큰 파일 (스토리보드 기반 초기값)
+5. → 파일 생성은 vibe-figma-analyze 스킬에서 실행 (이 스킬은 추출까지만)
 ```
 
 ### 피처명 결정

package/skills/vibe-figma-analyze/SKILL.md

@@ -10,6 +10,10 @@ triggers: []
 스토리보드 URL 하나로 **실제 동작하는 레이아웃 코드**를 생성.
 빈 shell이 아니라, 스토리보드에서 파악 가능한 모든 정보를 코드에 반영.
 
+> **⛔ 실행 지시: 이 스킬은 분석만 하는 게 아님. 반드시 Write 도구로 파일을 생성해야 함.**
+> Phase 1~4에서 분석 → Phase 5에서 **Write 도구로 실제 파일 생성** → Phase 6에서 인터랙션 테이블 출력.
+> 분석 결과를 텍스트로 보여주기만 하면 안 됨. 파일이 디스크에 생성되어야 Step A 완료.
+
 ## 입력
 
 - 스토리보드 URL의 get_metadata 결과 (전체 프레임 목록)
@@ -107,11 +111,24 @@ Error: 에러 페이지 구조
   }
 ```
 
-## Phase 5: 실제 코드 생성 (빈 shell 아님)
+## Phase 5: 파일 생성 (Write 도구 사용 — 필수)
+
+> **⛔ Write 도구로 아래 파일들을 실제로 생성한다. 코드를 보여주기만 하면 안 됨.**
 
-스토리보드 분석 결과로 **실제 동작하는 레이아웃 코드** 생성.
+스토리보드 분석 결과로 **실제 동작하는 레이아웃 코드** 파일을 Write.
 스타일은 Step B에서 채우지만, **구조/로직/주석은 이 단계에서 완성**.
 
+### 생성할 파일 목록
+
+```
+필수 생성 (Write 도구):
+  1. pages/{feature-name}.vue (또는 .tsx)     ← 루트 페이지
+  2. components/{feature-name}/각섹션.vue      ← 섹션별 컴포넌트 (Phase 4에서 파악한 수만큼)
+  3. components/{feature-name}/popups/각팝업.vue ← 팝업 컴포넌트
+  4. styles/{feature-name}/index.scss          ← 스타일 진입점 (빈 import 목록)
+  5. styles/{feature-name}/_tokens.scss        ← 빈 토큰 파일 (Step B에서 채움)
+```
+
 ### 루트 페이지
 
 ```vue

package/skills/vibe-figma-consolidate/SKILL.md

@@ -5,7 +5,13 @@ triggers: []
 tier: standard
 ---
 
-# Skill: vibe-figma-consolidate — Step D: 최종 공통화 리팩토링
+# Skill: vibe-figma-consolidate — Step C: 최종 공통화 리팩토링
+
+> **⛔ 실행 지시: Edit 도구로 기존 파일을 실제 수정한다.**
+> - 토큰 통합: Edit으로 _tokens.scss 수정
+> - 중복 제거: Edit으로 중복 스타일/코드 통합
+> - variant 통합: Edit으로 유사 컴포넌트 합침
+> 분석만 보여주고 끝내면 안 됨.
 
 ## D-1. 스타일 공통화
 

package/skills/vibe-figma-frame/SKILL.md

@@ -5,10 +5,17 @@ description: "디자인 URL → 프레임별 개별 추출 → 스타일/이미
 triggers: []
 ---
 
-# Design Apply (섹션별 정밀 추출 + 코드 반영)
+# Design Frame (프레임별 정밀 추출 + 코드 반영)
 
-디자인 URL 하나를 받아서 **섹션별로 쪼개서 추출**하고, Step A에서 만든 컴포넌트에 스타일/이미지를 채움.
-모바일이든 PC든 동일한 프로세스. 두 번째 호출 시 반응형 레이어만 추가.
+디자인 URL 하나를 받아서 **프레임별로 쪼개서 추출**하고, Step A에서 만든 컴포넌트에 스타일/이미지를 채움.
+어떤 뷰포트든 동일한 프로세스. 두 번째 호출 시 반응형 레이어만 추가.
+
+> **⛔ 실행 지시: 분석만 하지 말 것.**
+> - 이미지: WebFetch로 다운로드 → Write 도구로 파일 저장
+> - 스타일: Write 도구로 SCSS/CSS 파일 생성 (layout/ + components/)
+> - 코드: Edit 도구로 Step A 컴포넌트의 template/style 채움
+> - 토큰: Edit 도구로 _tokens.scss에 추출한 값 추가
+> 모든 Phase가 끝나면 디스크에 실제 파일이 변경되어 있어야 함.
 
 ## 입력
 
@@ -78,16 +85,23 @@ for each (designFrame, component) in mappings:
      → WebFetch로 다운로드 → static/images/{feature}/ 저장
      → URL→로컬경로 매핑 테이블에 추가
 
-  3. 스크린샷 분석:
+  3. 스크린샷 분석 + ⚠️ 스케일 팩터 적용:
      → 레이아웃 (flex/grid 방향, 정렬)
-     → 색상 (배경, 텍스트, 보더)
-     → 타이포 (크기, 굵기, 줄간격)
-     → 간격 (padding, gap, margin)
+     → 색상 (배경, 텍스트, 보더) — 스케일 불필요
+     → 타이포 (크기, 굵기, 줄간격) — ⚠️ 스케일 팩터 적용
+     → 간격 (padding, gap, margin) — ⚠️ 스케일 팩터 적용
      → 배경 이미지 구조 (Multi-Layer: Bg/Overlay/Content)
 
-  4. component 파일에 반영:
+     ⚠️ Figma 값을 코드에 넣을 때 반드시 scaleFactor 적용:
+       코드 값 = Figma 추출 값 × scaleFactor
+       예: Figma font-size 48px × 0.75 (PC) = 36px
+       예: Figma padding 60px × 0.667 (Mobile) = 40px
+       scaleFactor는 Step A의 storyboardSpec.scaleFactor에서 참조
+       스토리보드 없으면 디폴트: PC 0.75 (1920/2560), Mobile 0.667 (480/720)
+
+  4. component 파일에 반영 (Edit 도구):
      → <template> 안의 placeholder를 실제 마크업으로 교체
-     → <style> 블록에 추출한 스타일 작성
+     → <style> 블록에 스케일 적용된 스타일 작성
      → 이미지 경로를 로컬 경로로 교체
      → Step A의 기능 주석과 핸들러는 보존
 ```