@su-record/vibe 2.8.37 → 2.8.39

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

@@ -1,83 +1,74 @@
-# React+Tailwind → Project Stack Conversion Rules
-
-## Mode Selection (Do This First)
-
-Classify each section before writing any code. Literal mode if ANY of:
-- 15+ asset URLs in the section
-- Fractional coordinates (`left-[117.13px]`)
-- `mix-blend-*` on any layer
-- `rotate-[Ndeg]` or `-scale-y-100`
-- `mask-image` usage
-- `blur-[Npx]` filter
-- BG cropped from 2560px+ source
-
-Normal mode only when ALL of:
-- Flex/grid layout, no absolute coordinates (or integer-only)
-- Fewer than 10 asset URLs
-- No blend/rotate/mask/blur
-
-## Normal Mode Rules
-
-- Extract CSS values from Tailwind classes — never estimate
-- Apply `scaleFactor` to all `px` values; never to colors, opacity, z-index, line-height (unitless)
-- Put layout properties in `layout/_section.scss`, visual/text properties in `components/_section.scss`
-- No `<style>` block in the component file
-- No inline `style=""` attribute in the template
-
-## Literal Mode Rules
-
-- Preserve the full HTML nesting structure 1:1
-- Keep all absolute coordinates, fractional px values (rounded after scaling)
-- Keep all `mix-blend-mode`, `rotate`, `mask-image`, `blur` values unchanged
-- Put all styles in `<style scoped>` inside the component
-- Do not create external SCSS files for literal sections
-
-## Tailwind Class Gotchas
-
-| Tailwind | Correct CSS | Common Mistake |
-|----------|------------|----------------|
-| `size-full` | `width: 100%; height: 100%` | Only setting `width: 100%` |
-| `inset-0` | `inset: 0` (shorthand) | Expanding to 4 properties |
-| `inset-[-18.13%]` | `inset: -18.13%` | Scaling the % value |
-| `overflow-clip` | `overflow: clip` | Using `overflow: hidden` |
-| `leading-[1.4]` | `line-height: 1.4` | Applying scaleFactor |
-| `max-w-none` | `max-width: none` | Omitting entirely |
-| `object-cover` on `<img>` | `object-fit: cover` + parent `overflow: hidden` | Forgetting parent clip |
-| `pointer-events-none` | `pointer-events: none` | Omitting for decorative layers |
-| `text-white` | `color: #FFFFFF` | Using `color: white` |
-| `font-black` | `font-weight: 900` | Using `font-weight: bold` |
-
-## Scale Application
-
-Apply `× scaleFactor` to:
-- `px` sizes: font-size, padding, margin, gap, border-radius, width, height, top, left, bottom, right
-- `px` in box-shadow, blur filter, letter-spacing
-
-Do NOT scale:
-- Color values
-- Opacity values
-- `%` values
-- Unitless line-height
-- z-index
-- `mix-blend-mode` values
-- `rotate` degree values
-
-## Sprite / Overflow Image Pattern
-
-When `left` is a large negative %, it is a sprite crop — do NOT scale:
-```css
-/* Correct */
-left: -129.09%;
-width: 229.09%;
-
-/* Wrong — do not scale % values */
-left: -86.09%; /* -129.09 × 0.667 — incorrect */
+# 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) | 스킵 |
+
+## 배경 레이어 판별
+
+부모와 동일 크기(±5%) + imageRef + 형제 중 첫 위치:
+  → `position: absolute; inset: 0; z-index: 0; object-fit: cover`
+  → 부모에 `position: relative; overflow: hidden` 추가
+
+## CSS 직접 매핑 규칙
+
+tree.json의 css 객체를 SCSS에 1:1 매핑한다:
+
+### layout/ 파일에 넣는 속성
+```
+display, flex-direction, justify-content, align-items,
+gap, padding, width, height, position, overflow, z-index, inset
 ```
 
-## Class Naming (Literal Mode)
+### 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
+```
+
+## Scale Factor 적용
+
+**적용 (px 값):**
+  font-size, padding, margin, gap, width, height, border-radius,
+  border-width, box-shadow px, filter px, letter-spacing
+
+**미적용:**
+  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에 정의되어야 함
+
+## 자가 검증 (코드 작성 후)
 
-Source priority: `data-name` attribute → `data-node-id`
-- `data-name="BG"` → `.bg`
-- `data-name="Light"` → `.light`
-- No `data-name` → `.node-{nodeId}` (replace `:` with `-`)
-- Conflicts: append parent name prefix (`.heroLight`, `.kidLight`)
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
+- [ ] tree.json에 없는 CSS 값이 SCSS에 없음

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

