@su-record/vibe 2.8.51 → 2.8.53

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

@@ -1,51 +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
+# 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/component-index.md

@@ -1,126 +1,126 @@
-# Component Index Template
-
-Phase 0에서 프로젝트 기존 컴포넌트를 인덱싱할 때 이 구조를 따른다.
-
----
-
-## 인덱스 구조
-
-```json
-{
-  "sources": [
-    {
-      "type": "local",
-      "path": "components/",
-      "name": "project-components",
-      "excludedFolders": ["__tests__", "stories"]
-    },
-    {
-      "type": "local",
-      "path": "composables/",
-      "name": "project-composables"
-    }
-  ],
-  "components": [
-    {
-      "name": "BaseButton",
-      "path": "components/common/BaseButton.vue",
-      "props": ["label: string", "variant: 'primary' | 'secondary'", "disabled: boolean"],
-      "slots": ["default"],
-      "classes": ["base-button", "base-button--primary", "base-button--secondary"],
-      "description": "공통 버튼 컴포넌트"
-    },
-    {
-      "name": "GNB",
-      "path": "components/layout/GNB.vue",
-      "props": ["menuItems: MenuItem[]"],
-      "slots": [],
-      "classes": ["gnb", "gnb__logo", "gnb__menu"],
-      "description": "글로벌 네비게이션 바"
-    }
-  ],
-  "composables": [
-    {
-      "name": "useAuth",
-      "path": "composables/useAuth.ts",
-      "params": [],
-      "returns": "{ user: User, login: (email: string, pw: string) => Promise<void> }",
-      "description": "인증 상태 관리"
-    }
-  ],
-  "types": [
-    {
-      "name": "User",
-      "path": "types/User.ts",
-      "fields": ["id: string", "email: string", "name: string"]
-    }
-  ],
-  "designTokens": {
-    "source": "styles/_variables.scss",
-    "colors": [
-      { "name": "$color-primary", "value": "#3b82f6" },
-      { "name": "$color-navy", "value": "#0a1628" }
-    ],
-    "spacing": [
-      { "name": "$space-sm", "value": "8px" },
-      { "name": "$space-md", "value": "16px" }
-    ],
-    "typography": [
-      { "name": "$font-pretendard", "value": "'Pretendard', sans-serif" }
-    ]
-  }
-}
-```
-
----
-
-## 인덱싱 규칙
-
-### 소스 스캔 (Phase 0)
-
-```
-Glob 패턴:
-  components/**/*.vue, components/**/*.tsx  → 컴포넌트
-  composables/**/*.ts, hooks/**/*.ts       → Composables/Hooks
-  types/**/*.ts, types.ts                  → 타입 정의
-  styles/_variables.scss, tailwind.config.* → 디자인 토큰
-```
-
-### 컴포넌트 추출 (Read 기반)
-
-각 파일에서:
-- **Props**: `defineProps<{...}>` 또는 `interface Props` 패턴
-- **Slots**: `<slot>` 또는 `{children}` 패턴
-- **Classes**: 최상위 template 요소의 `class="..."` 또는 `className={...}`
-- **Description**: JSDoc `@description` 또는 파일 첫 번째 주석
-
-### 제한
-
-- 파일 50개 초과 시 우선순위 디렉토리만: components/ui/ → components/common/ → components/shared/
-- 파일당 Read 최대 300줄
-- 전체 인덱싱 2분 이내
-
-### Figma 노드 ↔ 컴포넌트 매핑 (Phase 3)
-
-```
-tree.json 노드의 name/type으로 component-index 매칭:
-
-  name "Btn_*" + component-index에 BaseButton 존재
-    → <BaseButton :label="..." variant="primary" /> 로 재사용
-
-  name "GNB" + component-index에 GNB 존재
-    → <GNB :menu-items="..." /> 로 재사용
-
-  매칭 안 됨 → 새 컴포넌트 생성
-  50% 미만 props 호환 → 매칭 거부, 새로 생성
-```
-
----
-
-## 저장 위치
-
-```
-/tmp/{feature}/{bp-folder}/component-index.json
-```
-
-Phase 3에서 Read로 로드하여 컴포넌트 재사용 판단에 사용.
+# Component Index Template
+
+Phase 0에서 프로젝트 기존 컴포넌트를 인덱싱할 때 이 구조를 따른다.
+
+---
+
+## 인덱스 구조
+
+```json
+{
+  "sources": [
+    {
+      "type": "local",
+      "path": "components/",
+      "name": "project-components",
+      "excludedFolders": ["__tests__", "stories"]
+    },
+    {
+      "type": "local",
+      "path": "composables/",
+      "name": "project-composables"
+    }
+  ],
+  "components": [
+    {
+      "name": "BaseButton",
+      "path": "components/common/BaseButton.vue",
+      "props": ["label: string", "variant: 'primary' | 'secondary'", "disabled: boolean"],
+      "slots": ["default"],
+      "classes": ["base-button", "base-button--primary", "base-button--secondary"],
+      "description": "공통 버튼 컴포넌트"
+    },
+    {
+      "name": "GNB",
+      "path": "components/layout/GNB.vue",
+      "props": ["menuItems: MenuItem[]"],
+      "slots": [],
+      "classes": ["gnb", "gnb__logo", "gnb__menu"],
+      "description": "글로벌 네비게이션 바"
+    }
+  ],
+  "composables": [
+    {
+      "name": "useAuth",
+      "path": "composables/useAuth.ts",
+      "params": [],
+      "returns": "{ user: User, login: (email: string, pw: string) => Promise<void> }",
+      "description": "인증 상태 관리"
+    }
+  ],
+  "types": [
+    {
+      "name": "User",
+      "path": "types/User.ts",
+      "fields": ["id: string", "email: string", "name: string"]
+    }
+  ],
+  "designTokens": {
+    "source": "styles/_variables.scss",
+    "colors": [
+      { "name": "$color-primary", "value": "#3b82f6" },
+      { "name": "$color-navy", "value": "#0a1628" }
+    ],
+    "spacing": [
+      { "name": "$space-sm", "value": "8px" },
+      { "name": "$space-md", "value": "16px" }
+    ],
+    "typography": [
+      { "name": "$font-pretendard", "value": "'Pretendard', sans-serif" }
+    ]
+  }
+}
+```
+
+---
+
+## 인덱싱 규칙
+
+### 소스 스캔 (Phase 0)
+
+```
+Glob 패턴:
+  components/**/*.vue, components/**/*.tsx  → 컴포넌트
+  composables/**/*.ts, hooks/**/*.ts       → Composables/Hooks
+  types/**/*.ts, types.ts                  → 타입 정의
+  styles/_variables.scss, tailwind.config.* → 디자인 토큰
+```
+
+### 컴포넌트 추출 (Read 기반)
+
+각 파일에서:
+- **Props**: `defineProps<{...}>` 또는 `interface Props` 패턴
+- **Slots**: `<slot>` 또는 `{children}` 패턴
+- **Classes**: 최상위 template 요소의 `class="..."` 또는 `className={...}`
+- **Description**: JSDoc `@description` 또는 파일 첫 번째 주석
+
+### 제한
+
+- 파일 50개 초과 시 우선순위 디렉토리만: components/ui/ → components/common/ → components/shared/
+- 파일당 Read 최대 300줄
+- 전체 인덱싱 2분 이내
+
+### Figma 노드 ↔ 컴포넌트 매핑 (Phase 3)
+
+```
+tree.json 노드의 name/type으로 component-index 매칭:
+
+  name "Btn_*" + component-index에 BaseButton 존재
+    → <BaseButton :label="..." variant="primary" /> 로 재사용
+
+  name "GNB" + component-index에 GNB 존재
+    → <GNB :menu-items="..." /> 로 재사용
+
+  매칭 안 됨 → 새 컴포넌트 생성
+  50% 미만 props 호환 → 매칭 거부, 새로 생성
+```
+
+---
+
+## 저장 위치
+
+```
+/tmp/{feature}/{bp-folder}/component-index.json
+```
+
+Phase 3에서 Read로 로드하여 컴포넌트 재사용 판단에 사용.

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

