@su-record/vibe 2.8.24 → 2.8.26

package/skills/vibe-figma/SKILL.md

@@ -13,22 +13,11 @@ tier: standard
 ❌ CSS로 이미지 재현 (삼각형/원/gradient로 나무/눈사람/배경 그리기)
 ❌ 이미지 다운로드 없이 코드 생성 진행
 ❌ placeholder / 빈 template / 빈 src="" 남기기
-❌ CSS 값을 추정 (참조 코드에 정확한 값이 있음)
+❌ CSS 값을 추정 (참조 코드의 Tailwind 클래스에 정확한 값이 있음)
 ❌ 브라우저 기본 스타일(검은색 16px)로 보이는 텍스트
-❌ 핵심 에셋만 다운로드 (참조 코드의 모든 에셋을 빠짐없이 다운로드)
-```
-
-### 스타일 배치 규칙 (모드별)
-
-```
-일반 모드:
-  ❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
-  ✅ 외부 SCSS 파일에만 스타일 작성
-
-직역 모드:
-  ✅ <style scoped> 블록 허용 (Tailwind→CSS 1:1 변환)
-  ✅ 인라인 :style="" 허용 (maskImage 등 동적 값)
-  ❌ 외부 SCSS 파일에 추상화된 스타일 작성 (원본 좌표 손실)
+❌ 핵심 에셋만 다운로드 (const img... 전부 다운로드)
+❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
+✅ 외부 SCSS 파일에만 스타일 작성
 ```
 
 ## 전체 플로우
@@ -62,7 +51,7 @@ tier: standard
 4. 디렉토리 생성:
    - components/{feature}/
    - public/images/{feature}/ (또는 static/images/{feature}/)
-   - styles/{feature}/ (layout/, components/ 하위) — Phase 2에서 일반 모드 섹션이 있을 때만
+   - styles/{feature}/ (layout/, components/ 하위)
 ```
 
 ---
@@ -189,225 +178,164 @@ Phase 1 완료 조건:
 
 ---
 
-## Phase 2: Design (핵심)
+## Phase 2: Design
 
-Phase 1에서 컴포넌트가 이미 존재 (레이아웃 + 기능 주석 + 목 데이터).
-Phase 2에서는 이 컴포넌트에 **디자인(이미지 + 스타일)**을 입힌다.
-
-모바일 퍼스트 강제. CSS base = 최소 뷰포트, @media (min-width:)로 확장.
+Phase 1 컴포넌트에 **이미지 + 스타일**을 입힌다.
+모바일 퍼스트. base = 최소 뷰포트, @media (min-width:)로 확장.
 
 사용자에게 질문한다:
 - question: "베이스 디자인(모바일) Figma URL을 입력해주세요."
 - options 제공 금지 — 자유 텍스트 입력만 허용
 
-→ base 스타일로 처리 (2-1, 2-2 실행).
+→ 2-1 → 2-2 섹션 루프 실행.
 
-처리 완료 후 다시 질문한다:
+완료 후 다시 질문:
 - question: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
-- options 제공 금지
-
-→ URL 입력 시: @media (min-width:) 레이어 추가 후 다시 질문
+→ URL 입력 시: 2-3 반응형 추가 후 다시 질문
 → "없음" 응답 시: Phase 3으로
 
-브레이크포인트는 프레임 width에서 자동 산출.
-예: 720px → 480px(스케일), 2560px → 1920px(스케일) → @media (min-width: 1024px)
-
-### 2-1. 스타일 파일 내용 작성 (첫 섹션 전)
+### 2-1. SCSS Setup + 등록 (첫 섹션 전)
 
 ```
-Phase 1에서 빈 파일로 만든 스타일 구조에 기본 내용 Write:
-  styles/{feature}/index.scss      ← @use 진입점
-  styles/{feature}/_tokens.scss    ← 빈 파일 (섹션 처리하며 채움)
+SCSS 파일 기본 내용 Write:
+  styles/{feature}/index.scss      ← @import 진입점
+  styles/{feature}/_tokens.scss    ← 빈 파일 (섹션마다 채움)
   styles/{feature}/_mixins.scss    ← breakpoint mixin
-  styles/{feature}/_base.scss      ← reset, font-face
+  styles/{feature}/_base.scss      ← 루트 클래스 (.winterPcbang 등)
   styles/{feature}/layout/         ← 디렉토리
   styles/{feature}/components/     ← 디렉토리
-```
 