@@ -1,152 +1,144 @@
-# Component Output Template
+# Component Output Template — Tree-Based Generation
 
-Use this template when generating a section component from Figma reference code.
+tree.json 노드를 기반으로 컴포넌트를 생성할 때 이 템플릿을 따른다.
 
 ---
 
-## Normal Mode (External SCSS)
+## Vue / Nuxt (External SCSS)
 
 ```vue
-<!-- components/{{FEATURE_KEY}}/{{ComponentName}}.vue -->
+<!--
+  tree.json 구조:
+  {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
+  ├── BG (FRAME — 배경 레이어)
+  │   └── imageRef → {{BG_IMAGE}}
+  ├── {{CHILD_1}} (FRAME — flex-column, gap:{{GAP}}px)
+  │   ├── TEXT "{{TEXT_1}}"
+  │   └── TEXT "{{TEXT_2}}"
+  └── {{CHILD_2}} (FRAME — flex-row, gap:{{GAP_2}}px)
+      └── INSTANCE × {{REPEAT_COUNT}} (반복 패턴)
+-->
 <template>
   <section class="{{sectionName}}">
-    <!-- BG Layer (if section has background image) -->
-    <div class="{{sectionName}}Bg">
-      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.webp" alt="" aria-hidden="true" />
+    <!-- BG: 부모와 동일 크기 + imageRef → 배경 레이어 -->
+    <div class="{{sectionName}}__bg">
+      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.png" alt="" aria-hidden="true" />
     </div>
 
-    <!-- Content Layer -->
-    <div class="{{sectionName}}Content">
-      <!-- Title image (if present) -->
-      <div class="{{sectionName}}Title">
-        <img src="/images/{{FEATURE_KEY}}/{{title-file}}.webp" alt="{{TITLE_ALT_TEXT}}" />
-      </div>
-
-      <!-- Repeating items (from storyboard mock data) -->
-      <ul class="{{sectionName}}List">
-        <li
-          v-for="item in items"
-          :key="item.id"
-          class="{{sectionName}}Item"
-        >
-          <img :src="item.image" :alt="item.label" />
-          <p class="{{sectionName}}ItemLabel">{{ item.label }}</p>
-        </li>
-      </ul>
-
-      <!-- CTA Button -->
-      <button class="{{sectionName}}Btn" @click="handleAction">
-        {{BUTTON_LABEL}}
-      </button>
+    <!-- {{CHILD_1}}: tree flex-column, gap:{{GAP}}px → 직접 매핑 -->
+    <div class="{{sectionName}}__{{child1Name}}">
+      <!-- TEXT 노드 → Claude가 시맨틱 태그 판단 -->
+      <h2 class="{{sectionName}}__title">{{TEXT_1}}</h2>
+      <p class="{{sectionName}}__desc">{{TEXT_2}}</p>
     </div>
+
+    <!-- {{CHILD_2}}: INSTANCE 반복 → v-for -->
+    <ul class="{{sectionName}}__list">
+      <li
+        v-for="item in items"
+        :key="item.id"
+        class="{{sectionName}}__item"
+      >
+        <img :src="item.image" :alt="item.name" class="{{sectionName}}__itemImg" />
+        <span class="{{sectionName}}__itemLabel">{{ item.name }}</span>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script setup lang="ts">
 /**
  * {{SECTION_DISPLAY_NAME}}
+ * tree.json: {{SECTION_NAME}} ({{TYPE}} {{WIDTH}}x{{HEIGHT}})
  *
  * [기능 정의]
  * - {{FEATURE_REQUIREMENT_1}}
- * - {{FEATURE_REQUIREMENT_2}}
  *
  * [인터랙션]
  * ① {{INTERACTION_1}}
- * ② {{INTERACTION_2}}
  *
  * [상태] {{STATE_LIST}}
  */
 
 interface {{ItemType}} {
-  id: number
-  label: string
+  id: string
+  name: string
   image: string
 }
 
-const items: {{ItemType}}[] = [
-  { id: 1, label: '{{MOCK_LABEL_1}}', image: '/images/{{FEATURE_KEY}}/{{mock-img-1}}.webp' },
-  { id: 2, label: '{{MOCK_LABEL_2}}', image: '/images/{{FEATURE_KEY}}/{{mock-img-2}}.webp' },
-  { id: 3, label: '{{MOCK_LABEL_3}}', image: '/images/{{FEATURE_KEY}}/{{mock-img-3}}.webp' },
-]
-
-const emit = defineEmits<{
-  action: []
+defineProps<{
+  items: {{ItemType}}[]
 }>()
-
-function handleAction(): void {
-  // TODO: {{ACTION_DESCRIPTION}}
-  emit('action')
-}
 </script>
 <!-- styles: styles/{{FEATURE_KEY}}/layout/_{{section}}.scss + components/_{{section}}.scss -->
 ```
 
 ---
 
