@su-record/vibe 2.8.39 → 2.8.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.39",
+  "version": "2.8.40",
   "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

@@ -37,11 +37,43 @@ Figma 트리가 코드의 원천이다. 스크린샷은 검증용이다.
 ```
 /vibe.figma
   → Phase 0: Setup (스택 감지, 디렉토리 생성, 기존 자산 인덱싱)
-  → Phase 1: Storyboard (스토리보드 → 레이아웃 + 컴포넌트 + 기능 정의)
-  → Phase 2: 재료 확보 (디자인 URL → 트리 + 이미지 + 스크린샷)
+  → Phase 1: Storyboard (스토리보드 → 기능 스펙 문서 작성, 파일 생성 없음)
+  → Phase 2: 재료 확보 (디자인 URL → 트리 + 노드 렌더링 이미지 + 스크린샷)
   → Phase 3: 구조적 코드 생성 (트리 → HTML+SCSS 매핑 + 시맨틱 보강)
   → Phase 3.5: 컴파일 게이트 (tsc → build → dev 확인)
   → Phase 4: 시각 검증 루프 (렌더링 vs 스크린샷 비교 → 수정)
+  ─── 추가 브레이크포인트가 있으면 Phase 2~4 반복 ───
+  → Phase 5: 공통화 (브레이크포인트별 작업 병합 → 최종 프로젝트 구조)
+
+브레이크포인트별 작업 구조:
+  각 Figma URL의 ROOT name에서 폴더명 추출 (kebab-case):
+    "MO_Main ..."  → /tmp/{feature}/mo-main/
+    "PC_Main ..."  → /tmp/{feature}/pc-main/
+
+  /tmp/{feature}/
+  ├── mo-main/              ← 첫 번째 URL (모바일)
+  │   ├── tree.json
+  │   ├── bg/
+  │   ├── content/
+  │   └── sections/
+  ├── pc-main/              ← 두 번째 URL (데스크탑)
+  │   ├── tree.json
+  │   ├── bg/
+  │   ├── content/
+  │   └── sections/
+  └── final/                ← Phase 5 공통화 결과
+      ├── components/{feature}/
+      └── styles/{feature}/
+
+Phase 5 공통화:
+  1. 각 브레이크포인트의 컴포넌트 diff
+     → 구조 동일: 1개로 병합
+     → 구조 다름: props로 분기 또는 별도 유지
+  2. SCSS diff
+     → 같은 값: 기본 스타일
+     → 다른 값: @media 오버라이드
+  3. 토큰 diff → 합집합 정리
+  4. /tmp/ 임시 폴더 → 프로젝트 디렉토리에 최종 배치
 ```
 
 ---
@@ -186,7 +218,7 @@ URL에서 fileKey, nodeId 추출
 
 2단계: name 패턴으로 프레임 분류
   SPEC   — "기능 정의서", "정책" → depth 높여서 텍스트 추출
-  CONFIG — "해상도", "브라우저" → 스케일 팩터 계산
+  CONFIG — "해상도", "브라우저" → designWidth, minWidth, breakpoint 확보
   SHARED — "공통", "GNB", "Footer", "Popup" → 공통 컴포넌트 파악
   PAGE   — "화면설계", "메인 -" → 섹션 목록 + 인터랙션 스펙
 
@@ -369,15 +401,26 @@ Phase 2 완료 시 /tmp/{feature}/ 에 다음이 준비되어야 함:
   - 간격: padding, gap, margin 사용 빈도 높은 값
 ```
 
-### 스케일 팩터
+### 반응형 단위 (scaleFactor 사용하지 않음)
 
 ```
-스토리보드 CONFIG 또는 기본값에서:
-  모바일: scaleFactor = 480 / 720 = 0.667 (또는 targetMobile / designMobile)
-  PC:     scaleFactor = 1920 / 2560 = 0.75 (또는 targetPc / designPc)
+스토리보드 CONFIG에서 확보:
+  designWidth: 디자인 너비 (예: 모바일 720px, PC 2560px)
+  minWidth: 최소 지원 너비 (예: 340px)
+  breakpoint: PC/모바일 분계 (예: 1025px)
+
+UI 요소 → vw 비례:
+  vw값 = (Figma px / designWidth) × 100
+  예: gap: 24px → 24/720 × 100 = 3.33vw
+  예: width: 620px → 620/720 = 86.11% (부모 대비)
+
+폰트 → clamp(최소, vw, 최대):
+  최소값 = 역할별 가독성 기준 (h1:16px, 본문:12px, 캡션:10px)
+  vw값 = (Figma px / designWidth) × 100
+  최대값 = Figma 원본 px
+  예: 24px 본문 → clamp(12px, 3.33vw, 24px)
 
-적용 대상: font-size, padding, margin, gap, border-radius, width, height
-적용 안 함: color, opacity, font-weight, z-index, line-height(단위 없을 때)
+변환 안 함: color, opacity, font-weight, z-index, line-height(단위 없을 때)
 ```
 
 ---
@@ -552,7 +595,7 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
       - 반복 패턴 (동일 구조 3+) → v-for
    c. CSS 직접 매핑:
       - node.css의 모든 속성을 SCSS에 1:1 매핑
-      - scaleFactor 적용 (px 값만)
+      - vw/clamp 반응형 단위 변환 (vibe.figma.convert 참조)
       - tree.json에 없는 CSS 값은 작성하지 않음
    d. Phase 1의 JSDoc, 인터페이스, 핸들러 보존
 
@@ -589,7 +632,7 @@ Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
 SCSS (vibe.figma.convert 참조):
   layout/ → position, display, flex, width, height, padding, gap
   components/ → font, color, border, shadow, opacity
-  모든 수치는 재료함의 정확한 값 × scaleFactor.
+  모든 수치는 tree.json의 정확한 값 → vw/clamp 변환 (vibe.figma.convert 참조).
   추정 금지 — 값이 없으면 tree.json에서 다시 찾는다.
 ```
 
@@ -780,7 +823,7 @@ import { getComputedStyles, compareStyles, diffsToIssues } from 'src/infra/lib/b
      ])
 
   2. Figma 재료함의 기대값과 비교:
-     // tree.json에서 해당 노드의 CSS 수치 (scaleFactor 적용 후)
+     // tree.json에서 해당 노드의 CSS 수치 (vw/clamp 변환 후)
      const expected = { 'font-size': '16px', 'color': '#ffffff', 'width': '465px' }
      const diffs = compareStyles(expected, actual)
 

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

@@ -9,14 +9,15 @@
 
 ## Design Specs
 
-### Viewport / Scale
+### Viewport / Responsive
 
-| 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 | Design Width | Min Width | CSS 단위 |
+|-----------|-------------|-----------|---------|
+| Mobile (base) | {{DESIGN_MOBILE_PX}}px | {{MIN_WIDTH}}px | vw + clamp |
+| Desktop | {{DESIGN_PC_PX}}px | — | vw + clamp |
 
 Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
+ROOT folder: `{{MO_FOLDER}}/`, `{{PC_FOLDER}}/`
 
 ### Color Tokens
 
@@ -26,15 +27,15 @@ Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
 
 ### Typography Tokens
 
-| Token | Figma px | Scaled px | Weight | Role |
-|-------|---------|----------|--------|------|
-| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{WEIGHT}} | {{ROLE}} |
+| Token | Figma px | vw | clamp 최소 | Role |
+|-------|---------|-----|----------|------|
+| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{VW}}vw | {{MIN_PX}}px | {{ROLE}} |
 
 ### Spacing Tokens
 
-| Token | Figma px | Scaled px | Usage |
-|-------|---------|----------|-------|
-| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{SCALED_PX}}px | {{USAGE}} |
+| Token | Figma px | vw | Usage |
+|-------|---------|-----|-------|
+| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{VW}}vw | {{USAGE}} |
 
 ---
 
@@ -44,38 +45,40 @@ Breakpoint threshold: `@media (min-width: {{BP_PC}}px)`
 |---|-------------|---------------|-----------|----------------|
 | 1 | {{SECTION_NAME}} | `components/{{FEATURE_KEY}}/{{ComponentName}}.vue` | {{NODE_COUNT}} | {{HEIGHT}}px |
 
-**Generation:** tree.json → HTML+SCSS 구조적 매핑 (external SCSS)
+**Generation:** tree.json → HTML+SCSS 구조적 매핑 (vw/clamp 반응형)
 
 ---
 
 ## Asset Manifest
 
-| Variable | Local Path | Type | Alt Text |
-|----------|-----------|------|----------|
-| `{{IMG_VAR}}` | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.webp` | {{bg\|content\|decorative}} | {{ALT}} |
+| Image | Local Path | Type | Render Method |
+|-------|-----------|------|--------------|
+| {{NAME}} | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.png` | {{bg\|content\|vector-text}} | {{frame-render\|node-render\|group-render}} |
 