-### 2-2. 비정형 레이어 감지 (섹션별)
+스타일 등록 (BLOCKING — 미등록 시 섹션 루프 진행 금지):
+  Grep "{feature}/index.scss" → 이미 등록되어 있으면 건너뜀.
 
-```
-각 섹션의 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 등)은 직역 내에서 유지
-```
+  ■ 신규 프로젝트 (--new):
+    루트 페이지 파일에서 직접 로드:
+    pages/{feature}.vue → <style lang="scss" src="~/assets/scss/{feature}/index.scss" />
+    app/{feature}/page.tsx → import '~/styles/{feature}/index.scss'
 
-### 2-3. 큰 섹션 분할
+  ■ 기존 프로젝트 (업데이트):
+    Grep "\.scss\|\.css" in nuxt.config.*/next.config.*/vite.config.*/main.ts
+    → 기존 방식과 동일하게 등록
 
-```
-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개로 크기 큼)
+  검증: Grep "{feature}/index.scss" in 프로젝트 전체 → 0건이면 실패
 ```
 
-### 2-4. 섹션별 루프
+### 2-2. 섹션 루프
 
-**각 섹션에 대해 순서대로, 한 섹션을 완전히 완료한 후 다음으로:**
+**각 섹션을 순서대로, 한 섹션을 완전히 완료한 후 다음으로.**
 
-#### a. get_design_context 호출
+#### a. 참조 코드 획득
 
 ```
 get_design_context(fileKey, 섹션.nodeId)
 
-반환되는 것:
-  - const img변수명 = 'https://figma.com/api/mcp/asset/...' (이미지 에셋 URL들)
-  - React+Tailwind JSX 코드 (HTML 구조 + CSS 값)
-  - 스크린샷 (원본 디자인 이미지)
-  - data-name 속성 (레이어 이름: "BG", "Title", "Period" 등)
+반환:
+  - const img변수명 = 'URL' (이미지 에셋)
+  - React+Tailwind JSX (HTML 구조 + CSS 값)
+  - 스크린샷 (시각 기준점)
+  - data-name 속성 (레이어 이름: "BG", "Title" 등)
 
-이 참조 코드가 모든 작업의 기반.
+큰 섹션 (높이 1500px+):
+  get_metadata로 하위 노드 목록 → 하위 단위로 get_design_context 분할 호출
+  타임아웃 시: 1회 재시도 (excludeScreenshot: true) → 실패 시 분할
 ```
 
-#### b. 이미지 전부 다운로드 (BLOCKING)
+#### b. 이미지 다운로드 (BLOCKING)
 
 ```
-vibe-figma-extract 스킬 참조.
+참조 코드의 모든 const img... URL을 추출 → 다운로드 → 검증.
+
+변수명 → 파일명: imgSnowParticle12 → snow-particle-12.webp
+다운로드: curl -sL "{url}" -o images/{feature}/{파일명}
+검증: ls -la → 모든 파일 존재 + 0byte 아닌지
 
-참조 코드에서 모든 에셋 URL을 빠짐없이 추출 → 다운로드 → 검증.
-"핵심 에셋만" 금지. const img... 로 시작하는 모든 URL을 다운로드.
-이미지가 모두 로컬에 있어야 c 단계로 진행.
-하나라도 실패하면 코드 생성하지 않음.
+이미지 매핑 생성:
+  imageMap = { imgTitle: '/images/{feature}/title.webp', ... }
+
+전부 완료해야 c 단계로 진행. 하나라도 실패 → 코드 생성 금지.
 ```
 
