@su-record/vibe 2.8.23 → 2.8.25

package/skills/vibe-figma/SKILL.md

@@ -12,10 +12,23 @@ tier: standard
 ```
 ❌ CSS로 이미지 재현 (삼각형/원/gradient로 나무/눈사람/배경 그리기)
 ❌ 이미지 다운로드 없이 코드 생성 진행
-❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
 ❌ placeholder / 빈 template / 빈 src="" 남기기
 ❌ CSS 값을 추정 (참조 코드에 정확한 값이 있음)
 ❌ 브라우저 기본 스타일(검은색 16px)로 보이는 텍스트
+❌ 핵심 에셋만 다운로드 (참조 코드의 모든 에셋을 빠짐없이 다운로드)
+```
+
+### 스타일 배치 규칙 (모드별)
+
+```
+일반 모드:
+  ❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
+  ✅ 외부 SCSS 파일에만 스타일 작성
+
+직역 모드:
+  ✅ <style scoped> 블록 허용 (Tailwind→CSS 1:1 변환)
+  ✅ 인라인 :style="" 허용 (maskImage 등 동적 값)
+  ❌ 외부 SCSS 파일에 추상화된 스타일 작성 (원본 좌표 손실)
 ```
 
 ## 전체 플로우
@@ -48,19 +61,19 @@ tier: standard
 
 4. 디렉토리 생성:
    - components/{feature}/
-   - styles/{feature}/ (layout/, components/ 하위)
    - public/images/{feature}/ (또는 static/images/{feature}/)
+   - styles/{feature}/ (layout/, components/ 하위) — Phase 2에서 일반 모드 섹션이 있을 때만
 ```
 
 ---
 
 ## Phase 1: Storyboard
 
-```
-AskUserQuestion: "스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
+사용자에게 질문한다:
+- question: "스토리보드 Figma URL을 입력해주세요. (없으면 '없음')"
+- options 제공 금지 — 자유 텍스트 입력만 허용
 
-"없음" → Phase 2로 건너뜀 (디자인 URL만으로 진행)
-```
+"없음" 응답 시 → Phase 2로 건너뜀
 
 ### 1-1. 스토리보드 분석
 
@@ -68,11 +81,25 @@ AskUserQuestion: "스토리보드 Figma URL을 입력해주세요. (없으면 '
 URL에서 fileKey, nodeId 추출
 get_metadata(fileKey, nodeId) → 프레임 목록
 
-프레임 분류:
-  SPEC — 기능 정의서 → get_design_context로 텍스트 추출
-  CONFIG — 해상도/브레이크포인트 → 스케일 팩터 계산
-  SHARED — GNB/Footer/Popup → 공통 컴포넌트 파악
-  PAGE — 화면설계 → 섹션 목록 + 인터랙션 스펙
+⚠️ 메타데이터가 클 수 있음 (실전: 291K chars → 파일 저장됨)
+  → 파일 저장 시 Python/Bash로 파싱하여 프레임 목록 추출
+
+프레임 분류 (이름 패턴 기반, get_design_context 호출 전에 분류):
+  SPEC   — "기능 정의서", "정책" → get_design_context로 텍스트 추출
+  CONFIG — "해상도", "브라우저" → get_design_context로 스케일 팩터 계산
+  SHARED — "공통", "GNB", "Footer", "Popup" → 공통 컴포넌트 파악
+  PAGE   — "화면설계", "메인 -" → 섹션 목록 + 인터랙션 스펙
+
+핵심 프레임 선별 (전부 읽지 않음):
+  1순위: SPEC (기능 정의서) — 1개
+  2순위: CONFIG (해상도) — 1개
+  3순위: PAGE 중 메인 섹션만 (3.1, 3.2, 3.3, 3.4, 3.5, 3.6)
+         하위 케이스(3.1.1, 3.2.1 등)는 건너뜀 — Phase 2에서 필요 시 참조
+  4순위: SHARED (공통 요소, Popup) — 필요 시
+
+높이 1500px 이상 프레임:
+  → get_design_context 대신 get_screenshot으로 시각 파악
+  → 또는 get_metadata로 하위 분할 후 호출
 ```
 
 ### 1-2. 레이아웃 + 컴포넌트 구성 (코드 생성)
@@ -167,22 +194,23 @@ Phase 1 완료 조건:
 Phase 1에서 컴포넌트가 이미 존재 (레이아웃 + 기능 주석 + 목 데이터).
 Phase 2에서는 이 컴포넌트에 **디자인(이미지 + 스타일)**을 입힌다.
 
