@su-record/vibe 2.8.15 → 2.8.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.15",
+  "version": "2.8.16",
   "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-analyze/SKILL.md

@@ -79,6 +79,10 @@ Error: 에러 페이지 구조
 
 ## Phase 4: PAGE 프레임 세밀 분석 (화면설계)
 
+> **⛔ 모든 PAGE 프레임을 빠짐없이 분석한다. 일부만 처리하고 넘어가면 안 됨.**
+> Phase 1에서 PAGE로 분류된 프레임 수 = Phase 5에서 생성하는 섹션 컴포넌트 수.
+> 분석 완료 후 "PAGE 프레임 N개 중 N개 분석 완료" 카운트를 출력하여 누락 확인.
+
 **각 PAGE 프레임**에 대해 get_screenshot + get_design_context:
 
 ```
@@ -270,9 +274,21 @@ function handleClaimReward(milestone: Milestone): void {
 ✅ 상태 변경 (체크, 선택, 비활성화)이 반영됨
 ✅ 모달/팝업 open/close가 v-if/ref로 연결됨
 ✅ emit으로 부모-자식 이벤트가 실제 연결됨
-✅ 리스트 렌더링 (v-for)이 더미 데이터로 동작
+✅ 리스트 렌더링 (v-for)이 더미 데이터로 동작 — ⚠️ 빈 배열 금지, 반드시 목 데이터 채움
 ✅ 조건부 렌더링 (v-if)이 상태에 따라 전환됨
 
+⚠️ 목 데이터 필수:
+  스토리보드 기능 정의서에서 아이템/보상/상품 정보를 추출하여 목 데이터로 사용.
+  빈 배열 = UI가 안 보임 = Step A 미완성.
+  예:
+    exchangeItems = [
+      { id: 1, name: '스노우 토큰 100', cost: 100, image: '' },
+      { id: 2, name: '스노우 토큰 500', cost: 500, image: '' },
+    ]
+    raffleItems = [
+      { id: 1, name: '1주차 경품', prize: 'PlayStation 5', entries: 0 },
+    ]
+
 → 브라우저에서 열면 스타일은 없지만 클릭/인터랙션은 동작하는 상태
 
 ✅ 기능 정의서 내용 → 컴포넌트 JSDoc 주석
@@ -330,6 +346,33 @@ function handleConfirm(): void {
 → Step B/C에서 코드 생성 시 이 함수들의 body를 구현
 ```
 
+## Phase 7: Step A 검증 루프
+
+> **⛔ 아래 조건을 모두 만족해야 Step B로 진행. 하나라도 실패 시 수정 후 재검증.**
+
+```
+🔄 검증 체크리스트:
+
+1. 파일 생성 완료 확인:
+   □ 루트 페이지 파일 존재 (pages/{feature}.vue)
+   □ PAGE 프레임 수 = 생성된 섹션 컴포넌트 수 (1개도 빠짐 없음)
+   □ 팝업 컴포넌트 생성됨 (스토리보드에 팝업이 있으면)
+   □ 스타일 디렉토리 생성됨 (styles/{feature}/)
+
+2. 코드 품질 확인 (각 컴포넌트 Read로 확인):
+   □ 모든 컴포넌트에 기능 정의 JSDoc 주석 있음
+   □ v-for 리스트에 목 데이터 채워짐 (빈 배열 없음)
+   □ 이벤트 핸들러 함수 정의됨 (handleXxx)
+   □ TypeScript 인터페이스 정의됨
+   □ 팝업 open/close가 v-if + ref로 연결됨
+
+3. 빌드 확인:
+   □ 프로젝트 빌드 에러 없음 (Bash: npm run build 또는 nuxt build)
+
+실패 항목 → Edit으로 수정 → 재검증 (횟수 제한 없음)
+동일 항목 3회 연속 실패 → 사용자에게 확인 후 계속
+```
+
 ## 출력 요약
 
 ```
@@ -337,6 +380,9 @@ function handleConfirm(): void {
 ✅ 각 섹션 컴포넌트 (구조 코드 + 기능 주석 + 이벤트 핸들러 + TypeScript 인터페이스)
 ✅ 공통 컴포넌트 (GNB, Footer, Popup — 기존 재사용 또는 신규)
 ✅ 인터랙션 매핑 테이블
-✅ 스타일은 빈 블록 → Step B(모바일)에서 디자인 URL 받고 채움
+✅ 목 데이터 채워짐 (빈 배열 없음)
+✅ 빌드 성공
+✅ 스타일은 빈 블록 → Step B에서 디자인 URL 받고 채움
 ✅ 이미지는 placeholder → Step B에서 다운로드 후 교체
+→ Step B 진행 가능
 ```

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