@@ -1,100 +1,100 @@
-# 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 / Responsive
-
-| 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
-
-| Token | Hex | Usage |
-|-------|-----|-------|
-| `$color-{{NAME}}` | `{{HEX}}` | {{USAGE}} |
-
-### Typography Tokens
-
-| Token | Figma px | vw | clamp 최소 | Role |
-|-------|---------|-----|----------|------|
-| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{VW}}vw | {{MIN_PX}}px | {{ROLE}} |
-
-### Spacing Tokens
-
-| Token | Figma px | vw | Usage |
-|-------|---------|-----|-------|
-| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{VW}}vw | {{USAGE}} |
-
----
-
-## Sections
-
-| # | Section Name | Component File | Tree Nodes | Height (design) |
-|---|-------------|---------------|-----------|----------------|
-| 1 | {{SECTION_NAME}} | `components/{{FEATURE_KEY}}/{{ComponentName}}.vue` | {{NODE_COUNT}} | {{HEIGHT}}px |
-
-**Generation:** tree.json → HTML+SCSS 구조적 매핑 (vw/clamp 반응형)
-
----
-
-## Asset Manifest
-
-| Image | Local Path | Type | Render Method |
-|-------|-----------|------|--------------|
-| {{NAME}} | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.webp` | {{bg\|content\|vector-text}} | {{frame-render\|node-render\|group-render}} |
-
-Total assets: {{ASSET_COUNT}} (BG 렌더링 {{BG_COUNT}}장 + 콘텐츠 {{CONTENT_COUNT}}장)
-
----
-
-## File Structure
-
-```
-/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/
-```
-
----
-
-## Verification Checklist
-
-- [ ] No `figma.com/api` URLs in any generated file
-- [ ] No `placeholder` or empty `src=""` in components
-- [ ] 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
-
----
-
-## Notes
-
-{{NOTES}}
+# 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 / Responsive
+
+| 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
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `$color-{{NAME}}` | `{{HEX}}` | {{USAGE}} |
+
+### Typography Tokens
+
+| Token | Figma px | vw | clamp 최소 | Role |
+|-------|---------|-----|----------|------|
+| `$text-{{ROLE}}` | {{FIGMA_PX}}px | {{VW}}vw | {{MIN_PX}}px | {{ROLE}} |
+
+### Spacing Tokens
+
+| Token | Figma px | vw | Usage |
+|-------|---------|-----|-------|
+| `$space-{{NAME}}` | {{FIGMA_PX}}px | {{VW}}vw | {{USAGE}} |
+
+---
+
+## Sections
+
+| # | Section Name | Component File | Tree Nodes | Height (design) |
+|---|-------------|---------------|-----------|----------------|
+| 1 | {{SECTION_NAME}} | `components/{{FEATURE_KEY}}/{{ComponentName}}.vue` | {{NODE_COUNT}} | {{HEIGHT}}px |
+
+**Generation:** tree.json → HTML+SCSS 구조적 매핑 (vw/clamp 반응형)
+
+---
+
+## Asset Manifest
+
+| Image | Local Path | Type | Render Method |
+|-------|-----------|------|--------------|
+| {{NAME}} | `/images/{{FEATURE_KEY}}/{{FILE_NAME}}.webp` | {{bg\|content\|vector-text}} | {{frame-render\|node-render\|group-render}} |
+
+Total assets: {{ASSET_COUNT}} (BG 렌더링 {{BG_COUNT}}장 + 콘텐츠 {{CONTENT_COUNT}}장)
+
+---
+
+## File Structure
+
+```
+/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/
+```
+
+---
+
+## Verification Checklist
+
+- [ ] No `figma.com/api` URLs in any generated file
+- [ ] No `placeholder` or empty `src=""` in components
+- [ ] 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
+
+---
+
+## Notes
+
+{{NOTES}}