-```
 모바일 퍼스트 강제. CSS base = 최소 뷰포트, @media (min-width:)로 확장.
 
-1. AskUserQuestion: "베이스 디자인(모바일) Figma URL을 입력해주세요."
-   → base 스타일로 처리.
+사용자에게 질문한다:
+- question: "베이스 디자인(모바일) Figma URL을 입력해주세요."
+- options 제공 금지 — 자유 텍스트 입력만 허용
+
+→ base 스타일로 처리 (2-1, 2-2 실행).
 
-2. 처리 완료 후:
-   AskUserQuestion: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
-   → URL 입력 → @media (min-width:) 레이어 추가
-   → 처리 완료 후 다시: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
-   → ...
-   → "없음" → Phase 3으로
+처리 완료 후 다시 질문한다:
+- question: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
+- options 제공 금지
+
+→ URL 입력 시: @media (min-width:) 레이어 추가 후 다시 질문
+→ "없음" 응답 시: Phase 3으로
 
 브레이크포인트는 프레임 width에서 자동 산출.
 예: 720px → 480px(스케일), 2560px → 1920px(스케일) → @media (min-width: 1024px)
-```
 
 ### 2-1. 스타일 파일 내용 작성 (첫 섹션 전)
 
@@ -196,7 +224,67 @@ Phase 1에서 빈 파일로 만든 스타일 구조에 기본 내용 Write:
   styles/{feature}/components/     ← 디렉토리
 ```
 
-### 2-2. 섹션별 루프
+### 2-2. 비정형 레이어 감지 (섹션별)
+
+```
+각 섹션의 get_design_context 응답을 받을 때마다 개별 판정.
+한 페이지 내에서 섹션마다 모드가 다를 수 있음.
+
+비정형 지표 (하나라도 해당 → 해당 섹션 직역 모드):
+  □ 에셋 URL 15개 이상
+  □ 소수점 좌표 사용 (left-[117.13px], top-[373.65px])
+  □ mix-blend-mode 사용 (mix-blend-lighten, mix-blend-multiply, mix-blend-hue)
+  □ rotate/scale 변환 사용 (rotate-[149.7deg], -scale-y-100)
+  □ mask-image 사용
+  □ blur 필터 사용 (blur-[3.5px])
+  □ 2560px 이상 원본 해상도에서 트리밍된 BG 구조
+
+정형 지표 (전부 해당 → 해당 섹션 일반 모드):
+  □ flex/grid 기반 정형 레이아웃
+  □ 에셋 URL 10개 미만
+  □ absolute 좌표 없거나 정수값만
+  □ mix-blend/rotate/mask/blur 미사용
+
+섹션별 판정 결과 테이블 출력:
+  ┌──────────┬──────────┐
+  │   섹션   │   모드   │
+  ├──────────┼──────────┤
+  │ Hero     │ 직역     │
+  │ KID      │ 직역     │
+  │ Daily    │ 직역     │
+  │ Caution  │ 일반     │
+  │ ...      │ ...      │
+  └──────────┴──────────┘
+
+혼합 섹션 (배경=비정형, 콘텐츠=정형):
+  → 직역 모드 적용 (비정형이 하나라도 있으면 직역)
+  → 콘텐츠 영역의 반복 패턴(v-for 등)은 직역 내에서 유지
+```
+
+### 2-3. 큰 섹션 분할
+
+```
+get_design_context 타임아웃 방지:
+
+섹션 높이가 1500px 이상이면 (모바일/PC 무관):
+  사전 분할: get_design_context 호출 전에 먼저 분할
+  1. get_metadata(섹션 nodeId)로 하위 노드 목록 확보
+  2. 하위 노드별로 get_design_context 호출 (분할)
+  3. 결과를 합쳐서 하나의 섹션으로 처리
+
+타임아웃 발생 시 (분할 없이 호출한 경우):
+  1회 재시도 (excludeScreenshot: true)
+  → 실패 시 즉시 분할 전략으로 전환 (3회 반복 금지)
+  → 분할도 불가하면 get_screenshot + 스크린샷 기반 구현
+     (이 경우 CSS 값은 스크린샷에서 추정 — 품질 하락 감수)
+
+실전 데이터 (PUBG 겨울 PC방 기준):
+  정상 응답: ~900px 이하 (KID 238px, Caution 880px, Anchor 652px)
+  타임아웃: 2000px+ (Daily 2372~3604, PlayTime 2000~2613, Exchange 2832~4342)
+  파일 저장: Hero 1280px (92K~130K chars — 에셋 40개로 크기 큼)
+```
+
+### 2-4. 섹션별 루프
 
 **각 섹션에 대해 순서대로, 한 섹션을 완전히 완료한 후 다음으로:**
 
@@ -219,61 +307,92 @@ get_design_context(fileKey, 섹션.nodeId)
 ```
 vibe-figma-extract 스킬 참조.
 
