@su-record/vibe 3.2.62 → 4.0.0

package/skills/vibe.figma/references/step-algorithms.md

@@ -1,204 +0,0 @@
-# Branch 3 (WRITE) Step Algorithms — Full Reference
-
-> Loaded by vibe.figma SKILL.md Branch 3 (`--create*`) Step A/B/C/D/D↔E gate/E/F bodies for the full incremental/idempotent algorithms, message templates, and checklists.
-
-## createMode별 실행 매트릭스
-
-| Step | full | storyboard | design |
-|---|---|---|---|
-| A. plan.md 파싱 | ✅ | ✅ | ✅ |
-| B. target file + state 로드 | ✅ | ✅ | ✅ |
-| C. 디자인 시스템 발견 | ✅ | ⛔ SKIP (와이어는 컴포넌트 불필요) | ✅ |
-| D. 와이어프레임 생성 | ✅ | ✅ | ⛔ SKIP |
-| 🚪 Step D ↔ E 검토 게이트 | ✅ | ⛔ (Step E 없음) | ⛔ (Step D 없음) |
-| E. 본 디자인 적용 | ✅ | ⛔ SKIP | ✅ (분기 동작, 아래 참조) |
-| F. 시각 검증 | ✅ (full) | ✅ (wire 대상, 구조 체크만) | ✅ (design 대상) |
-
-## createMode Matrix — `design` mode Step E branching (summary)
-
-**`createMode == design`의 Step E 동작 (결함 없는 실행을 위한 분기)**:
-
-- state.sections 가 **완전히 비어있음** (hasNewState 또는 첫 실행)
-  → 각 섹션별로 새 frame 생성 후 **곧바로** 컴포넌트 배치 (와이어 placeholder 단계 통째로 생략)
-  → 이 경로에서는 wireNodeId == designNodeId 가 됨 (같은 노드, 한 번에 완성)
-- state.sections 에 **일부 섹션의 wireNodeId 가 존재**
-  → 존재하는 섹션: 기존 wireNodeId 위에 덮어쓰기 (full 모드의 E와 동일)
-  → 없는 섹션: ❌ reject "이 섹션({섹션명})은 와이어가 없습니다.
-                      `--create-storyboard` 로 먼저 와이어를 만들거나, `--create` (full)로 호출하세요.
-                      빈 state에서 처음부터 design 모드로 그리려면 `--new-state` 를 추가하세요."
-
-## Step A — plan.md 파싱 (Read {mdArg} 필수 추출 섹션)
-
-```
-1. Read {mdArg}
-   필수 추출 섹션:
-     - "## 1. 개요" → 페이지 이름/목적
-     - "## 7. Look & Feel" → 분위기, 컬러, 타이포, 레퍼런스, 인터랙션
-     - "## 8. 레이아웃/섹션 구성" → 섹션 순서, 목적, 핵심 콘텐츠
-     - "## 9. 반응형 전략" → 디바이스 우선순위, 브레이크포인트
-
-   ⛔ 위 섹션 중 7/8 누락 시: 사용자에게 "plan.md에 UI 섹션이 비어있습니다.
-      /vibe.spec를 먼저 돌려 기획서를 보강할까요?" 라고 묻고 중단.
-
-   ✅ 피처명 결정: mdArg 파일명에서 .md 제거한 값을 {feature}로 사용
-
-2. Design context 로드 (non-interactive 기본)
-   - hasReadDesignMd == true (프로젝트 루트에 DESIGN.md 존재):
-     · §1 Visual Theme / §2 Color Palette / §3 Typography 를 톤·팔레트의
-       **1 차 입력**으로 사용 (`design-context.json` · plan.md 보다 우선)
-   - Read .vibe/design-context.json
-     · 존재 → 톤/팔레트 보강용으로 binding (DESIGN.md 가 있으면 보조)
-     · 없음 → plan.md의 "## 7. Look & Feel" 값으로 임시 컨텍스트 구성
-```
-
-## Step B — Figma 타겟 파일 확보 + State 파일 위치
-
-```
-1. AskUserQuestion (자유 텍스트):
-   "디자인을 생성할 target Figma 파일 URL을 입력해주세요.
-    (figma.com/design/{fileKey}/...)"
-
-2. URL → fileKey 추출
-
-3. State 파일 로드 (idempotency, 재실행 시 중복 생성 방지)
-   경로: /tmp/{feature}/figma-create-state.json
-```
-
-## Step C — 디자인 시스템 발견 세부
-
-```
-   2a. 컴포넌트: search_design_system 또는 기존 스크린 instance walk
-   2b. 변수(토큰): get_variable_defs로 색/간격/radius 수집
-   2c. 텍스트/이펙트 스타일: 발견된 토큰을 plan.md Look & Feel과 매칭
-       매칭 안 되면 "이 plan.md는 기존 디자인 시스템에 없는 토큰을 요구합니다.
-       새로 만들까요? (figma:figma-generate-library 권장) 또는 가까운 토큰으로 진행할까요?"
-```
-
-## Step D — 와이어프레임 생성 알고리즘 (incremental + idempotent)
-
-```
-   plan.md "## 8. 레이아웃/섹션 구성" 표를 순회:
-     for each 섹션 in plan.md:
-       1. 섹션 row 직렬화 → wireHash 계산 (8번 row만 해시)
-       2. state.sections에서 같은 name 매칭:
-          ├─ 매칭 없음 (신규):
-          │    a. use_figma 호출로 wire 프레임 생성 (Auto Layout만)
-          │       - 배경: #F5F5F5 (회색)
-          │       - 자식: 핵심 콘텐츠 컬럼의 항목마다 회색 박스 + 텍스트 라벨
-          │       - 컴포넌트 instance 배치 금지 (Step E에서 채움)
-          │       - 변수 바인딩 금지 (Step E에서 채움)
-          │    b. 반환된 wireNodeId를 state.sections에 entry append
-          │       (designNodeId = null 로 초기화)
-          ├─ 매칭 + wireHash 동일 (구조 변화 없음):
-          │    SKIP, "✓ {섹션명} wire (cached)" 출력
-          └─ 매칭 + wireHash 다름 (구조 변경됨):
-               a. use_figma로 기존 wireNodeId 내부 정리 (children 삭제)
-               b. 신규 케이스 a 재실행 (wireNodeId 재사용)
-               c. state entry의 wireHash + updatedAt 갱신
-               d. designNodeId가 있으면 → null로 리셋 (구조 바뀌었으니 본 디자인도 다시 그려야 함)
-
-   ⛔ 한 번의 use_figma 호출에 모든 섹션을 몰아넣지 말 것.
-      섹션 단위로 incremental 호출 → 검증 → 다음 섹션.
-
-   반응형 처리:
-     plan.md "## 9. 반응형 전략"의 브레이크포인트별로 별도 wire 프레임 생성
-     state.sections에는 bp 필드로 mo/pc 구분하여 각각 entry 저장
-
-   Step D 종료 직전:
-     state.updatedAt = now
-     Write /tmp/{feature}/figma-create-state.json
-```
-
-## Step D ↔ Step E 사용자 검토 게이트 — 메시지 템플릿
-
-```
-2. 사용자에게 제시:
-   "📐 와이어프레임이 생성되었습니다.
-    figma URL: https://figma.com/design/{fileKey}/...?node-id={firstWireNodeId}
-    섹션 요약: 신규 N / 갱신 M / 캐시 K
-
-    구조가 plan.md와 일치합니까?
-      yes  → Step E (본 디자인) 진행
-      <자유 텍스트> → 수정 요청 (해당 섹션의 wireHash 강제 무효화 후 Step D 재실행)
-      abort → 워크플로 중단"
-
-3. ralph/ultrawork 모드:
-   사용자 질문 SKIP, 자동 yes로 Step E 진행
-   (단, 섹션이 0개면 abort)
-```
-
-## Step E — 본 디자인 적용 알고리즘 (incremental + idempotent)
-
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-분기 A) createMode == "full":
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   state.sections를 순회 (Step D에서 채워진 상태):
-     for each section in state.sections:
-       1. 섹션 row 직렬화 → designHash 계산 (7번+8번+9번 row 해시)
-       2. designNodeId == null 이거나 designHash 변경됨:
-          a. use_figma로 wireNodeId 내부의 자식 정리 (placeholder 삭제)
-             ⚠ wireNodeId 자체는 삭제 금지 (Auto Layout 골격 보존)
-          b. 같은 wireNodeId 안에 컴포넌트 instance 배치 + 변수 바인딩
-          c. 텍스트는 plan.md "핵심 콘텐츠" 컬럼의 실제 값 사용
-          d. designNodeId = wireNodeId 로 set (같은 노드가 2단계로 진화)
-          e. state entry의 designHash + updatedAt 갱신
-       3. designHash 동일: SKIP, "✓ {섹션명} design (cached)" 출력
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-분기 B) createMode == "design":
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   plan.md "## 8. 레이아웃/섹션 구성" 표를 순회 (state가 없을 수 있음):
-     for each 섹션 in plan.md:
-       1. 섹션 row 직렬화 → designHash 계산
-       2. state.sections에서 같은 name 매칭:
-          ├─ 매칭 있음 + wireNodeId 존재 → 분기 A의 update 경로 실행 (wireNodeId 재사용)
-          ├─ 매칭 있음 + wireNodeId null → ❌ "이 섹션({섹션명})은 이전에 design 모드로 그려졌지만
-          │                                   state가 깨졌습니다. --new-state 로 리셋하세요."
-          └─ 매칭 없음:
-              ⚠ state.sections 가 완전히 비어있음 (첫 실행 또는 hasNewState)이면 허용:
-                a. use_figma 호출로 frame 생성 (Auto Layout + 컴포넌트 + 텍스트 한 번에)
-                b. wireNodeId = designNodeId = 반환된 frameNodeId
-                c. state.sections에 entry append (wireHash/designHash 둘 다 계산)
-              ⛔ state.sections 가 일부 비어있지 않으면 reject:
-                "이 섹션({섹션명})은 와이어가 없습니다. --create-storyboard 로 먼저 만들거나
-                 --create (full)로 호출하세요."
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-공통 규칙:
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   ⛔ 한 번의 use_figma 호출에 모든 섹션을 몰아넣지 말 것.
-   ⛔ 분기 A에서 wireNodeId를 삭제하고 새 노드를 만들지 말 것 (state 무효화됨).
-
-   Step E 종료 직전:
-     state.planHash = sha256(plan.md 전체)
-     state.updatedAt = now
-     Write /tmp/{feature}/figma-create-state.json
-```
-
-## Step F — LLM 셀프 체크 + 최종 사용자 확인 템플릿
-
-```
-2. LLM 셀프 체크 (createMode에 따라 항목 narrow):
-
-   createMode == "storyboard" (구조 체크만 — 컬러 판단 불가):
-     - 섹션 순서가 plan.md 표와 일치하는가?
-     - 핵심 CTA 위치가 plan.md와 일치하는가?
-     ⛔ 컬러/분위기 체크 SKIP (와이어는 회색)
-
-   createMode == "design" 또는 "full":
-     - 섹션 순서가 plan.md 표와 일치하는가?
-     - 분위기/컬러 키워드가 시각적으로 반영됐는가?
-     - 핵심 CTA가 Hero에 존재하는가?
-
-3. 사용자에게 다음을 제시:
-   - createMode 표시 ("mode: full" / "mode: storyboard only" / "mode: design only")
-   - figma URL (fileKey + 첫 nodeId 딥링크)
-   - 섹션별 결과 요약:
-     · full:       wire 신규 N / 갱신 M / 캐시 K + design 신규 N / 갱신 M / 캐시 K
-     · storyboard: wire 신규 N / 갱신 M / 캐시 K
-     · design:     design 신규 N / 갱신 M / 캐시 K
-   - state 파일 경로
-   - (storyboard 모드) "다음 단계: 같은 plan.md로 `--create-design` 또는 `--create` 를 호출하면
-     이 와이어 위에 본 디자인이 입혀집니다."
-```

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

@@ -1,141 +0,0 @@
-# Tree → Code Conversion Rules
-
-## Core Principle
-
-모든 CSS 값은 tree.json에서 직접 매핑한다. 추정하지 않는다.
-
-## Node → HTML Mapping (Do This First)
-
-각 노드를 순서대로 분류:
-
-| 노드 조건 | HTML 매핑 |
-|-----------|----------|
-| FRAME + Auto Layout | `<div>` + flex (direction/gap/padding 직접) |
-| FRAME + no Auto Layout | `<div>` + position:relative (자식 absolute) |
-| TEXT | `<span>` → Claude가 `<h2>/<p>/<button>` 승격 |
-| RECTANGLE/VECTOR + imageRef | `<img src="다운로드된 파일">` |
-| VECTOR/GROUP ≤ 64px | 아이콘 → `<img>` (렌더링 이미지) |
-| INSTANCE 반복 3+ | v-for (Vue) 또는 .map() (React) |
-| 크기 0px | 스킵 |
-| VECTOR 장식선 (w/h ≤ 2px) | 스킵 |
-
-## 배경 레이어 판별
-
-BG 프레임 (name에 "BG"/"bg" 또는 부모와 동일 크기 ±5%):
-  ❌ <img> 태그로 배경 처리 금지
-  ❌ position:absolute + inset:0 으로 이미지 배치 금지
-  ✅ 부모 요소에 CSS background-image로만 처리:
-     background-image: url('/images/{feature}/{section}-bg.webp');
-     background-size: cover;
-     background-position: center top;
-  ✅ BG 프레임은 HTML에 아무것도 렌더링하지 않음 (CSS만)
-
-## 이미지 vs HTML 판별 (각 노드마다 확인)
-
-```
-노드를 이미지로 처리하기 전에 반드시 확인:
-
-Q1. 이 노드에 TEXT 자식이 있는가?
-  YES → HTML로 구현 (텍스트는 이미지에 넣지 않는다)
-  NO → Q2로
-
-Q2. 이 노드가 INSTANCE 반복 패턴의 일부인가?
-  YES → HTML 반복 구조 (v-for/.map()) — 내부 이미지 에셋만 개별 추출
-  NO → Q3로
-
-Q3. 이 노드에 클릭/인터랙션이 필요한가? (btn, CTA, link, tab)
-  YES → HTML <button>/<a> — 이미지 금지
-  NO → Q4로
-
-Q4. 이 노드의 콘텐츠가 동적 데이터인가? (가격, 수량, 기간, 상태)
-  YES → HTML 텍스트 — 이미지 금지
-  NO → 이미지 렌더링 가능
-
-위 체크에서 하나라도 YES → HTML로 구현
-모두 NO → 이미지(벡터 글자, BG, 래스터, 복잡 그래픽)로 렌더링
-
-실제 테스트에서 발생한 잘못된 패턴:
-
-  ❌ <img src="hero-bg.webp" class="bg-img" />           → BG를 img 태그로
-  ❌ <img src="exchange-section1.webp" />                 → 카드 4개를 이미지 1장으로
-  ❌ <img src="daily-step2-list.webp" />                  → 보상 목록을 통째 이미지로
-  ❌ <img src="hero-period-bg-mo.webp" class="period-bg"> → Period BG를 img로
-
-  ✅ .heroSection { background-image: url('hero-bg.webp'); background-size: cover; }
-  ✅ <div v-for="card in cards" :key="card.id">
-       <img :src="card.icon" /> <span>{{ card.price }}</span>
-       <button>보상 교환하기</button>
-     </div>
-```
-
-## CSS 직접 매핑 규칙
-
-tree.json의 css 객체를 SCSS에 1:1 매핑한다:
-
-### layout/ 파일에 넣는 속성
-```
-display, flex-direction, justify-content, align-items,
-gap, padding, width, height, position, overflow, z-index, inset
-```
-
-### components/ 파일에 넣는 속성
-```
-background-color, color, font-family, font-size, font-weight,
-line-height, letter-spacing, text-align, border, border-radius,
-box-shadow, opacity, mix-blend-mode, filter, backdrop-filter
-```
-
-## 반응형 단위 변환 (scaleFactor 사용하지 않음)
-
-스토리보드 CONFIG에서 designWidth, minWidth 확보.
-
-⛔ **커스텀 함수 생성 금지:**
-  ❌ @function wp-fluid(...) { ... }
-  ❌ @mixin wp-bg-layer { ... }
-  ❌ 자체 추상화 (aspect-ratio, clamp 남용)
-  ✅ vw 변환은 인라인 계산값을 직접 기입
-
-**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, % 값
-
-## 장식 레이어 최적화
-
-BG 그룹 내 장식 요소가 10개 이상:
-  → 배경 이미지 1장 + 핵심 장식 2~3개만 유지
-  → 나머지 생략 (Phase 4 스크린샷 검증에서 확인)
-
-## Class Naming
-
-BEM 패턴: `.sectionName__childName`
-  - 부모: `.heroSection`
-  - 자식: `.heroSection__bg`, `.heroSection__title`, `.heroSection__shareBtn`
-  - template에서 사용한 모든 클래스가 SCSS에 정의되어야 함
-
-## 자가 검증 (코드 작성 후)
-
-⛔ 하나라도 실패 → 코드 재작성 (다음 섹션 진행 금지)
-
-- [ ] ⛔ BG 프레임이 <img> 태그로 처리되지 않았는가? (CSS background-image만 허용)
-- [ ] ⛔ TEXT 자식이 있는 프레임이 통째 이미지로 처리되지 않았는가?
-- [ ] ⛔ INSTANCE 반복 패턴(카드/아이템)이 이미지 1장으로 처리되지 않았는가?
-- [ ] ⛔ SCSS에 @function 또는 @mixin 자체 정의가 없는가? (기존 토큰 @use만 허용)
-- [ ] ⛔ aspect-ratio 등 tree.json에 없는 CSS 속성이 없는가?
-- [ ] ⛔ 이미지 파일명이 kebab-case인가? (해시 파일명 금지)
-- [ ] ⛔ 디자인 텍스트(그래디언트/스트로크 효과)가 이미지로 처리되었는가?
-- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
-- [ ] 모든 img src가 static/에 실제 존재
-- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
-- [ ] tree.json에 없는 CSS 값이 SCSS에 없음

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

@@ -1,125 +0,0 @@
-# Figma Property → CSS Mapping Reference
-
-Properties automatically converted by `figma-extract.js` tree extraction (Extract Mode E1) and consumed by `figma-to-scss.js`. Phase 4 forbids hand-writing these values — this table is grounding for reviewing script output (and for modifying the scripts when output is unsatisfactory).
-
-## Layout
-
-| Figma Property | CSS | vw conversion |
-|-----------|-----|---------|
-| `layoutMode=VERTICAL` | `display:flex; flex-direction:column` | No |
-| `layoutMode=HORIZONTAL` | `display:flex; flex-direction:row` | No |
-| `primaryAxisAlignItems` | `justify-content` | No |
-| `counterAxisAlignItems` | `align-items` | No |
-| `itemSpacing` | `gap` | Yes |
-| `layoutGrow=1` | `flex-grow: 1` | No |
-| `padding*` | `padding` | Yes |
-| `absoluteBoundingBox.width/height` | `width/height` | Yes |
-| `layoutPositioning=ABSOLUTE` | `position: absolute` + `top/left` (relative to parent) | Yes |
-| `layoutSizingHorizontal=HUG` | remove width (auto) | — |
-| `layoutSizingHorizontal=FILL` | metadata `layoutSizingH` (converter decides flex:1/100%) | — |
-| `layoutSizingVertical=HUG` | remove height (auto) | — |
-| `layoutSizingVertical=FILL` | metadata `layoutSizingV` (converter decides) | — |
-| `clipsContent` | `overflow: hidden` | No |
-
-## Visual
-
-| Figma Property | CSS | vw conversion |
-|-----------|-----|---------|
-| `fills[].SOLID` | `background-color` | No |
-| `fills[].IMAGE` | `imageRef` + `imageScaleMode` (FILL/FIT/CROP/TILE) | — |
-| `fills[].GRADIENT_LINEAR` | `background-image: linear-gradient(...)` | No |
-| `fills[].GRADIENT_RADIAL` | `background-image: radial-gradient(...)` | No |
-| `fills[] (2 or more)` | `fills` array (type, color, imageRef, gradient, blendMode, filters) | — |
-| `fills[].blendMode` | `background-blend-mode` | No |
-| `fills[].filters.saturation` | `filter: grayscale(X%)` / `saturate(X%)` | No |
-| `fills[].color` (TEXT) | `color` | No |
-| `strokes[] + strokeAlign=INSIDE` | `border` + `box-sizing: border-box` | Yes (width only) |
-| `strokes[] + strokeAlign=OUTSIDE` | `outline` | Yes (width only) |
-| `individualStrokeWeights` | `border-top/right/bottom/left` individually | Yes (width only) |
-| `strokeDashes` | `border-style: dashed` | No |
-| `effects[].DROP_SHADOW` | `box-shadow` | Yes (px only) |
-| `effects[].INNER_SHADOW` | `box-shadow` (inset) | Yes (px only) |
-| `effects[].LAYER_BLUR` | `filter: blur()` (accumulated) | Yes |
-| `effects[].BACKGROUND_BLUR` | `backdrop-filter: blur()` | Yes |
-| `cornerRadius` | `border-radius` | Yes |
-| `opacity` | `opacity` | No |
-| `rotation` | `transform: rotate(Xdeg)` | No |
-| `blendMode` (node level) | `mix-blend-mode` | No |
-
-## Text
-
-| Figma Property | CSS | vw conversion |
-|-----------|-----|---------|
-| `style.fontFamily` | `font-family` | No |
-| `style.fontSize` | `font-size` | Yes |
-| `style.fontWeight` | `font-weight` | No |
-| `style.lineHeightPx` | `line-height` | No |
-| `style.letterSpacing` | `letter-spacing` | Yes |
-| `style.textAlignHorizontal` | `text-align` | No |
-| `style.textCase` | `text-transform` | No |
-| `style.textTruncation` | `overflow: hidden; text-overflow: ellipsis` | No |
-| `style.paragraphSpacing` | `margin-bottom` | Yes |
-| `characters` | text content | — |
-
-## SCSS Property Allowlist (per file group)
-
-```
-Layout (layout/ files):
-  display, flex-direction, justify-content, align-items, gap,
-  flex-grow, padding, width, height, overflow, position, top, left, transform
-
-Visual (components/ files):
-  background-color, background-image, background-blend-mode, color,
-  font-family, font-size, font-weight, line-height, letter-spacing,
-  text-align, text-transform, text-overflow,
-  border-radius, border, outline, box-sizing, box-shadow,
-  opacity, mix-blend-mode, filter, backdrop-filter
-
-If a value is absent in the tree → omit that property (no guessing)
-
-❌ Forbidden: aspect-ratio, container queries, custom @function/@mixin (wp-fluid() etc.),
-   clamp() with guessed values — only 1:1 mapping from the tree is allowed.
-```
-
-## Responsive Unit Conversion (legacy vw workflow — Phase 4C reference)
-
-> Current Phase 4 generates px as-is via figma-to-scss.js. These rules apply to the
-> responsive-integration flow (Phase 4C) and to script maintenance.
-
-```
-vw conversion (mechanical formula only):
-  width, height, padding, gap, border-radius, box-shadow, top, left, border-width
-  vw value = (Figma px / designWidth) × 100
-  ⛔ clamp, min(), max() etc. are allowed only for font-size
-
-Font → clamp(min, vw, max):
-  | Role    | Min   | Determination Basis         |
-  |---------|-------|-----------------------------|
-  | h1~h2   | 16px  | name contains "title"       |
-  | h3~h4   | 14px  | medium size                 |
-  | Body    | 12px  | long text                   |
-  | Caption | 10px  | small fontSize              |
-  | Button  | 12px  | name contains "btn"         |
-  max value = original Figma px as-is
-
-Properties never converted:
-  color, opacity, font-weight, font-family, z-index, text-align,
-  mix-blend-mode, transform(rotate), background-blend-mode,
-  flex-grow, box-sizing, grayscale/saturate, background-image(gradient)
-
-layoutSizing handling:
-  HUG → omit width/height (auto)
-  FILL → same direction as parent → flex: 1 0 0 · cross axis → align-self: stretch
-  FIXED → vw conversion
-
-imageScaleMode:
-  FILL → background-size: cover · FIT → contain
-  CROP → cover + background-position: center · TILE → auto + repeat
-
-MO↔PC responsive (remapped.json pcDiff → @media overrides, MO base preserved):
-  Same value → keep MO only
-  Different px → @media { PC vw }
-  Different layout → @media { flex-direction: row }
-  Different image → @media { background-image: url(pc-xxx.webp) }
-  layoutSizing diff → @media { flex/width change }
-```

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

@@ -1,51 +0,0 @@
-# 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/rubrics/image-rules.md

@@ -1,157 +0,0 @@
-# Image Extraction Rules — Node Rendering Based
-
-## Core Principle
-
-```
-❌ imageRef 개별 다운로드 금지 (텍스처 fill 공유 문제)
-❌ 섹션/그룹을 통째 이미지로 렌더링 금지 (내부 TEXT/INSTANCE 포함 시)
-✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
-✅ 렌더링 전 반드시 2-1.5 판별 규칙 확인 → HTML 대상은 렌더링하지 않음
-
-실제 테스트에서 발생한 잘못된 렌더링:
-  ❌ exchange-section1.webp (카드 4개 그리드를 이미지 1장으로)
-  ❌ daily-step2-list.webp (보상 목록을 텍스트 포함하여 통째로)
-  ❌ prize-section1.webp (응모 아이템을 텍스트 포함하여 통째로)
-  ✅ 올바른 접근: 카드 내부의 아이콘/썸네일만 개별 렌더링
-```
-
-## Render Methods
-
-| 이미지 유형 | 렌더링 방법 | 출력 위치 |
-|-----------|-----------|---------|
-| BG 프레임 (합성 배경) | `screenshot {fileKey} {bg.nodeId}` | `bg/{section}-bg.webp` |
-| 콘텐츠 (타이틀, 버튼) | `screenshot {fileKey} {node.nodeId}` | `content/{name}.webp` |
-| 벡터 글자 그룹 | `screenshot {fileKey} {group.nodeId}` | `content/{name}.webp` |
-
-## BG 프레임 판별
-
-```
-BG 프레임 = 다음 중 하나:
-  - name에 "BG", "bg" 포함
-  - 부모와 크기 동일(±10%) + 자식 이미지 3개 이상
-  - 1depth 첫 번째 자식이면서 이미지 노드 다수 보유
-
-→ 프레임 렌더링 1장 → CSS background-image
-→ 하위 개별 레이어 다운로드하지 않음
-```
-
-## 벡터 글자 판별
-
-```
-벡터 글자 그룹 = 다음 모두 충족:
-  - 부모 GROUP/FRAME 아래 VECTOR 타입 3개 이상
-  - 각 VECTOR 크기 < 60x60
-  - 같은 imageRef 공유 (텍스처 fill)
-
-→ 부모 GROUP 통째로 렌더링 (개별 글자 다운로드 금지)
-→ 커스텀 폰트 텍스트 = 웹폰트 없음 → 이미지로 사용
-```
-
-## 렌더링 금지 노드 (HTML로 구현해야 하는 것)
-
-```
-다음 조건에 해당하는 노드는 이미지로 렌더링하지 않는다 — HTML+CSS로 구현:
-
-1. TEXT 자식 보유 프레임:
-   프레임 내부에 TEXT 노드가 1개 이상 있으면 → HTML로 구현
-   ⚠️ BG 프레임 렌더링 시에도 TEXT 포함 여부 반드시 확인:
-     - BG 프레임에 TEXT 자식이 있으면 → BG 하위만 렌더링 (TEXT 제외)
-     - 텍스트 포함된 상위 프레임을 통째 렌더링하면 → 이미지 텍스트 + HTML 텍스트 이중 표시
-
-2. INSTANCE 반복 패턴 (카드/아이템 그리드):
-   같은 부모 아래 동일 구조 INSTANCE 2개 이상 → HTML 반복 구조 (v-for/.map())
-   ❌ 카드 그리드를 통째 이미지 1장으로 렌더링 금지
-   ✅ 각 카드 내부의 이미지 에셋만 개별 추출 (아이콘, 아이템 이미지)
-   ✅ 카드 레이아웃, 텍스트, 버튼은 HTML로 구현
-
-3. 인터랙티브 요소:
-   name에 "btn", "button", "CTA", "link", "tab", "toggle" 포함 → HTML <button>/<a>
-   ❌ 버튼을 이미지로 렌더링 금지 (클릭 이벤트 불가)
-
-4. 정보 텍스트 영역:
-   기간, 가격, 수량, 설명 등 변경 가능 데이터 → HTML 텍스트
-   ❌ "1,000", "500 G-COIN", "보상 교환하기" 등을 이미지에 포함 금지
-```
-
-## 이미지로 렌더링하는 것 (HTML로 구현 불가)
-
-```
-다음만 이미지로 렌더링:
-
-1. 커스텀 폰트 텍스트 (벡터 글자 그룹):
-   - 웹폰트 없는 장식 타이틀 ("MISSION 01" 등)
-   - VECTOR 타입으로 분해된 글자 → GROUP 렌더링
-
-2. ⛔ 디자인 텍스트 (NEW — 그래디언트/스트로크/다중 효과 텍스트):
-   - TEXT 노드의 fills 2개 이상 (그래디언트+솔리드 중첩)
-   - TEXT 노드에 effects 있음 (DROP_SHADOW, stroke)
-   - TEXT 노드의 fills에 GRADIENT 타입 포함
-   - → 해당 TEXT 노드(또는 감싸는 GROUP)를 통째 렌더링
-   - → content/{section}-title.webp 등으로 저장
-   - ❌ CSS text-shadow/gradient로 근사치 구현 금지
-
-3. 합성 배경 (BG 프레임):
-   - 눈, 나무, 파티클 등 장식 레이어 합성물
-   - 텍스트 미포함 확인 필수
-
-4. 래스터 이미지 에셋:
-   - 게임 아이템 썸네일, 코인 아이콘 등
-   - imageRef가 있는 개별 RECTANGLE/노드
-
-5. 복잡한 벡터 그래픽:
-   - CSS로 재현 불가능한 일러스트/아이콘
-   - VECTOR/GROUP 조합의 복잡한 그래픽
-
-6. 장식 패널 배경 (목재 간판, 금속 플레이트 등):
-   - CSS로 재현 불가능한 텍스처/질감 배경
-   - → BG 프레임과 동일하게 렌더링 → background-image로 적용
-```
-
-## Format
-
-- Output format: `.webp` (Figma API에서 png 수신 → cwebp로 webp 변환)
-- cwebp 미설치 시 `.png` 폴백
-
-## Naming
-
-렌더링된 이미지의 파일명 = Figma 노드 name을 kebab-case로:
-  - `"Hero"` BG frame → `hero-bg.webp`
-  - `"Mission 01"` vector group → `mission-01.webp`
-  - `"Title"` content → `hero-title.webp` (섹션명 prefix)
-  - `"Btn_Login"` → `btn-login.webp`
-
-Rules:
-  - 공백 → 하이픈
-  - 언더스코어 → 하이픈
-  - 숫자 유지: `item11` → `item-11`
-  - 대문자 → 소문자
-
-## Destination
-
-```
-/tmp/{feature}/{bp-folder}/
-  bg/                    ← BG 프레임 렌더링
-  content/               ← 콘텐츠 + 벡터 글자 렌더링
-  sections/              ← Phase 4 검증용 스크린샷
-```
-
-최종 배치 (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
-
-노드 렌더링 불가 시에만 imageRef 다운로드:
-  - Figma screenshot API 실패 (rate limit, 권한)
-  - 다운로드 후 파일 크기 5MB 초과 → 텍스처 fill 가능성 → 경고 로그