@@ -78,32 +78,114 @@ AskUserQuestion (options 사용 금지, 자유 텍스트만):
 for each (designFrame, component) in mappings:
 
   1. get_design_context(fileKey, designFrame.nodeId)
-     → 해당 섹션 전용 코드 + 스크린샷 + 에셋 URL
-
-  2. 이미지 에셋 다운로드 (BLOCKING):
-     → 응답에서 figma.com/api/mcp/asset/ URL 전부 추출
-     → WebFetch로 다운로드 → static/images/{feature}/ 저장
-     → URL→로컬경로 매핑 테이블에 추가
+     → 해당 섹션 전용 **참조 코드** + 스크린샷 + 에셋 URL
+
+     ⚠️ 참조 코드가 핵심:
+       get_design_context는 React+Tailwind 기반 참조 코드를 반환함.
+       이 코드에 이미지 URL, 레이아웃 구조, 색상값, 폰트 정보가 모두 포함됨.
+       → 이 참조 코드를 **기반으로** 프로젝트 스택에 맞게 변환해야 함.
+       → 참조 코드를 무시하고 스크린샷만 보고 자체 해석하면 안 됨.
+       → 참조 코드의 이미지 URL, 색상 hex, 폰트 크기를 그대로 가져온 후 스케일 적용.
+
+     ⚠️ 스크린샷은 보조:
+       참조 코드와 스크린샷이 다르면 → 스크린샷(디자인 의도) 우선
+       참조 코드에 없는 시각적 요소가 스크린샷에 보이면 → 추가 구현
+
+  2. ⛔ 이미지 에셋 다운로드 (BLOCKING — 코드 반영 전 필수 완료):
+
+     Step 2-a: get_design_context 응답에서 에셋 URL 추출
+       응답 코드에 아래 패턴이 포함됨:
+         const heroImage = 'https://www.figma.com/api/mcp/asset/xxxx'
+         const bgImage = 'https://www.figma.com/api/mcp/asset/yyyy'
+       → 모든 https://www.figma.com/api/mcp/asset/ URL을 수집
+
+     Step 2-b: 각 URL을 WebFetch로 다운로드 → Bash로 파일 저장
+       다운로드 명령 예시:
+         Bash: curl -L "https://www.figma.com/api/mcp/asset/xxxx" -o static/images/{feature}/hero-bg.webp
+       또는 WebFetch 후 Write로 저장
+       파일명: 변수명/레이어명 기반 kebab-case (heroImage → hero-bg.webp)
+
+     Step 2-c: URL→로컬경로 매핑 테이블 생성
+       | 변수명 | Figma URL | 로컬 경로 |
+       |--------|-----------|----------|
+       | heroImage | https://figma.com/api/mcp/asset/xxxx | /images/{feature}/hero-bg.webp |
+       | bgImage | https://figma.com/api/mcp/asset/yyyy | /images/{feature}/section-bg.webp |
+
+     Step 2-d: 다운로드 검증
+       → 파일이 실제로 존재하는지 Bash: ls -la static/images/{feature}/
+       → 누락된 파일이 있으면 재다운로드
+       → 0byte 파일 체크 (다운로드 실패)
 
   3. 스크린샷 분석 + ⚠️ 스케일 팩터 적용:
      → 레이아웃 (flex/grid 방향, 정렬)
      → 색상 (배경, 텍스트, 보더) — 스케일 불필요
      → 타이포 (크기, 굵기, 줄간격) — ⚠️ 스케일 팩터 적용
      → 간격 (padding, gap, margin) — ⚠️ 스케일 팩터 적용