-참조 코드에서 모든 에셋 URL 추출 → 다운로드 → 검증.
+참조 코드에서 모든 에셋 URL을 빠짐없이 추출 → 다운로드 → 검증.
+"핵심 에셋만" 금지. const img... 로 시작하는 모든 URL을 다운로드.
 이미지가 모두 로컬에 있어야 c 단계로 진행.
 하나라도 실패하면 코드 생성하지 않음.
 ```
 
-#### c. 참조 코드 → 외부 스타일 파일
+#### c. 코드 변환 (모드별 분기)
 
 ```
-vibe-figma-convert 스킬 참조.
+■ 직역 모드 (비정형 레이어):
+  vibe-figma-convert 스킬의 "직역 모드" 참조.
+
+  참조 코드의 JSX 구조 + Tailwind 클래스를 1:1로 변환:
+    - React JSX → Vue/Nuxt template (className→class 등)
+    - Tailwind 클래스 → <style scoped> 내 CSS 클래스 (값 그대로 유지)
+    - src={변수} → 로컬 이미지 경로
+    - style={{ maskImage: ... }} → :style="{ maskImage: ... }"
+    - 소수점 좌표, rotate, mix-blend-mode 전부 보존
+    - scaleFactor 적용: px 값만 스케일링, 나머지(색상, opacity, blend) 유지
+  
+  외부 SCSS 파일 생성하지 않음.
+  컴포넌트에 <style scoped> 블록으로 스타일 포함.
 