-Total assets: {{ASSET_COUNT}}
+Total assets: {{ASSET_COUNT}} (BG 렌더링 {{BG_COUNT}}장 + 콘텐츠 {{CONTENT_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
+/tmp/{{FEATURE_KEY}}/
+  {{MO_FOLDER}}/                ← 모바일 작업
+    tree.json
+    bg/
+    content/
+    sections/
+  {{PC_FOLDER}}/                ← 데스크탑 작업
+    ...
+  final/                        ← Phase 5 공통화 결과
+    components/{{FEATURE_KEY}}/
+    styles/{{FEATURE_KEY}}/
+      index.scss
+      _tokens.scss
+      _mixins.scss
+      _base.scss
+      layout/
+      components/
 ```
 
 ---
@@ -84,8 +87,9 @@ styles/{{FEATURE_KEY}}/
 
 - [ ] 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
+- [ ] No `<style>` blocks in components
+- [ ] All images are node-rendered (no imageRef direct download)
+- [ ] No image file > 5MB (텍스처 fill 의심)
 - [ ] Build passes without errors
 - [ ] Screenshot comparison: P1 issues = 0
 

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

@@ -44,7 +44,8 @@ component-index (/tmp/{feature}/component-index.json) 에서 매칭되는 컴포
   - tree.json (노드 트리 + CSS 속성 — 코드 생성의 PRIMARY 소스)
   - /tmp/{feature}/images/ (다운로드된 이미지 에셋)
   - 섹션 스크린샷 (검증용 — 생성에 사용하지 않음)
-  - scaleFactor (모바일: 480/720=0.667, PC: 1920/2560=0.75)
+  - designWidth (스토리보드 CONFIG: 모바일 720px, PC 2560px)
+  - minWidth (최소 지원: 340px)
 
 출력:
   - 컴포넌트 파일 (Vue SFC / React TSX)
@@ -92,10 +93,10 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
   node.css.flexDirection   → flex-direction
   node.css.justifyContent  → justify-content
   node.css.alignItems      → align-items
-  node.css.gap             → gap (× scaleFactor)
-  node.css.padding         → padding (× scaleFactor)
-  node.css.width           → width (× scaleFactor)
-  node.css.height          → height (× scaleFactor)
+  node.css.gap             → gap (→ vw 변환)
+  node.css.padding         → padding (→ vw 변환)
+  node.css.width           → width (→ vw 또는 % 변환)
+  node.css.height          → height (→ vw 변환, 또는 auto)
   node.css.overflow        → overflow
   node.css.position        → position
 
@@ -103,24 +104,52 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
   node.css.backgroundColor → background-color
   node.css.color           → color
   node.css.fontFamily      → font-family
-  node.css.fontSize        → font-size (× scaleFactor)
+  node.css.fontSize        → font-size (→ clamp 변환)
   node.css.fontWeight      → font-weight
   node.css.lineHeight      → line-height
-  node.css.letterSpacing   → letter-spacing (× scaleFactor)
+  node.css.letterSpacing   → letter-spacing (→ vw 변환)
   node.css.textAlign       → text-align
-  node.css.borderRadius    → border-radius (× scaleFactor)
-  node.css.border          → border (width만 × scaleFactor)
-  node.css.boxShadow       → box-shadow (px값만 × scaleFactor)
+  node.css.borderRadius    → border-radius (→ vw 변환)
+  node.css.border          → border (width → vw 변환)
+  node.css.boxShadow       → box-shadow (px → vw 변환)
   node.css.opacity         → opacity
   node.css.mixBlendMode    → mix-blend-mode
-  node.css.filter          → filter (px값만 × scaleFactor)
-  node.css.backdropFilter  → backdrop-filter (px값만 × scaleFactor)
-
-scaleFactor 적용:
-  ✅ 적용: width, height, padding, gap, margin, font-size, letter-spacing,
-           border-radius, border-width, box-shadow px, filter px
-  ❌ 미적용: color, opacity, font-weight, font-family, z-index,
-            line-height(단위 없을 때), text-align, mix-blend-mode
+  node.css.filter          → filter (px → vw 변환)
+  node.css.backdropFilter  → backdrop-filter (px → vw 변환)
+
+반응형 단위 변환 (scaleFactor 사용하지 않음):
+  스토리보드 CONFIG에서 확보:
+    designWidth: 디자인 너비 (예: 720px 모바일, 2560px PC)
+    minWidth: 최소 지원 너비 (예: 340px)
+    breakpoint: PC/모바일 분계 (예: 1025px)
+
+  UI 요소 (width, height, padding, gap, border-radius, shadow 등):
+    → vw 비례: vw값 = (Figma px / designWidth) × 100
+    → 예: gap: 24px / 720 × 100 = 3.33vw
+    → width: 부모 대비 %도 가능 (620/720 = 86%)
+
+  폰트 (font-size):
+    → clamp(최소, vw, 최대): 가독성 최소값 보장
+    → vw값 = (Figma px / designWidth) × 100
+    → 최소값 = 역할(role)에 따라 결정 (Claude 시맨틱 판단)
+    → 최대값 = Figma 원본 px
+
+    | 역할 | 최소 | 판단 기준 |
+    |------|------|----------|
+    | h1~h2 제목 | 16px | name에 "title", 가장 큰 fontSize |
+    | h3~h4 소제목 | 14px | 중간 크기 fontSize |
+    | 본문 p | 12px | TEXT 노드, 긴 텍스트 |
+    | 캡션/라벨 | 10px | 작은 fontSize, 짧은 텍스트 |
+    | 버튼 | 12px | name에 "btn" |
+
+    예시:
+      디자인 24px, 본문 → font-size: clamp(12px, 3.33vw, 24px);
+      디자인 48px, 제목 → font-size: clamp(16px, 6.67vw, 48px);
+      디자인 16px, 캡션 → font-size: clamp(10px, 2.22vw, 16px);
+
+  변환하지 않는 속성:
+    color, opacity, font-weight, font-family, z-index,
+    line-height(단위 없을 때), text-align, mix-blend-mode
 
 값이 없으면:
   → 해당 속성 생략 (추정 금지)
@@ -173,21 +202,21 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
               background-color, background-image, mix-blend-mode, filter
 ```
 
-### layout 예시 (트리 기반 — 추정 없음)
+### layout 예시 (트리 기반 — vw 반응형)
 
 ```scss
 // tree.json 데이터:
 // Hero: { width:720, height:1280 }
 // Title: { display:flex, flexDirection:column, alignItems:center, gap:24px, width:620, height:230 }
 // Period: { display:flex, flexDirection:column, gap:10px, padding:"22px 14px", width:600, height:220 }
-// scaleFactor = 0.667
+// designWidth = 720px → vw = (px / 720) × 100
 
 @use '../tokens' as t;
 
 .heroSection {
   position: relative;
   width: 100%;
-  height: 854px;              // 1280 × 0.667
+  height: 177.78vw;           // 1280 / 720 × 100
   overflow: hidden;           // tree: overflow:hidden
 }
 
@@ -195,30 +224,32 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
   display: flex;              // tree: display:flex
   flex-direction: column;     // tree: flexDirection:column
   align-items: center;        // tree: alignItems:center
-  gap: 16px;                  // tree: 24 × 0.667
-  width: 414px;               // tree: 620 × 0.667
+  gap: 3.33vw;                // tree: 24 / 720 × 100
+  width: 86.11%;              // tree: 620 / 720 (부모 대비 %)
 }
 
 .heroPeriod {
   display: flex;              // tree: display:flex
   flex-direction: column;     // tree: flexDirection:column
-  gap: 7px;                   // tree: 10 × 0.667
-  padding: 15px 9px;          // tree: "22px 14px" × 0.667
-  width: 400px;               // tree: 600 × 0.667
+  gap: 1.39vw;                // tree: 10 / 720 × 100
+  padding: 3.06vw 1.94vw;    // tree: "22px 14px" / 720 × 100
+  width: 83.33%;              // tree: 600 / 720
 }
 ```
 
-### components 예시 (트리 기반)
+### components 예시 (트리 기반 — clamp 폰트)
 
 ```scss
 // tree.json 데이터:
 // TEXT "참여 대상": { fontSize:24px, fontWeight:600, color:#ffffff, fontFamily:Pretendard }
 // BTN_Share: { borderRadius:500px, backgroundColor:rgba(13,40,61,0.5), border:"1px solid #ffffff" }
+// designWidth = 720px, minWidth = 340px
 
 @use '../tokens' as t;
 
 .heroTarget {
-  font-size: 16px;            // tree: 24 × 0.667
+  // 본문 역할 → 최소 12px
+  font-size: clamp(12px, 3.33vw, 24px);  // tree: 24 / 720 × 100 = 3.33vw
   font-weight: 600;           // tree: fontWeight:600
   color: #ffffff;             // tree: color:#ffffff
   font-family: t.$font-pretendard;
@@ -226,11 +257,11 @@ components/ → font-size, font-weight, color, line-height, letter-spacing,
 }
 
 .heroShareBtn {
-  border-radius: 500px;       // tree: borderRadius:500px (비율이므로 scaleFactor 미적용)
+  border-radius: 69.44vw;     // tree: 500 / 720 × 100 (원형 유지)
   background-color: rgba(13, 40, 61, 0.5);  // tree 그대로
-  border: 1px solid #ffffff;  // tree 그대로
-  width: 48px;                // tree: 72 × 0.667
-  height: 48px;               // tree: 72 × 0.667
+  border: 0.14vw solid #ffffff; // tree: 1 / 720 × 100
+  width: 10vw;                // tree: 72 / 720 × 100
+  height: 10vw;               // 정사각형 유지
   display: flex;              // tree: display:flex
   justify-content: center;    // tree: justifyContent:center
   align-items: center;        // tree: alignItems:center
@@ -382,7 +413,7 @@ function handleShare(): void {
 
 콘텐츠 이미지:
   조건: imageRef 있음 + 독립적 크기 + TEXT 형제 없음
-  매핑: width/height tree 값 × scaleFactor
+  매핑: width/height → vw 변환
   태그: <img alt="가장 가까운 TEXT 노드의 characters" />
 
 장식 이미지:
@@ -392,7 +423,7 @@ function handleShare(): void {
 
 아이콘:
   조건: VECTOR/GROUP + 크기 ≤ 64px
-  매핑: width/height × scaleFactor
+  매핑: width/height → vw 변환
   태그: <img alt="기능 설명" /> 또는 인라인 SVG
 ```
 

package/skills/vibe.figma.convert/rubrics/conversion-rules.md

@@ -42,13 +42,22 @@ line-height, letter-spacing, text-align, border, border-radius,
 box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
 ```
 
-## Scale Factor 적용
+## 반응형 단위 변환 (scaleFactor 사용하지 않음)
 
-**적용 (px 값):**
-  font-size, padding, margin, gap, width, height, border-radius,
-  border-width, box-shadow px, filter px, letter-spacing
+스토리보드 CONFIG에서 designWidth, minWidth 확보.
 
-**미적용:**
+**UI 요소 → vw 비례:**
+  vw값 = (Figma px / designWidth) × 100
+  적용: width, height, padding, gap, margin, border-radius,
+        border-width, box-shadow px, filter px, letter-spacing
+
+**폰트 → clamp(최소, vw, 최대):**
+  vw값 = (Figma px / designWidth) × 100
+  최소값 = 역할에 따라 결정:
+    h1~h2: 16px, h3~h4: 14px, 본문: 12px, 캡션: 10px, 버튼: 12px
+  최대값 = Figma 원본 px
+
+**변환하지 않는 속성:**
   color, opacity, font-weight, font-family, z-index,
   line-height(단위 없을 때), text-align, mix-blend-mode,
   rotate, % 값

package/skills/vibe.figma.convert/templates/component.md

@@ -75,48 +75,46 @@ defineProps<{
 
 ---
 
-## SCSS Layout (tree.json 직접 매핑)
+## SCSS Layout (tree.json → vw 반응형)
 
 ```scss
 // tree.json 데이터:
 // {{SECTION_NAME}}: { width:{{WIDTH}}, height:{{HEIGHT}}, overflow:hidden }
 // {{CHILD_1}}: { display:flex, flexDirection:column, gap:{{GAP}}px, padding:"{{PADDING}}" }
-// scaleFactor = {{SCALE_FACTOR}}
+// designWidth = {{DESIGN_WIDTH}}px → vw = (px / designWidth) × 100
 
 .{{sectionName}} {
   position: relative;
   width: 100%;
-  height: {{HEIGHT_SCALED}}px;           // tree: {{HEIGHT}} × {{SCALE_FACTOR}}
+  height: {{HEIGHT_VW}}vw;               // tree: {{HEIGHT}} / {{DESIGN_WIDTH}} × 100
   overflow: hidden;                       // tree: overflow:hidden
-}
-
-.{{sectionName}}__bg {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  img { width: 100%; height: 100%; object-fit: cover; }
+  background-image: url('/images/{{FEATURE_KEY}}/{{section}}-bg.png');
+  background-size: cover;
+  background-position: center top;
 }
 
 .{{sectionName}}__{{child1Name}} {
   display: flex;                          // tree: display:flex
   flex-direction: column;                 // tree: flexDirection:column
-  gap: {{GAP_SCALED}}px;                  // tree: {{GAP}} × {{SCALE_FACTOR}}
-  padding: {{PADDING_SCALED}};            // tree: "{{PADDING}}" × {{SCALE_FACTOR}}
+  gap: {{GAP_VW}}vw;                      // tree: {{GAP}} / {{DESIGN_WIDTH}} × 100
+  padding: {{PADDING_VW}};               // tree: "{{PADDING}}" / {{DESIGN_WIDTH}} × 100
 }
 ```
 
 ---
 
-## SCSS Components (tree.json 직접 매핑)
+## SCSS Components (tree.json → clamp 폰트)
 
 ```scss
 // tree.json 데이터:
 // TEXT "{{TEXT_1}}": { fontSize:{{FONT_SIZE}}px, fontWeight:{{FONT_WEIGHT}}, color:{{COLOR}} }
+// designWidth = {{DESIGN_WIDTH}}px
 
 .{{sectionName}}__title {
-  font-size: {{FONT_SIZE_SCALED}}px;      // tree: {{FONT_SIZE}} × {{SCALE_FACTOR}}
-  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (scaleFactor 미적용)
-  color: {{COLOR}};                       // tree: 직접 (scaleFactor 미적용)
+  // 역할: 제목 → 최소 16px
+  font-size: clamp(16px, {{FONT_SIZE_VW}}vw, {{FONT_SIZE}}px); // tree: {{FONT_SIZE}} / {{DESIGN_WIDTH}} × 100
+  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (변환 안 함)
+  color: {{COLOR}};                       // tree: 직접 (변환 안 함)
 }
 ```
 

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

@@ -42,7 +42,7 @@ Bash:
 
 트리 데이터의 용도 (vibe.figma.convert에서 직접 매핑):
   - Auto Layout → CSS Flexbox (direction, gap, padding, align 1:1)
-  - absoluteBoundingBox → width, height (× scaleFactor)
+  - absoluteBoundingBox → width, height (→ vw 변환)
   - fills/strokes/effects → background, border, shadow 등
   - TEXT 노드 → 텍스트 콘텐츠 + 타이포그래피 CSS
   - imageRef → 이미지 에셋 매핑
@@ -53,7 +53,7 @@ Bash:
 
 트리 추출 도구가 자동 변환하는 속성. **이 값들이 SCSS에 직접 매핑된다:**
 
-| Figma 속성 | CSS | scaleFactor 적용 |
+| Figma 속성 | CSS | vw 변환 |
 |-----------|-----|-----------------|
 | `layoutMode=VERTICAL` | `display:flex; flex-direction:column` | ❌ |
 | `layoutMode=HORIZONTAL` | `display:flex; flex-direction:row` | ❌ |

package/skills/vibe.figma.extract/rubrics/image-rules.md

@@ -1,67 +1,89 @@
-# Image Extraction Rules
+# Image Extraction Rules — Node Rendering Based
 
-## Format
-
-- Output format: `.webp` always — never `.png`, `.jpg`, `.svg` from MCP asset URLs
-- Exception: SVG icons referenced as inline code (not MCP URLs) stay as `.svg`
-- Do not convert or re-encode after download — use the raw bytes from `curl`
+## Core Principle
 
-## Naming
+```
+❌ imageRef 개별 다운로드 금지 (텍스처 fill 공유 문제)
+✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
+```
 
-Convert the JavaScript variable name to kebab-case:
+## Render Methods
 
-| Variable | File Name |
-|----------|-----------|
-| `img21` | `img-21.webp` |
-| `imgTitle` | `title.webp` (strip leading `img` prefix) |
-| `imgSnowParticle12` | `snow-particle-12.webp` |
-| `imgImgBannerStatic` | `banner-static.webp` (collapse double `img`) |
-| `imgBtnShare` | `btn-share.webp` |
+| 이미지 유형 | 렌더링 방법 | 출력 위치 |
+|-----------|-----------|---------|
+| BG 프레임 (합성 배경) | `screenshot {fileKey} {bg.nodeId}` | `bg/{section}-bg.png` |
+| 콘텐츠 (타이틀, 버튼) | `screenshot {fileKey} {node.nodeId}` | `content/{name}.png` |
+| 벡터 글자 그룹 | `screenshot {fileKey} {group.nodeId}` | `content/{name}.png` |
 
-Rules:
-- Strip leading `img` prefix before converting to kebab-case
-- Numbers stay as-is: `item11` → `item-11`
-- Acronyms lowercased: `BTN` → `btn`, `BG` → `bg`
+## BG 프레임 판별
 
-## Destination
+```
+BG 프레임 = 다음 중 하나:
+  - name에 "BG", "bg" 포함
+  - 부모와 크기 동일(±10%) + 자식 이미지 3개 이상
+  - 1depth 첫 번째 자식이면서 이미지 노드 다수 보유
 
+→ 프레임 렌더링 1장 → CSS background-image
+→ 하위 개별 레이어 다운로드하지 않음
 ```
-public/images/{feature}/    ← Vue/Nuxt
-static/images/{feature}/    ← Nuxt 2 legacy
-public/{feature}/           ← Next.js (under /public)
+
+## 벡터 글자 판별
+
 ```
+벡터 글자 그룹 = 다음 모두 충족:
+  - 부모 GROUP/FRAME 아래 VECTOR 타입 3개 이상
+  - 각 VECTOR 크기 < 60x60
+  - 같은 imageRef 공유 (텍스처 fill)
 
-Always use the directory confirmed in Phase 0 setup.
+→ 부모 GROUP 통째로 렌더링 (개별 글자 다운로드 금지)
+→ 커스텀 폰트 텍스트 = 웹폰트 없음 → 이미지로 사용
+```
 
-## Size Limits
+## Format
 
-| Type | Warn threshold | Block threshold |
-|------|---------------|----------------|
-| Background image | 500 KB | 2 MB |
-| Content image | 200 KB | 1 MB |
-| Decorative image | 100 KB | 500 KB |
-| Total per section | 3 MB | 10 MB |
+- Output format: `.png` (Figma screenshot API 기본)
+- 최적화 필요 시 빌드 단계에서 webp 변환 (추출 단계에서는 png)
 
-If a file exceeds the warn threshold, log it. Never block the download — size checks are advisory.
+## Naming
 
-## Download Rules
+렌더링된 이미지의 파일명 = Figma 노드 name을 kebab-case로:
+  - `"Hero"` BG frame → `hero-bg.png`
+  - `"Mission 01"` vector group → `mission-01.png`
+  - `"Title"` content → `hero-title.png` (섹션명 prefix)
+  - `"Btn_Login"` → `btn-login.png`
 
-- [ ] Download ALL `const img...` variables — zero omissions ("core assets only" is forbidden)
-- [ ] Use `curl -sL "{url}" -o {dest}` — silent, follow redirects
-- [ ] After download: `ls -la {dir}` — verify file exists and size > 0
-- [ ] On 0-byte file: retry once. On second failure: log and continue (do not block code gen for a single failed decorative image)
-- [ ] On missing asset (in tree.json but no download URL): use node render fallback (`--render --nodeIds={id}`) to capture as PNG
+Rules:
+  - 공백 → 하이픈
+  - 언더스코어 → 하이픈
+  - 숫자 유지: `item11` → `item-11`
+  - 대문자 → 소문자
 
-## Image Mapping Table
+## Destination
 
-After all downloads, produce a mapping before writing any component code:
+```
+/tmp/{feature}/{bp-folder}/
+  bg/                    ← BG 프레임 렌더링
+  content/               ← 콘텐츠 + 벡터 글자 렌더링
+  sections/              ← Phase 4 검증용 스크린샷
+```
 
-```js
-const imageMap = {
-  imgTitle: '/images/{feature}/title.webp',
-  img21:    '/images/{feature}/img-21.webp',
-  // ...every variable
-}
+최종 배치 (Phase 5):
 ```
+static/images/{feature}/  ← Nuxt 2
+public/images/{feature}/  ← Vue/Nuxt 3
+public/{feature}/         ← Next.js
+```
+
+## Size Limits
+
+| Type | Warn threshold | Action |
+|------|---------------|--------|
+| BG 렌더링 | 5 MB | 정상 (합성 이미지라 큰 게 정상) |
+| 콘텐츠 렌더링 | 1 MB | 경고 |
+| 단일 이미지 > 5 MB | — | ⚠️ 텍스처 fill 의심 → imageRef 다운로드 실수 확인 |
+
+## Fallback
 
-This map is the only source for `src` values in generated components. No raw Figma URLs in output code.
+노드 렌더링 불가 시에만 imageRef 다운로드:
+  - Figma screenshot API 실패 (rate limit, 권한)
+  - 다운로드 후 파일 크기 5MB 초과 → 텍스처 fill 가능성 → 경고 로그

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

@@ -1,10 +0,0 @@
----
-name: vibe.figma.analyze
-description: "[Merged] → vibe.figma (Phase 1: Storyboard) 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.analyze
-
-이 스킬은 **vibe.figma** (Phase 1: Storyboard)으로 병합되었습니다.

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

@@ -1,53 +0,0 @@
-# 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/SKILL.md

@@ -1,10 +0,0 @@
----
-name: vibe.figma.codegen
-description: "[Merged] → vibe.figma.convert 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.codegen
-
-이 스킬은 **vibe.figma.convert**으로 병합되었습니다.

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

@@ -1,54 +0,0 @@
-# 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/SKILL.md

@@ -1,10 +0,0 @@
----
-name: vibe.figma.consolidate
-description: "[Merged] → vibe.figma (Phase 4: Verification) 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.consolidate
-
-이 스킬은 **vibe.figma** (Phase 4: Verification)으로 병합되었습니다.

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

@@ -1,95 +0,0 @@
-# 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`

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

@@ -1,10 +0,0 @@
----
-name: vibe.figma.frame
-description: "[Merged] → vibe.figma.extract 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.frame
-
-이 스킬은 **vibe.figma.extract**으로 병합되었습니다.

package/skills/vibe.figma.frame/rubrics/frame-selection.md

@@ -1,55 +0,0 @@
-# Frame Selection Rubric
-
-> This skill is merged into vibe.figma.extract. Use this rubric to select the right frames before calling `get_design_context`.
-
-## Frame Classification by Name Pattern
-
-| Pattern in Name | Class | Action |
-|----------------|-------|--------|
-| "기능 정의서", "정책", "spec", "policy" | SPEC | `get_design_context` — extract text requirements |
-| "해상도", "브라우저", "config", "resolution" | CONFIG | `get_design_context` — extract scale factor |
-| "공통", "GNB", "Footer", "Popup", "shared", "common" | SHARED | Read if referenced; skip if project already has them |
-| "화면설계", "메인 -", "section", numbered frames | PAGE | Core implementation targets |
-
-## Selection Priority
-
-1. SPEC frame (1 frame) — read first, informs all feature requirements
-2. CONFIG frame (1 frame) — establishes scale factors for both breakpoints
-3. PAGE frames — top-level only (e.g. `3.1`, `3.2`, not `3.1.1`, `3.1.2`)
-4. SHARED frames — only if component does not already exist in the project
-
-Never read sub-case frames (e.g. `3.1.1`, `3.2.1`) during Phase 1. Read them in Phase 2 only if a sub-state is needed for a specific interaction.
-
-## Tall Frame Decision Tree
-
-```
-Frame height > 1500px?
-  YES → Split before calling get_design_context
-    1. get_metadata(nodeId) → get child node list
-    2. Call get_design_context per child node
-    3. Merge results as one logical section
-  NO → Call get_design_context directly
-```
-
-Height thresholds from real data:
-- Safe direct call: up to ~900px
-- Risk zone: 900–1500px (attempt once, split on timeout)
-- Always split: 1500px+
-
-## Skipping Frames
-
-Skip a frame entirely when:
-- Name contains "OLD", "archive", "deprecated", "참고", "예시" (reference only)
-- Frame is a copy/duplicate of another already processed frame
-- Frame is a component definition (Figma component, not an instance) — use its instances instead
-
-## Viewport Frames
-
-When multiple frames represent the same section at different widths:
-- Smallest width = mobile (Phase 2 base URL)
-- Larger widths = desktop breakpoints (Phase 2 subsequent URLs)
-- Process mobile first, then add desktop as responsive layer — never the reverse
-
-## Frame Count Warning
-
-If total PAGE frames > 10, confirm with the user before proceeding. Large frame counts may indicate the Figma file covers multiple pages that should be separate feature implementations.

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

@@ -1,11 +0,0 @@
----
-name: vibe.figma.pipeline
-description: "[Merged] → vibe.figma.consolidate D-4 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.pipeline
-
-이 스킬은 **vibe.figma.consolidate** D-4 섹션으로 병합되었습니다.
-Design Quality Pipeline 안내는 `vibe.figma.consolidate` Step D-4를 참조하세요.

package/skills/vibe.figma.pipeline/rubrics/pipeline-stages.md

@@ -1,96 +0,0 @@
-# Pipeline Stage Descriptions and Failure Handling
-
-> This skill is merged into vibe.figma.consolidate (D-4). This rubric describes each stage of the Figma-to-code pipeline and what to do when a stage fails.
-
-## Stage Map
-
-```
-Phase 0: Setup
-  └─ Detect stack → Determine feature key → Create directories
-
-Phase 1: Storyboard
-  └─ Classify frames → Analyze SPEC/CONFIG/PAGE → Generate component shells
-
-Phase 2: Design (per breakpoint)
-  ├─ 2-1: Style scaffold
-  ├─ 2-2: Classify mode (normal/literal) per section
-  ├─ 2-3: Split tall frames if needed
-  └─ 2-4: Section loop
-       ├─ a. get_design_context
-       ├─ b. Download all assets
-       ├─ c. Convert code
-       ├─ d. Refactor component template
-       └─ e. Verify section
-
-Phase 3: Verification
-  ├─ Automated grep checks
-  └─ Screenshot comparison
-```
-
-## Stage Failure Handling
-
-### Phase 0 Failures
-
-| Failure | Resolution |
-|---------|-----------|
-| Cannot detect stack | Ask user: "Vue or React? SCSS or Tailwind?" |
-| Directory already exists | Proceed — do not overwrite existing files unless replacing |
-
-### Phase 1 Failures
-
-| Failure | Resolution |
-|---------|-----------|
-| Metadata too large (>100K chars) | Save to file, parse with Bash/Python to extract frame list |
-| No SPEC frame found | Continue without feature requirements; note missing in report |
-| No CONFIG frame | Use default scale factors (mobile: 480/720=0.667, PC: 1920/2560=0.75) |
-| Storyboard URL is "없음" | Skip Phase 1, go directly to Phase 2 |
-
-### Phase 2-a Failures (get_design_context)
-
-| Failure | Retry | Escalation |
-|---------|-------|-----------|
-| Timeout on first call | Retry once with `excludeScreenshot: true` | Split frame → per-child calls |
-| Timeout after split | Retry individual child once | `get_screenshot` + visual estimation |
-| Empty response | Retry once | Skip section, log in consolidation report |
-
-Maximum retries per section: 2. After 2 failures: use screenshot fallback. Never loop more than 3 times on the same section.
-
-### Phase 2-b Failures (Asset Download)
-
-| Failure | Resolution |
-|---------|-----------|
-| 0-byte file | Retry once with same curl command |
-| 404 URL | Try `get_metadata` → sub-node → `get_design_context` for fresh URL |
-| All retries failed | Log missing asset; continue with other assets; mark section as needs-review |
-
-Single asset failure does not block the entire section unless it is a critical background image.
-
-### Phase 2-e Section Verification Failures
-
-| Check Failed | Action |
-|-------------|--------|
-| Figma URL in output | Find and replace all occurrences; re-verify |
-| 0-byte or missing image | Re-download; if impossible, use placeholder only with TODO comment |
-| Empty template | Do not proceed to next section until fixed |
-| Build error | Fix TypeScript/template error; re-build |
-
-### Phase 3 Failures (Screenshot Comparison)
-
-| Priority | Issue Type | Action |
-|----------|-----------|--------|
-| P1 | Image missing, wrong layout, unstyled text | Fix immediately; re-verify before continuing |
-| P2 | Spacing delta, slight color difference | Fix if time allows; defer if P1=0 and deadline is tight |
-| P3 | Pixel-perfect micro-adjustments | Deferred to `/design-polish` pass |
-
-P1 = 0 is required before the feature is considered complete. P2/P3 are best-effort.
-
-## Design Quality Pipeline (Post-completion)
-
-```
-/design-normalize  → normalize inconsistent values
-/design-audit      → automated audit (quick pass)
-/design-critique   → thorough visual critique
-/design-polish     → final polish pass
-```
-
-Run at minimum: `/design-normalize` → `/design-audit --quick` before committing.

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

@@ -1,10 +0,0 @@
----
-name: vibe.figma.rules
-description: "[Merged] → vibe.figma (rules are inlined) 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.rules
-
-이 스킬의 규칙은 **vibe.figma**, **vibe.figma.extract**, **vibe.figma.convert** 3개 스킬에 내장되었습니다.

package/skills/vibe.figma.rules/rubrics/naming-conventions.md

@@ -1,70 +0,0 @@
-# Figma Layer Naming Conventions for Clean Extraction
-
-> This skill is inlined into vibe.figma, vibe.figma.extract, and vibe.figma.convert. This rubric documents how Figma layer names map to generated code identifiers.
-
-## Layer Name → CSS Class
-
-Convert `data-name` attribute values from reference code to CSS class names:
-
-| Figma Layer Name | CSS Class | Notes |
-|-----------------|-----------|-------|
-| `BG` | `.bg` | Lowercase single word |
-| `Title` | `.title` | PascalCase → camelCase |
-| `Period` | `.period` | |
-| `Light` | `.light` | |
-| `BTN_Share` | `.btnShare` | `BTN_` prefix → `btn`, underscore → camelCase |
-| `BTN_Primary` | `.btnPrimary` | |
-| `KV` (Key Visual) | `.kv` | Acronym → all lowercase |
-| `GNB` | `.gnb` | |
-| `PC_Banner` | `.pcBanner` | |
-| `Snow_Particle_12` | `.snowParticle12` | Underscore-separated → camelCase |
-| *(no data-name)* | `.node-{nodeId}` | Replace `:` with `-` in nodeId |
-
-## Conflict Resolution
-
-When two layers in the same section share the same name:
-- Prefix with parent layer name: `.heroLight`, `.kidLight`
-- Or append an index suffix: `.light-1`, `.light-2`
-- Never generate duplicate class names in the same `<style scoped>` block
-
-## Image Variable Name → File Name
-
-| Figma Variable | File Name | Rule |
-|---------------|-----------|------|
-| `imgTitle` | `title.webp` | Strip `img` prefix, kebab-case |
-| `img21` | `img-21.webp` | Numeric suffix: keep number |
-| `imgSnowParticle12` | `snow-particle-12.webp` | CamelCase → kebab |
-| `imgImgBannerStatic` | `banner-static.webp` | Double `img` prefix → strip both |
-| `imgBtnShare` | `btn-share.webp` | |
-
-## Component File Naming
-
-| Figma Section Name | Component File |
-|-------------------|----------------|
-| "Hero" / "히어로" | `HeroSection.vue` |
-| "Daily Check-in" / "일일 출석" | `DailyCheckInSection.vue` |
-| "Play Time Mission" | `PlayTimeMissionSection.vue` |
-| "Exchange" / "교환" | `ExchangeSection.vue` |
-| "Popup" | `RewardPopup.vue` (non-section suffix) |
-| "GNB" | `TheGnb.vue` (project-wide shared) |
-
-Rules:
-- PascalCase always
-- Append `Section` suffix for page sections
-- No `Section` suffix for popups, overlays, shared layout components
-
-## Feature Key (Directory Name)
-
-Derived from Figma file name:
-
-| Figma File Name | Feature Key |
-|----------------|-------------|
-| "PUBG 겨울 PC방 이벤트" | `winter-pcbang` |
-| "Summer Campaign 2025" | `summer-campaign-2025` |
-| "Login Page Redesign" | `login-page-redesign` |
-
-Rules:
-- kebab-case
-- Remove language/brand prefixes if obvious from context
-- Numbers and years are kept
-- No special characters

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

@@ -1,10 +0,0 @@
----
-name: vibe.figma.style
-description: "[Merged] → vibe.figma.convert 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.style
-
-이 스킬은 **vibe.figma.convert**으로 병합되었습니다.

package/skills/vibe.figma.style/rubrics/style-mapping.md

@@ -1,100 +0,0 @@
-# Figma Style → CSS/Tailwind Mapping Rules
-
-> This skill is merged into vibe.figma.convert. This rubric is the definitive reference for converting Figma design values to output CSS.
-
-## Scale Factor Application
-
-```
-scaledValue = Math.round(figmaValue × scaleFactor)
-```
-
-Apply to: `px` units only (font-size, padding, margin, gap, width, height, top, left, inset, border-radius, box-shadow offsets, letter-spacing, blur radius).
-
-Never apply to: colors, opacity, unitless line-height, `%` values, z-index, degrees.
-
-## Color Mapping
-
-| Figma Token / Tailwind | CSS Output | Token Name |
-|-----------------------|-----------|-----------|
-| `text-[#1B3A1D]` | `color: #1B3A1D` | `$color-heading` |
-| `text-white` | `color: #FFFFFF` | `$color-white` |
-| `bg-[#0A1628]` | `background-color: #0A1628` | `$color-bg-dark` |
-| `bg-[rgba(13,40,61,0.5)]` | `background: rgba(13,40,61,0.5)` | *(inline, no token)* |
-| `var(--color/grayscale/950,#171716)` | `color: #171716` | Use fallback value |
-| `border-[#E5E7EB]` | `border-color: #E5E7EB` | `$color-border` |
-
-Create a `$color-*` token for any hex value that appears in 2+ selectors.
-
-## Typography Mapping
-
-| Figma / Tailwind | CSS Property | Scale? |
-|-----------------|-------------|--------|
-| `text-[48px]` | `font-size: 48px × SF` | Yes |
-| `font-black` | `font-weight: 900` | No |
-| `font-bold` | `font-weight: 700` | No |
-| `font-semibold` | `font-weight: 600` | No |
-| `font-medium` | `font-weight: 500` | No |
-| `font-normal` | `font-weight: 400` | No |
-| `leading-[1.4]` | `line-height: 1.4` | No (unitless) |
-| `leading-[48px]` | `line-height: 48px × SF` | Yes (has unit) |
-| `tracking-[-0.36px]` | `letter-spacing: -0.36px × SF` | Yes |
-| `text-center` | `text-align: center` | No |
-| `whitespace-nowrap` | `white-space: nowrap` | No |
-| `font-[family-name:var(--font/family/pretendard,...)]` | `font-family: 'Pretendard', sans-serif` | No |
-
-## Spacing Mapping
-
-| Tailwind | CSS | Scale? |
-|---------|-----|--------|
-| `pt-[120px]` | `padding-top: 120px × SF` | Yes |
-| `px-[24px]` | `padding-left: 24px × SF; padding-right: 24px × SF` | Yes |
-| `gap-[24px]` | `gap: 24px × SF` | Yes |
-| `mt-[16px]` | `margin-top: 16px × SF` | Yes |
-| `rounded-[12px]` | `border-radius: 12px × SF` | Yes |
-| `inset-0` | `inset: 0` | No |
-| `inset-[-18.13%]` | `inset: -18.13%` | No (%) |
-
-## Layout Mapping
-
-| Tailwind | CSS |
-|---------|-----|
-| `flex` | `display: flex` |
-| `flex-col` | `flex-direction: column` |
-| `items-center` | `align-items: center` |
-| `justify-center` | `justify-content: center` |
-| `justify-between` | `justify-content: space-between` |
-| `grid` | `display: grid` |
-| `absolute` | `position: absolute` |
-| `relative` | `position: relative` |
-| `overflow-clip` | `overflow: clip` ← not `overflow: hidden` |
-| `overflow-hidden` | `overflow: hidden` |
-| `size-full` | `width: 100%; height: 100%` |
-| `w-full` | `width: 100%` |
-| `max-w-none` | `max-width: none` |
-| `z-[10]` | `z-index: 10` |
-| `pointer-events-none` | `pointer-events: none` |
-
-## Visual Effects Mapping
-
-| Tailwind | CSS | Scale? |
-|---------|-----|--------|
-| `opacity-40` | `opacity: 0.4` | No |
-| `blur-[3.5px]` | `filter: blur(3.5px)` | Yes |
-| `mix-blend-lighten` | `mix-blend-mode: lighten` | No |
-| `mix-blend-multiply` | `mix-blend-mode: multiply` | No |
-| `mix-blend-hue` | `mix-blend-mode: hue` | No |
-| `rotate-[149.7deg]` | `transform: rotate(149.7deg)` | No |
-| `-scale-y-100` | `transform: scaleY(-1)` | No |
-| `shadow-[0_4px_24px_rgba(0,0,0,0.4)]` | `box-shadow: 0 4px × SF 24px × SF rgba(0,0,0,0.4)` | Partial (px only) |
-| `object-cover` | `object-fit: cover` | No |
-| `object-contain` | `object-fit: contain` | No |
-
-## Token Promotion Rules
-
-Promote a value to `_tokens.scss` when:
-- A color appears in 2+ different selectors
-- A font-size serves a named role (heading, body, caption)
-- A spacing value appears in 3+ places
-- A breakpoint threshold is used
-
-Do not promote one-off values used in a single selector — write them inline.