-     → 배경 이미지 구조 (Multi-Layer: Bg/Overlay/Content)
+     → ⚠️ 배경 이미지 분류 (아래 참조)
 
-     ⚠️ 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> 블록에 스케일 적용된 스타일 작성
-     → 이미지 경로를 로컬 경로로 교체
-     → Step A의 기능 주석과 핸들러는 보존
+       디폴트: PC 0.75 (1920/2560), Mobile 0.667 (480/720)
+
+  4. ⛔ 배경 이미지 분류 + Multi-Layer 패턴 적용:
+
+     섹션에 배경 이미지가 있으면 반드시 Multi-Layer 구조로 작성:
+
+     <template>:
+       <section class="{section}Section">
+         <div class="{section}Bg" />               ← 배경 이미지 (z-index: 0)
+         <div class="{section}BgOverlay" />         ← 오버레이 (z-index: 1, 선택)
+         <div class="{section}Content">             ← 콘텐츠 (z-index: 최상위)
+           ...실제 UI...
+         </div>
+       </section>
+
+     <style> (layout/{section}.scss):
+       .{section}Section { position: relative; overflow: hidden; }
+       .{section}Bg {
+         position: absolute; inset: 0; z-index: 0;
+         background-image: url('/images/{feature}/{image-name}.webp');
+         background-size: cover;
+         background-position: center;
+       }
+       .{section}BgOverlay {
+         position: absolute; inset: 0; z-index: 1;
+         background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
+       }
+       .{section}Content { position: relative; z-index: 2; }
+
+     배경이 없는 섹션은 Multi-Layer 불필요 — 일반 구조 사용.
+
+  5. component 파일에 반영 (Edit 도구):
+
+     ⚠️ 변환 순서 (참조 코드 → 프로젝트 코드):
+       a. get_design_context 참조 코드에서 추출:
+          - HTML 구조 (div 계층, 이미지 배치, 텍스트 위치)
+          - 이미지 URL (const xxxImage = '...')
+          - 인라인 스타일/Tailwind 클래스 → 색상, 폰트, 간격 값
+          - 배경 이미지 패턴 (background-image가 있으면 Multi-Layer 적용)
+
+       b. 프로젝트 스택으로 변환:
+          - React+Tailwind → Vue/Nuxt SFC + SCSS (또는 프로젝트 스택)
+          - className → :class
+          - style={{ }} → SCSS 변수/클래스
+          - Tailwind 값 → SCSS 토큰 변수
+
+       c. 스케일 팩터 적용:
+          - 참조 코드의 px 값 × scaleFactor = 코드 값
+          - 색상 hex는 그대로 (스케일 불필요)
+
+       d. 이미지 경로 교체:
+          - figma.com/api/mcp/asset/xxx → /images/{feature}/xxx.webp (매핑 테이블)
+
+       e. Step A 코드와 병합:
+          - Step A의 기능 주석/핸들러/인터페이스 보존
+          - template의 placeholder → 참조 코드 기반 실제 마크업으로 교체
+          - style 블록 → 참조 코드에서 추출한 스타일 작성
+
+     ⛔ 참조 코드에 이미지가 있는데 생성 코드에 없으면 → 누락, 반드시 포함
+     ⛔ Figma 임시 URL이 코드에 남으면 안 됨
 ```
 
 ## Phase 4: 뷰포트 모드에 따른 스타일 적용