@su-record/vibe 2.8.38 → 2.8.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.38",
+  "version": "2.8.39",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe.figma/SKILL.md

@@ -202,86 +202,56 @@ URL에서 fileKey, nodeId 추출
   → 또는 depth 높여서 하위 분할 조회
 ```
 
-### 1-2. 레이아웃 + 컴포넌트 구성 (코드 생성)
-
-```
-스토리보드에서 파악한 섹션 구조로 실제 파일을 생성한다.
-
-1. 루트 페이지 파일 생성 (Write):
-   pages/{feature}.vue (또는 app/{feature}/page.tsx)
-   → 모든 섹션 컴포넌트 import + 순서대로 배치
-   → 팝업/모달 조건부 렌더링
-
-2. 섹션 컴포넌트 파일 생성 (Write):
-   components/{feature}/HeroSection.vue
-   components/{feature}/DailyCheckInSection.vue
-   components/{feature}/PlayTimeMissionSection.vue
-   ...PAGE 프레임 수만큼
-
-   각 컴포넌트에 반드시 포함:
-
-   <template>:
-     - 섹션 제목 <h2> (스토리보드에서 추출한 실제 텍스트)
-     - 설명 텍스트 <p>
-     - 리스트 렌더링 (v-for + 목 데이터)
-     - 버튼/CTA (실제 라벨 + @click 핸들러)
-     - 조건부 렌더링 (상태에 따른 v-if)
-     → 빈 template 금지. 브라우저에서 텍스트가 보여야 함.
-
-   <script setup>:
-     - JSDoc 주석으로 기능 요구사항 작성:
-       /**
-        * 일일 출석 미션 섹션
-        *
-        * [기능 정의]
-        * - 매일 출석 시 스노우 토큰 즉시 지급
-        * - 누적 3/5/7일 달성 시 추가 보상
-        *
-        * [인터랙션]
-        * ① 출석하기 클릭 → API호출 → 토큰지급 표시
-        * ② 누적 보상 클릭 → 보상 수령
-        *
-        * [상태] default, checked, reward-claimed
-        */
-     - TypeScript 인터페이스
-     - 목 데이터 (빈 배열 금지, 3~7개 아이템)
-     - 목 데이터의 image 필드: 실제 다운로드할 이미지 경로 사용 금지
-       → Phase 1에서는 이미지 경로를 '' (빈 문자열) 또는 placeholder 텍스트로 설정
-       → Phase 2에서 실제 이미지 다운로드 후 경로를 업데이트
-       → ❌ '/images/{feature}/token-100.png' (존재하지 않는 파일 참조 금지)
-     - 이벤트 핸들러 stub (body는 // TODO:)
-
-   ❌ <client-only> 래핑 금지 — SSR hydration 실패 위험
-      (<client-only>는 window/document 직접 접근하는 컴포넌트에만 사용)
-   <style> 블록 없음 — 스타일은 Phase 3에서 외부 파일로.
-
-3. 공통 컴포넌트 (SHARED에서 파악):
-   → 프로젝트에 이미 있으면 import 재사용
-   → 없으면 새로 생성 (GNB, Footer, Popup)
-
-4. 스타일 디렉토리 구조 생성 (빈 파일):
-   styles/{feature}/index.scss
-   styles/{feature}/_tokens.scss
-   styles/{feature}/_mixins.scss
-   styles/{feature}/_base.scss
-   styles/{feature}/layout/
-   styles/{feature}/components/
+### 1-2. 기능 스펙 문서 작성 (파일 생성 없음)
+
+```
+❌ Phase 1에서 코드 파일을 생성하지 않는다.
+   → Phase 1 HTML 구조와 Phase 3 트리 매핑이 충돌하면 이중 작업
+   → Phase 3에서 tree.json 기반으로 코드를 생성
+
+✅ Phase 1의 출력물은 기능 스펙 문서 (텍스트):
+
+1. 섹션 목록:
+   | # | 섹션 이름 | Figma 프레임 name | 높이 | 설명 |
+   |---|----------|------------------|------|------|
+   | 1 | Hero | Hero | 1280px | 키비주얼 + 이벤트 정보 |
+   | 2 | DailyCheckIn | Daily | 3604px | 출석 미션 |
+   | 3 | PlayTime | Frame 633371 | 11363px | 플레이타임 미션 |
+
+2. 각 섹션의 기능 정의:
+   /**
+    * 일일 출석 미션 섹션
+    *
+    * [기능 정의]
+    * - 매일 출석 시 스노우 토큰 즉시 지급
+    * - 누적 3/5/7일 달성 시 추가 보상
+    *
+    * [인터랙션]
+    * ① 출석하기 클릭 → API호출 → 토큰지급 표시
+    * ② 누적 보상 클릭 → 보상 수령
+    *
+    * [상태] default, checked, reward-claimed
+    */
+
+3. 공통 컴포넌트 목록:
+   → 프로젝트에 이미 있는 컴포넌트 (GNB, Footer 등)
+   → 새로 만들 공통 컴포넌트
+
+4. TypeScript 인터페이스 초안:
+   interface RewardItem { id: string; name: string; tokenAmount: number; status: 'locked'|'available'|'claimed' }
 ```
 
 ### 1-3. 검증
 
 ```
 Phase 1 완료 조건:
-  □ 브라우저에서 열면 각 섹션의 텍스트/리스트/버튼이 보인다
-  □ 클릭하면 핸들러가 실행된다
-  □ 모든 컴포넌트에 [기능 정의] + [인터랙션] + [상태] JSDoc
-  □ 빈 배열 0개, 빈 template 0개, <style> 블록 0개
-  □ <client-only> 전체 래핑 0개
-  □ 목 데이터의 image 필드에 존재하지 않는 파일 경로 0개
-  □ 빌드 성공
-
-빈 화면 = Phase 1 미완성. Phase 2로 넘어가지 않는다.
-스타일/이미지는 없어도 됨 — Phase 3에서 채움.
+  □ 모든 섹션이 목록에 포함되어 있다
+  □ 각 섹션에 [기능 정의] + [인터랙션] + [상태] 가 정의되어 있다
+  □ TypeScript 인터페이스 초안이 작성되어 있다
+  □ 공통 컴포넌트가 식별되어 있다
+  □ 파일을 하나도 생성하지 않았다
+
+Phase 3에서 이 스펙 + tree.json을 합쳐서 코드를 생성한다.
 ```
 
 ---

package/skills/vibe.figma.extract/SKILL.md

@@ -84,36 +84,80 @@ Bash:
 
 ---
 
-## 2. 이미지 에셋
+## 2. 이미지 에셋 — 노드 렌더링 기반 (imageRef 개별 다운로드 금지)
 
-### 2-1. Fill 이미지 다운로드
+```
+❌ imageRef 개별 다운로드 금지
+   → 텍스처 fill을 공유하는 경우 원본 텍스처(22.7MB)가 다운됨
+   → 노드 렌더링하면 해당 노드에 적용된 최종 결과물(364KB)이 나옴
 
+✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
 ```
-트리에서 imageRef 수집 → Figma API로 다운로드:
 
-Bash:
-  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out=/tmp/{feature}/images/ --depth=10
+### 2-1. BG 프레임 렌더링 (섹션 배경)
+
+```
+각 섹션의 BG 프레임을 식별 → 합성된 배경 1장으로 렌더링:
+
+BG 프레임 판별 기준:
+  - name에 "BG", "bg" 포함
+  - 또는 부모와 크기 동일(±10%) + 자식 이미지 3개 이상
+  - 또는 1depth 첫 번째 자식이면서 이미지 노드 다수 보유
 
-반환: { total: N, images: { "imageRef": "/path/to/file.png", ... } }
+렌더링:
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {bg.nodeId} --out=/tmp/{feature}/bg/{section}-bg.png
 
-검증: total = refs.size (누락 0), 0byte 파일 없음
+→ BG 하위 20+ 레이어가 합성된 1장
+→ CSS background-image로 처리
+→ 개별 레이어(눈, 나무, 파티클 등) 다운로드하지 않음
 ```
 
-### 2-2. 아이템/아이콘 노드 렌더링
+### 2-2. 콘텐츠 노드 렌더링
 
 ```
-fill 이미지가 없지만 시각적으로 의미 있는 노드를 PNG로 렌더링:
+BG가 아닌 콘텐츠 이미지를 개별 노드 렌더링:
 
 대상 식별 (tree.json에서):
-  - INSTANCE/COMPONENT 타입 중 크기 50~300px
-  - name에 "item", "icon", "reward", "token", "coin", "badge" 포함
-  - VECTOR/GROUP 중 크기 ≤ 64px (아이콘 후보)
+  - 타이틀/서브타이틀 이미지 (name에 "title", "sub title")
+  - 버튼 이미지 (name에 "btn", "button")
+  - 아이콘 (VECTOR/GROUP 크기 ≤ 64px)
+  - 아이템/보상 이미지 (name에 "item", "reward", "token", "coin")
+
+렌더링 (imageRef 다운로드 아님!):
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {node.nodeId} --out=/tmp/{feature}/content/{name}.png
+
+→ 텍스처 fill이 적용된 최종 결과물이 나옴
+→ 22.7MB 텍스처 대신 364KB 렌더링 이미지
+```
+
+### 2-3. 벡터 글자 그룹 렌더링
+
+```
+커스텀 폰트 텍스트가 글자별 벡터로 분리된 경우:
+
+판별:
+  - 부모 GROUP/FRAME 아래 VECTOR 타입 3개 이상
+  - 각 VECTOR 크기 < 60x60
+  - 같은 imageRef를 공유 (텍스처 fill)
 
 렌더링:
-  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --render --nodeIds={id1},{id2},... --out=/tmp/{feature}/images/
+  부모 GROUP을 통째로 렌더링 (개별 글자 다운로드 금지)
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {group.nodeId} --out=/tmp/{feature}/content/{name}.png
 
-→ 벡터/인스턴스 에셋도 PNG로 확보
-→ Phase 3에서 목 데이터의 image 경로에 연결 가능
+예시:
+  "MISSION 01" GROUP (174x42, 벡터 9개) → 렌더링 1장 (58KB)
+  "일일/누적 출석" GROUP (327x51, 벡터 7개) → 렌더링 1장 (93KB)
+```
+
+### 2-4. imageRef 다운로드를 사용하는 유일한 경우
+
+```
+노드 렌더링이 불가능한 경우에만 imageRef 다운로드 폴백:
+  - Figma screenshot API 실패 (rate limit, 권한 등)
+  - 노드가 DOCUMENT 레벨이라 렌더링 불가
+
+이 경우에도 파일 크기 확인:
+  - 5MB 초과 → 텍스처 fill 가능성 높음 → 경고 로그
 ```
 
 ---
@@ -144,21 +188,29 @@ fill 이미지가 없지만 시각적으로 의미 있는 노드를 PNG로 렌
 
 /tmp/{feature}/
 ├── tree.json                    ← 코드 생성의 PRIMARY 소스
-├── images/                      ← 이미지 에셋 (fill + 노드 렌더링)
-│   ├── {imageRef}.png           ← fill 이미지
-│   ├── {nodeId}.png             ← 렌더링된 아이템/아이콘
+├── bg/                          ← BG 프레임 렌더링 (섹션당 1장)
+│   ├── hero-bg.png
+│   ├── daily-bg.png
+│   └── ...
+├── content/                     ← 콘텐츠 노드 렌더링
+│   ├── hero-title.png
+│   ├── hero-subtitle.png
+│   ├── mission-01.png           ← 벡터 글자 그룹 렌더링
+│   ├── btn-login.png
 │   └── ...
 ├── full-screenshot.png          ← Phase 4 검증용
 └── sections/                    ← Phase 4 섹션별 검증용
     ├── hero.png
     └── ...
 
-이미지 목록:
-  파일명 | 크기 | 용도 (트리 기반 판별)
-  {ref}.png | 720×1280 | 배경 (부모와 동일 크기 + z-index 낮음)
-  {ref}.png | 620×174 | 콘텐츠 이미지 (독립적 크기)
-  {ref}.png | 48×48 | 아이콘 (≤64px)
-  {nodeId}.png | 200×200 | 렌더링된 아이템 (INSTANCE)
+이미지 분류 (실제 테스트 기준):
+  | 분류 | 처리 | 예시 |
+  |------|------|------|
+  | BG 프레임 (89개) | 프레임 렌더링 → bg/ | hero-bg.png (4.2MB) |
+  | 벡터 글자 (33개) | GROUP 렌더링 → content/ | mission-01.png (58KB) |
+  | 콘텐츠 (8개) | 노드 렌더링 → content/ | hero-title.png (364KB) |
+  | 장식 (29개) | BG 렌더링에 포함 | — |
+  → 전체 159개 → 실제 파일 약 18장
 
 색상 팔레트 (tree.json의 backgroundColor/color 고유값):
   #0a1628, #00264a, #ffffff, ...