-#### c. 코드 변환 (모드별 분기)
+#### c. SCSS 작성
 
 ```
-■ 직역 모드 (비정형 레이어):
-  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> 블록으로 스타일 포함.
-
-■ 일반 모드 (정형 레이어):
-  vibe-figma-convert 스킬의 기존 방식 참조.
-
-  참조 코드의 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             ← 새 토큰 추가
+참조 코드의 Tailwind 클래스에서 CSS 값을 추출하여 외부 SCSS에 작성.
+vibe-figma-extract의 Tailwind→CSS 변환표 참조.
+
+CSS 변수 패턴 처리:
+  font-[family-name:var(--font/family/pretendard,...)] → fallback 값 사용
+  text-[length:var(--font/size/heading/24,24px)]      → 24px
+  text-[color:var(--color/grayscale/300,#dadce3)]      → #dadce3
+
+scaleFactor 적용:
+  px 값 → × scaleFactor (font-size, padding, margin, gap, width, height, border-radius)
+  적용 안 함 → color, opacity, font-weight, z-index, line-height(단위 없음), % 값
+
+출력 파일:
+  styles/{feature}/layout/_{section}.scss
+    → position, display, flex, width, height, padding, overflow, z-index, background-image
+  styles/{feature}/components/_{section}.scss
+    → font-size, font-weight, color, line-height, letter-spacing, text-align,
+      border, border-radius, box-shadow, opacity
+  styles/{feature}/_tokens.scss
+    → 새로 발견된 색상/폰트/스페이싱 토큰 추가
+
+BG 레이어 패턴 (참조 코드에서 absolute + inset-0 + object-cover):
+  .{section}Bg   → position: absolute; inset: 0; z-index: 0;
+  .{section}Content → position: relative; z-index: 1;
+
+index.scss에 새 섹션 @import 추가.
 ```
 
-#### d. Phase 1 컴포넌트 template 리팩토링
+#### d. template 업데이트
 
 ```
-■ 직역 모드:
-  Phase 1 컴포넌트의 template을 참조 코드의 HTML 구조로 교체.
-  script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
-  
-  변환 핵심:
-    - 참조 코드의 div/img 구조를 거의 그대로 유지
-    - 모든 이미지 경로를 로컬 경로로 교체
-    - Phase 1의 기능 요소(v-for, @click, v-if)를 적절한 위치에 재배치
-    - <style scoped>에 Tailwind→CSS 변환 결과 포함
-    - 장식 이미지에 alt="" aria-hidden="true"
-
-■ 일반 모드:
-  vibe-figma-convert 스킬 참조.
-
-  Phase 1에서 만든 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
-  script(JSDoc 주석, 인터페이스, 목 데이터, 핸들러)는 보존.
-
-  template 변경 사항:
-    - 참조 코드의 HTML 구조를 프로젝트 스택으로 변환
-    - 이미지 경로를 다운로드된 로컬 경로로 설정
-    - 배경 이미지 섹션은 Multi-Layer 구조 (.{section}Bg + .{section}Content)
-    - 클래스명을 외부 스타일 파일의 셀렉터와 매칭
-    - Phase 1의 기능 요소(v-for, @click, v-if)를 새 구조에 재배치
-  
-  컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 파일.
+Phase 1 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
+script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
+
+1. 참조 코드의 HTML 구조를 프로젝트 스택으로 변환:
+   className → class, onClick → @click, {조건 && <X/>} → v-if 등
+
+2. 이미지 경로를 imageMap으로 교체:
+   src={imgTitle} → src="/images/{feature}/title.webp"
+
+3. BG 레이어 구조 적용:
+   .{section}Bg div (배경) + .{section}Content div (콘텐츠)
+
+4. Phase 1 기능 요소 재배치:
+   v-for, @click, v-if, $emit 등을 새 구조의 적절한 위치에 배치
+
+5. 접근성:
+   장식 이미지 → alt="" aria-hidden="true"
+   콘텐츠 이미지 → alt="설명적 텍스트"
+
+컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 SCSS.
 ```
 
 #### e. 섹션 검증
 
 ```
-공통 체크:
-  □ Grep: "figma.com/api" in 생성 파일 → 0건
-  □ Grep: "placeholder" in 컴포넌트 파일 → 0건
-  □ Grep: 'src=""' in 컴포넌트 파일 → 0건
-  □ Glob: images/{feature}/*.webp → 이미지 파일 존재
-  □ Read: 컴포넌트 template에 실제 HTML 태그 존재 (빈 template 아님)
-
-일반 모드 추가 체크:
-  □ Grep: "<style" in 컴포넌트 파일 → 0건
-  □ Grep: 'style="' in 컴포넌트 파일 → 0건
-  □ Read: 외부 스타일 파일에 font-size, color, background-image 존재
-
-직역 모드 추가 체크:
-  □ Read: <style scoped> 블록에 position, transform, mix-blend-mode 존재
-  □ 에셋 수 = 다운로드된 이미지 수 (누락 0)
-
-실패 시 → 해당 항목 수정 → 재검증
+Grep 체크:
+  □ "figma.com/api" in 생성 파일 → 0건
+  □ 'src=""' in 컴포넌트 파일 → 0건
+  □ "<style" in 컴포넌트 파일 → 0건
+
+Read 체크:
+  □ 외부 SCSS 파일에 font-size, color 존재 (브라우저 기본 스타일 방지)
+  □ 이미지 파일 수 = const img... 수 (누락 0)
+
+실패 → 수정 → 재검증
 ```
 