-참조 코드의 Tailwind 클래스에서 CSS 값 추출:
-  text-[48px] → font-size: 36px (48 × 0.75)
-  text-[#1B3A1D] → color: #1B3A1D
-  bg-[#0A1628] → background-color: #0A1628
-  pt-[120px] → padding-top: 90px (120 × 0.75)
+■ 일반 모드 (정형 레이어):
+  vibe-figma-convert 스킬의 기존 방식 참조.
 
-Write/Edit:
-  styles/{feature}/layout/_{section}.scss   ← 배치/구조/배경이미지
-  styles/{feature}/components/_{section}.scss ← 텍스트/버튼/카드 스타일
-  styles/{feature}/_tokens.scss             ← 새 토큰 추가
+  참조 코드의 Tailwind 클래스에서 CSS 값 추출:
+    text-[48px] → font-size: 36px (48 × 0.75)
+    text-[#1B3A1D] → color: #1B3A1D
+    bg-[#0A1628] → background-color: #0A1628
+    pt-[120px] → padding-top: 90px (120 × 0.75)
+
+  Write/Edit:
+    styles/{feature}/layout/_{section}.scss   ← 배치/구조/배경이미지
+    styles/{feature}/components/_{section}.scss ← 텍스트/버튼/카드 스타일
+    styles/{feature}/_tokens.scss             ← 새 토큰 추가
 ```
 
 #### d. Phase 1 컴포넌트 template 리팩토링
 
 ```
-vibe-figma-convert 스킬 참조.
+■ 직역 모드:
+  Phase 1 컴포넌트의 template을 참조 코드의 HTML 구조로 교체.
+  script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
+  
+  변환 핵심:
+    - 참조 코드의 div/img 구조를 거의 그대로 유지
+    - 모든 이미지 경로를 로컬 경로로 교체
+    - Phase 1의 기능 요소(v-for, @click, v-if)를 적절한 위치에 재배치
+    - <style scoped>에 Tailwind→CSS 변환 결과 포함
+    - 장식 이미지에 alt="" aria-hidden="true"
 
-Phase 1에서 만든 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
-script(JSDoc 주석, 인터페이스, 목 데이터, 핸들러)는 보존.
+■ 일반 모드:
+  vibe-figma-convert 스킬 참조.
 
-template 변경 사항:
-  - 참조 코드의 HTML 구조를 프로젝트 스택으로 변환
-  - 이미지 경로를 다운로드된 로컬 경로로 설정
-  - 배경 이미지 섹션은 Multi-Layer 구조 (.{section}Bg + .{section}Content)
-  - 클래스명을 외부 스타일 파일의 셀렉터와 매칭
-  - Phase 1의 기능 요소(v-for, @click, v-if)를 새 구조에 재배치
+  Phase 1에서 만든 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
+  script(JSDoc 주석, 인터페이스, 목 데이터, 핸들러)는 보존.
 
-컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 파일.
+  template 변경 사항:
+    - 참조 코드의 HTML 구조를 프로젝트 스택으로 변환
+    - 이미지 경로를 다운로드된 로컬 경로로 설정
+    - 배경 이미지 섹션은 Multi-Layer 구조 (.{section}Bg + .{section}Content)
+    - 클래스명을 외부 스타일 파일의 셀렉터와 매칭
+    - Phase 1의 기능 요소(v-for, @click, v-if)를 새 구조에 재배치
+  
+  컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 파일.
 ```
 
 #### e. 섹션 검증
 
 ```
-Grep으로 확인:
-  □ "figma.com/api" in 생성 파일 → 0건
-  □ "<style" in 컴포넌트 파일 → 0건
-  □ "placeholder" in 컴포넌트 파일 → 0건
-  □ 'src=""' in 컴포넌트 파일 → 0건
+공통 체크:
+  □ Grep: "figma.com/api" in 생성 파일 → 0건
+  □ Grep: "placeholder" in 컴포넌트 파일 → 0건
+  □ Grep: 'src=""' in 컴포넌트 파일 → 0건
+  □ Glob: images/{feature}/*.webp → 이미지 파일 존재
+  □ Read: 컴포넌트 template에 실제 HTML 태그 존재 (빈 template 아님)
 
-Read로 확인:
-  □ 컴포넌트 template에 실제 HTML 태그 존재 (빈 template 아님)
-  □ 외부 스타일 파일에 font-size, color, background-image 존재
+일반 모드 추가 체크:
+  □ Grep: "<style" in 컴포넌트 파일 → 0건
+  □ Grep: 'style="' in 컴포넌트 파일 → 0건
+  □ Read: 외부 스타일 파일에 font-size, color, background-image 존재
 
-Glob로 확인:
-  □ 이미지 파일 존재 (public/images/{feature}/*.webp)
+직역 모드 추가 체크:
+  □ Read: <style scoped> 블록에 position, transform, mix-blend-mode 존재
+  □ 에셋 수 = 다운로드된 이미지 수 (누락 0)
 
 실패 시 → 해당 항목 수정 → 재검증
 ```

package/skills/vibe-figma/rubrics/extraction-checklist.md

@@ -0,0 +1,51 @@
+# Extraction Checklist — What to Extract from Figma
+
+## Colors
+
+- [ ] Background colors (`bg-[#...]`) — section, card, overlay backgrounds
+- [ ] Text colors (`text-[#...]`) — heading, body, label, disabled states
+- [ ] Border colors (`border-[#...]`) — dividers, input outlines
+- [ ] Overlay/alpha colors (`rgba(...)`) — modals, hover states
+- [ ] Gradient stops — linear/radial gradients with exact hex + stop positions
+- [ ] Blend mode colors — any element using `mix-blend-*`
+
+## Spacing
+
+- [ ] Section padding (`pt-[Npx]`, `pb-[Npx]`, `px-[Npx]`)
+- [ ] Component gaps (`gap-[Npx]`) — flex/grid item spacing
+- [ ] Inner padding (`p-[Npx]`, `px-[Npx]`) — cards, buttons
+- [ ] Margin overrides (`mt-`, `mb-`, `ml-`, `mr-`)
+- [ ] Absolute offsets (`top-[Npx]`, `left-[Npx]`) — positioned layers
+
+## Typography
+
+- [ ] Font family — extract from `font-[family-name:var(--...)]` fallback
+- [ ] Font sizes (`text-[Npx]`) — all unique sizes per role (heading, sub, body, caption)
+- [ ] Font weights (`font-black/bold/semibold/medium/normal`)
+- [ ] Line heights (`leading-[N]` or `leading-[Npx]`)
+- [ ] Letter spacing (`tracking-[Npx]` or `tracking-[-Npx]`)
+- [ ] Text alignment (`text-center`, `text-left`, `text-right`)
+- [ ] Text decoration / transform if present
+
+## Components
+
+- [ ] Button variants — primary, secondary, disabled; exact size + color + radius
+- [ ] Card structures — border, shadow (`shadow-[...]`), border-radius
+- [ ] Icon dimensions — width/height from `w-[Npx] h-[Npx]`
+- [ ] Badges/tags — background color, font, padding, radius
+- [ ] Input fields — border, focus ring, placeholder color
+- [ ] Navigation — GNB/footer height, link styles
+
+## Assets
+
+- [ ] All `const img...` URL variables in reference code — zero omissions
+- [ ] Background images vs content images vs decorative images classified
+- [ ] Image dimensions noted for `width`/`height` attributes
+- [ ] Sprite/overflow images identified (left negative %, width >100%)
+
+## Tokens to Create
+
+- [ ] Color tokens for every unique hex value used more than once
+- [ ] Spacing tokens for recurring gap/padding values
+- [ ] Typography tokens for each font-size role
+- [ ] Breakpoint token (`$bp-pc`) from CONFIG frame

package/skills/vibe-figma/templates/figma-handoff.md

@@ -0,0 +1,96 @@
+# Figma Handoff — {{FEATURE_NAME}}
+
+**Figma File:** {{FIGMA_FILE_URL}}
+**Feature Key:** {{FEATURE_KEY}} (kebab-case)
+**Date:** {{DATE}}
+**Stack:** {{STACK}} (e.g. Vue/Nuxt + SCSS, React/Next.js + SCSS)
+
+---
+
+## Design Specs
+
+### Viewport / Scale
+
+| Breakpoint | Design Width | Target Width | Scale Factor |
+|-----------|-------------|-------------|-------------|
+| Mobile (base) | {{DESIGN_MOBILE_PX}}px | {{TARGET_MOBILE_PX}}px | {{SCALE_MOBILE}} |
+| Desktop | {{DESIGN_PC_PX}}px | {{TARGET_PC_PX}}px | {{SCALE_PC}} |
+
+Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
+
+### Color Tokens
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `$color-{{NAME}}` | `{{HEX}}` | {{USAGE}} |
+
+### Typography Tokens
+
+| Token | Figma px | Scaled px | Weight | Role |
+|-------|---------|----------|--------|------|
+| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{WEIGHT}} | {{ROLE}} |
+
+### Spacing Tokens
+
+| Token | Figma px | Scaled px | Usage |
+|-------|---------|----------|-------|
+| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{USAGE}} |
+
+---
+
+## Sections
+
+| # | Section Name | Component File | Mode | Height (design) |
+|---|-------------|---------------|------|----------------|
+| 1 | {{SECTION_NAME}} | `components/{{FEATURE_KEY}}/{{ComponentName}}.vue` | {{MODE}} | {{HEIGHT}}px |
+
+**Mode key:** `normal` = external SCSS | `literal` = scoped CSS (non-standard layout)
+
+---
+
+## Asset Manifest
+
+| Variable | Local Path | Type | Alt Text |
+|----------|-----------|------|----------|
+| `{{IMG_VAR}}` | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.webp` | {{bg\|content\|decorative}} | {{ALT}} |
+
+Total assets: {{ASSET_COUNT}}
+
+---
+
+## File Structure
+
+```
+components/{{FEATURE_KEY}}/
+  {{ComponentName}}.vue
+
+public/images/{{FEATURE_KEY}}/
+  {{FILE_NAME}}.webp
+
+styles/{{FEATURE_KEY}}/
+  index.scss
+  _tokens.scss
+  _mixins.scss
+  _base.scss
+  layout/
+    _{{section}}.scss
+  components/
+    _{{section}}.scss
+```
+
+---
+
+## Verification Checklist
+
+- [ ] No `figma.com/api` URLs in any generated file
+- [ ] No `placeholder` or empty `src=""` in components
+- [ ] No `<style>` blocks in components (normal mode)
+- [ ] All assets downloaded and non-zero bytes
+- [ ] Build passes without errors
+- [ ] Screenshot comparison: P1 issues = 0
+
+---
+
+## Notes
+
+{{NOTES}}

package/skills/vibe-figma-analyze/rubrics/analysis-dimensions.md

@@ -0,0 +1,53 @@
+# Analysis Dimensions — Figma Design Analysis
+
+> This skill is merged into vibe-figma (Phase 1: Storyboard). These dimensions guide what to extract and evaluate when reading Figma frames.
+
+## Layout
+
+- [ ] Overall page structure — single column, multi-column, grid, or free-form absolute
+- [ ] Section boundaries — identify where each distinct section starts/ends by visual grouping
+- [ ] Container width — fixed px vs fluid (100%)
+- [ ] Alignment system — centered, left-aligned, or asymmetric
+- [ ] Z-layering — how many stacked layers exist (BG/content/overlay count)
+- [ ] Overflow behavior — clip, hidden, visible, scroll
+
+## Spacing Consistency
+
+- [ ] Gap between sections — does a single spacing value repeat, or is each unique?
+- [ ] Internal component padding — consistent across card variants?
+- [ ] Icon-to-text gap — uniform within a component family?
+- [ ] Recurring values — list values that appear 3+ times (these become spacing tokens)
+- [ ] Irregular values — flag one-off spacings that may indicate design inconsistency
+
+## Color Usage
+
+- [ ] Background palette — how many distinct background colors exist?
+- [ ] Text color roles — identify heading / body / label / disabled colors separately
+- [ ] Accent/brand colors — primary CTA color, hover state color
+- [ ] Transparency usage — rgba overlays, opacity layers
+- [ ] Blend modes present — `mix-blend-lighten`, `multiply`, `hue` flag a literal-mode section
+- [ ] Dark/light variants — does the design have both, requiring CSS variable tokens?
+
+## Typography Hierarchy
+
+- [ ] H1 equivalent — largest display text, font-size + weight + role
+- [ ] H2 / section heading — size, weight, color
+- [ ] Body text — base size, line-height, color
+- [ ] Caption / label text — smallest size, usage context
+- [ ] Font families — how many distinct families? Any variable fonts?
+- [ ] Responsive scaling — does font-size change across breakpoints?
+
+## Component Inventory
+
+- [ ] Repeating UI patterns — cards, list items, tabs (candidates for `v-for`)
+- [ ] State variants — default, hover, active, disabled, selected (note which states exist)
+- [ ] Shared components — GNB, Footer, Popup (already in project or needs creation?)
+- [ ] Interactive elements — buttons, links, inputs, toggles
+- [ ] Decorative elements — particles, background shapes, overlay effects
+
+## Storyboard-Specific Dimensions
+
+- [ ] Frame classification — SPEC, CONFIG, SHARED, PAGE (by name pattern)
+- [ ] Interaction annotations — arrows, overlay connections, state transitions in Figma
+- [ ] Section count — total PAGE frames that need components
+- [ ] Tall frames (1500px+) — flag for split strategy before `get_design_context`

package/skills/vibe-figma-codegen/rubrics/code-quality.md

@@ -0,0 +1,54 @@
+# Code Generation Quality Checklist
+
+> This skill is merged into vibe-figma-convert. Use this checklist to validate generated component and style files before moving to the next section.
+
+## Structure
+
+- [ ] Component file exists at `components/{feature}/{ComponentName}.vue` (or `.tsx`)
+- [ ] Template is not empty — at least one visible HTML element with content
+- [ ] No `placeholder` text remaining in any attribute or text node
+- [ ] No `src=""` or `href=""` empty attributes
+
+## Assets
+
+- [ ] All `const img...` variables from reference code are replaced with local `/images/{feature}/` paths
+- [ ] No `figma.com/api` URLs in any generated file
+- [ ] Every image path references a file that was actually downloaded (cross-check image map)
+- [ ] Decorative images have `alt="" aria-hidden="true"`
+- [ ] Content images have descriptive `alt` text
+
+## Styles (Normal Mode)
+
+- [ ] No `<style>` block inside the component file
+- [ ] No inline `style=""` attribute (exception: dynamic `:style` for mask-image)
+- [ ] External layout file exists at `styles/{feature}/layout/_{section}.scss`
+- [ ] External components file exists at `styles/{feature}/components/_{section}.scss`
+- [ ] `_tokens.scss` updated with any new unique color/spacing/typography values
+
+## Styles (Literal Mode)
+
+- [ ] `<style scoped>` block present in component
+- [ ] No external SCSS files created for this section
+- [ ] All `position: absolute` coordinates are scaled by scaleFactor
+- [ ] `mix-blend-mode`, `rotate`, `blur`, `mask-image` values preserved verbatim
+- [ ] `%` values not scaled (only `px` values are scaled)
+
+## TypeScript / Script
+
+- [ ] JSDoc comment present with `[기능 정의]`, `[인터랙션]`, `[상태]` sections
+- [ ] No `any` type — use explicit interfaces or `unknown`
+- [ ] Mock data arrays have 3–7 items (not empty `[]`)
+- [ ] Event handler stubs exist with `// TODO:` body
+- [ ] Explicit return types on all functions
+
+## Responsive
+
+- [ ] Base styles target the smallest viewport (mobile-first)
+- [ ] Desktop overrides use `@media (min-width: {$bp-pc})` or the project mixin
+- [ ] No existing base styles deleted when adding breakpoint overrides
+
+## Build
+
+- [ ] No TypeScript compile errors in the generated file
+- [ ] No missing imports (components, composables, types)
+- [ ] Template references only props/data/computed that are declared in `<script setup>`

package/skills/vibe-figma-consolidate/templates/consolidation-report.md

@@ -0,0 +1,95 @@
+# Consolidation Report — {{FEATURE_NAME}}
+
+**Feature Key:** {{FEATURE_KEY}}
+**Date:** {{DATE}}
+**Phase:** Post-implementation verification
+
+---
+
+## Summary
+
+| Metric | Value |
+|--------|-------|
+| Total sections | {{SECTION_COUNT}} |
+| Sections passing | {{PASS_COUNT}} |
+| P1 issues found | {{P1_COUNT}} |
+| P2 issues found | {{P2_COUNT}} |
+| Assets downloaded | {{ASSET_COUNT}} |
+| Build status | {{BUILD_STATUS}} |
+
+---
+
+## Automated Grep Results
+
+| Check | Result | Details |
+|-------|--------|---------|
+| `figma.com/api` in generated files | {{PASS/FAIL}} | {{COUNT}} occurrences |
+| `<style` in `components/{{FEATURE_KEY}}/` | {{PASS/FAIL}} | {{COUNT}} occurrences |
+| `style="` in `components/{{FEATURE_KEY}}/` | {{PASS/FAIL}} | {{COUNT}} occurrences |
+| `placeholder` in components | {{PASS/FAIL}} | {{COUNT}} occurrences |
+| `src=""` in components | {{PASS/FAIL}} | {{COUNT}} occurrences |
+| Images in `public/images/{{FEATURE_KEY}}/` | {{PASS/FAIL}} | {{COUNT}} files |
+
+---
+
+## Section Review
+
+| # | Section | Component | Mode | Screenshot Match | P1 | P2 |
+|---|---------|-----------|------|-----------------|----|----|
+| 1 | {{SECTION_NAME}} | `{{ComponentName}}.vue` | {{normal/literal}} | {{match %}} | {{count}} | {{count}} |
+
+---
+
+## P1 Issues (Must Fix)
+
+### {{SECTION_NAME}} — {{ISSUE_TITLE}}
+
+**Type:** {{image-missing / layout-mismatch / text-unstyled / asset-wrong-path}}
+**Description:** {{DESCRIPTION}}
+**Fix:** {{FIX_INSTRUCTION}}
+**Status:** {{open / fixed}}
+
+---
+
+## P2 Issues (Recommended)
+
+### {{SECTION_NAME}} — {{ISSUE_TITLE}}
+
+**Type:** {{spacing-delta / color-delta / font-size-delta}}
+**Description:** {{DESCRIPTION}} (delta: {{DELTA}})
+**Fix:** {{FIX_INSTRUCTION}}
+**Status:** {{open / deferred}}
+
+---
+
+## File Manifest
+
+### Components
+
+```
+components/{{FEATURE_KEY}}/
+{{FILE_LIST}}
+```
+
+### Styles
+
+```
+styles/{{FEATURE_KEY}}/
+{{FILE_LIST}}
+```
+
+### Assets
+
+```
+public/images/{{FEATURE_KEY}}/
+{{FILE_LIST}}
+```
+
+---
+
+## Next Steps
+
+- [ ] P1 count = 0 (required before handoff)
+- [ ] Run `/design-normalize` → `/design-audit --quick`
+- [ ] Optional: `/design-critique` → `/design-polish` for thorough review
+- [ ] Commit with feature key tag: `feat({{FEATURE_KEY}}): figma design implementation`