@su-record/vibe 2.8.15 → 2.8.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.15",
+  "version": "2.8.17",
   "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:
 
 ```
@@ -254,12 +258,21 @@ function handleClaimReward(milestone: Milestone): void {
 }
 </script>
 
-<style lang="scss" scoped>
-/* Step B: 모바일 디자인 URL 반영 시 스타일 구현 */
-.dailyCheckInSection {
-  /* layout will be filled in Step B */
-}
-</style>
+<!-- ⛔ <style> 블록을 컴포넌트에 넣지 않는다 -->
+<!-- 스타일은 외부 파일에서 관리: styles/{feature}/layout/, components/ -->
+</script>
+```
+
+### ⛔ 스타일 분리 규칙
+
+```
+Step A에서 컴포넌트 파일에 <style> 블록을 작성하지 않는다.
+스타일은 Step B에서 외부 파일로 생성:
+  --new 모드: styles/{feature}/layout/_daily-checkin.scss
+  기본 모드: 기존 프로젝트 스타일 패턴을 따름
+
+컴포넌트는 <template> + <script setup> 만 포함.
+스타일 import는 루트 페이지 또는 nuxt.config에서 처리.
 ```
 
 ### 핵심 원칙: 스타일 없이 동작하는 코드
@@ -270,9 +283,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 +355,92 @@ function handleConfirm(): void {
 → Step B/C에서 코드 생성 시 이 함수들의 body를 구현
 ```
 
+## Phase 7: Step A 검증 루프
+
+> **⛔ 아래 검증을 실제로 실행해야 함. 체크리스트를 머리속으로 확인하지 말고 도구로 확인.**
+
+### 7-1. 파일 존재 확인 (Glob 도구)
+
+```
+Glob으로 생성된 파일 목록 확인:
+  Glob: pages/{feature}*.vue
+  Glob: components/{feature}/**/*.vue
+  Glob: styles/{feature}/**/*.scss
+
+확인:
+  □ 루트 페이지 파일 존재
+  □ PAGE 프레임 수 = 컴포넌트 .vue 파일 수 (카운트 비교)
+  □ styles/{feature}/ 디렉토리 존재
+  □ 팝업 컴포넌트 존재 (스토리보드에 팝업이 있었으면)
+
+누락 시 → Write로 생성
+```
+
+### 7-2. 기능 주석 확인 (각 파일 Read 도구로 실제 열기)
+
+```
+⛔ 모든 섹션 컴포넌트 파일을 Read로 열어서 아래를 확인:
+
+각 파일에서 체크:
+  □ JSDoc 주석 블록 존재 (/** ... */)
+  □ [기능 정의] 섹션 있음 — 스토리보드 기능 정의서에서 추출한 내용
+  □ [인터랙션] 섹션 있음 — ①②③ 번호 + 동작 설명
+  □ [상태] 섹션 있음 — 해당 섹션의 상태 목록
+
+실제 확인 예시:
+  Read: components/{feature}/DailyCheckInSection.vue
+  → /** 블록 검색
+  → "[기능 정의]" 텍스트 존재 확인
+  → "[인터랙션]" 텍스트 존재 확인
+  → "handleCheckIn" 함수 존재 확인
+
+하나라도 누락 → Edit으로 추가 → 다시 Read로 재확인
+```
+
+### 7-3. 목 데이터 확인 (Grep 도구)
+
+```
+Grep으로 빈 배열 검색:
+  Grep: "ref<.*>\(\[\]\)" 또는 "ref\(\[\]\)" in components/{feature}/
+
+빈 배열 발견 시:
+  → 스토리보드 기능 정의서에서 해당 데이터 추출
+  → Edit으로 목 데이터 채움
+  → 다시 Grep으로 재확인
+```
+
+### 7-4. 스타일 분리 확인 (Grep 도구)
+
+```
+컴포넌트에 <style> 블록이 없는지 확인:
+  Grep: "<style" in components/{feature}/**/*.vue
+
+<style> 발견 시:
+  → Edit으로 제거
+  → 해당 스타일을 styles/{feature}/ 외부 파일로 이동
+```
+
+### 7-5. 빌드 확인 (Bash 도구)
+
+```
+Bash: npm run build (또는 nuxt build, next build)
+  → 에러 있으면 수정 → 재빌드
+  → 성공해야 Step B 진행
+```
+
+### 검증 완료 조건
+
+```
+✅ 파일 수 = PAGE 프레임 수
+✅ 모든 컴포넌트에 [기능 정의] + [인터랙션] + [상태] 주석
+✅ 빈 배열 0개
+✅ 컴포넌트 내 <style> 블록 0개
+✅ 빌드 성공
+→ Step B 진행 가능
+
+실패 항목 → 수정 → 재검증 (횟수 제한 없음)
+```
+
 ## 출력 요약
 
 ```
@@ -337,6 +448,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: 뷰포트 모드에 따른 스타일 적용