-## Literal Mode (Scoped CSS)
-
-```vue
-<!-- components/{{FEATURE_KEY}}/{{ComponentName}}.vue -->
-<template>
-  <section class="{{sectionName}}">
-    <!-- 1:1 structure from reference code — preserve all nesting -->
-    <div class="bg">
-      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.webp" alt="" aria-hidden="true" />
-    </div>
-    <div class="titleArea">
-      <img src="/images/{{FEATURE_KEY}}/{{title-file}}.webp" alt="{{TITLE_ALT_TEXT}}" />
-    </div>
-    <!-- Re-insert Phase 1 functional elements at appropriate positions -->
-    <button class="ctaBtn" @click="handleAction">{{BUTTON_LABEL}}</button>
-  </section>
-</template>
+## SCSS Layout (tree.json 직접 매핑)
 
-<script setup lang="ts">
-/**
- * {{SECTION_DISPLAY_NAME}}
- * [기능 정의] {{FEATURE_REQUIREMENT_1}}
- * [인터랙션] ① {{INTERACTION_1}}
- * [상태] {{STATE_LIST}}
- */
+```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}}
 
-function handleAction(): void {
-  // TODO: {{ACTION_DESCRIPTION}}
-}
-</script>
-
-<style scoped>
 .{{sectionName}} {
   position: relative;
   width: 100%;
-  height: {{SECTION_HEIGHT_SCALED}}px; /* {{SECTION_HEIGHT_ORIGINAL}} × {{SCALE_FACTOR}} */
-  overflow: hidden;
+  height: {{HEIGHT_SCALED}}px;           // tree: {{HEIGHT}} × {{SCALE_FACTOR}}
+  overflow: hidden;                       // tree: overflow:hidden
 }
 
-.bg {
+.{{sectionName}}__bg {
   position: absolute;
   inset: 0;
+  z-index: 0;
+  img { width: 100%; height: 100%; object-fit: cover; }
 }
 
-.bg img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.{{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}}
 }
+```
 
-.titleArea {
-  position: absolute;
-  top: {{TITLE_TOP_SCALED}}px;    /* {{TITLE_TOP_ORIGINAL}} × {{SCALE_FACTOR}} */
-  left: 50%;
-  transform: translateX(-50%);
-  width: {{TITLE_WIDTH_SCALED}}px;
-  height: {{TITLE_HEIGHT_SCALED}}px;
-}
+---
+
+## SCSS Components (tree.json 직접 매핑)
+
+```scss
+// tree.json 데이터:
+// TEXT "{{TEXT_1}}": { fontSize:{{FONT_SIZE}}px, fontWeight:{{FONT_WEIGHT}}, color:{{COLOR}} }
 
-/* {{RESPONSIVE_BREAKPOINT}} */
-@media (min-width: {{BP_PC}}px) {
-  .{{sectionName}} {
-    height: {{SECTION_HEIGHT_PC_SCALED}}px;
-  }
+.{{sectionName}}__title {
+  font-size: {{FONT_SIZE_SCALED}}px;      // tree: {{FONT_SIZE}} × {{SCALE_FACTOR}}
+  font-weight: {{FONT_WEIGHT}};           // tree: 직접 (scaleFactor 미적용)
+  color: {{COLOR}};                       // tree: 직접 (scaleFactor 미적용)
 }
-</style>
 ```
+
+---
+
+## React / Next.js 변환
+
+| Vue | React |
+|-----|-------|
+| `class="..."` | `className={styles.xxx}` (CSS Module) |
+| `v-for="i in items" :key="i.id"` | `{items.map(i => <X key={i.id} />)}` |
+| `v-if="condition"` | `{condition && <X />}` |
+| `@click="handler"` | `onClick={handler}` |
+| `<img src="/images/..."` | `<Image src="/images/..."` |
+
+---
+
+## 검증 체크리스트
+
+- [ ] tree.json에 없는 CSS 값이 SCSS에 없음
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] TEXT 노드의 characters가 template에 그대로 삽입됨
+- [ ] Auto Layout 노드 → SCSS에 flex 속성 존재
+- [ ] 빌드 성공