-### 2-3. 두 번째 URL부터: 반응형 레이어 추가
+### 2-3. 반응형 (두 번째 URL부터)
 
 ```
-두 번째 이후 URL 처리 시, 이미 스타일이 존재하므로:
-  기존 스타일은 유지하고 반응형만 추가.
-
-  같은 값 → 유지
-  다른 px 값 → clamp() 또는 @media 오버라이드
-  다른 레이아웃 → @media (min-width: $breakpoint) 추가
-  다른 배경 이미지 → @media 이미지 분기
-  기존 코드/스타일 삭제 금지
+두 번째 이후 URL: 기존 스타일 유지 + @media 추가만.
+
+같은 값 → 유지
+다른 px 값 → @media (min-width: $bp-desktop) 오버라이드
+다른 레이아웃 → @media 블록 추가
+다른 배경 이미지 → @media 이미지 분기
+기존 코드/스타일 삭제 금지
 ```
 
 ---
@@ -415,27 +343,15 @@ vibe-figma-extract 스킬 참조.
 ## Phase 3: Verification
 
 ```
-자동 Grep 체크:
-  □ Grep: "figma.com/api" in 모든 생성 파일 → 0건
-  □ Grep: "<style" in components/{feature}/ → 0건
-  □ Grep: 'style="' in components/{feature}/ → 0건
-  □ Grep: "placeholder" in components/{feature}/ → 0건
-  □ Grep: 'src=""' in components/{feature}/ → 0건
-  □ Glob: images/{feature}/*.webp → 이미지 파일 존재
+Grep 체크:
+  □ "figma.com/api" in 모든 생성 파일 → 0건
+  □ "<style" in components/{feature}/ → 0건
+  □ 'src=""' in components/{feature}/ → 0건
+  □ Glob: images/{feature}/ → 이미지 파일 존재
 
 시각 검증:
-  각 섹션에 대해:
-    get_screenshot(섹션 nodeId) → 원본
-    /vibe.utils --preview 또는 dev 서버 → 생성 결과
-    → 비교, P1/P2 분류
-
-  P1 (필수 수정): 이미지 누락, 레이아웃 구조 다름, 텍스트 스타일 미적용
-  P2 (권장 수정): 미세 간격 차이, 미세 색상 차이
-
-  P1 → 수정 → 재검증 (P1=0 될 때까지, 제한 없음)
-
-완료 후:
-  Design Quality Pipeline 안내:
-    /design-normalize → /design-audit (quick)
-    + /design-critique → /design-polish (thorough)
+  각 섹션: get_screenshot(nodeId) vs dev 서버/preview 비교
+  P1 (필수): 이미지 누락, 레이아웃 구조 다름, 텍스트 스타일 미적용
+  P2 (권장): 미세 간격, 미세 색상 차이
+  → P1 수정 → 재검증 (P1=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>`