@su-record/vibe 3.2.62 → 4.0.0

package/skills/vibe.figma/templates/component-index.md

@@ -1,126 +0,0 @@
-# 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/component-spec.md

@@ -1,168 +0,0 @@
-# component-spec.json 템플릿
-
-architect 에이전트가 sections.json을 분석하여 생성하는 설계서.
-builder 에이전트는 이 설계서대로만 구현한다.
-
-## 생성 규칙
-
-```
-입력: /tmp/{feature}/{bp}-main/sections.json
-출력: /tmp/{feature}/{bp}-main/component-spec.json
-
-⛔ CSS 값을 결정하지 않는다 (figma-to-scss.js가 담당)
-⛔ SCSS 파일을 생성하지 않는다
-✅ HTML 구조, 태그 선택, 컴포넌트 분리, 이미지 분류만 결정
-```
-
-## 구조
-
-```json
-{
-  "meta": {
-    "feature": "winter-pcbang",
-    "bp": "mo",
-    "designWidth": 720,
-    "stack": "nuxt2-vue2-scss"
-  },
-
-  "components": [
-    {
-      "name": "KidSection",
-      "sectionName": "KID",
-      "file": "components/{feature}/KidSection.vue",
-      "scssFile": "_kid.scss",
-      "tag": "section",
-      "id": "kid",
-
-      "bg": {
-        "image": "bg/kid-bg.webp",
-        "method": "css-background"
-      },
-
-      "elements": [
-        {
-          "class": "btn-login",
-          "tag": "button",
-          "role": "interactive",
-          "event": { "type": "click", "action": "emit('login')" },
-          "children": [
-            {
-              "class": "btn-login-btn-login",
-              "tag": "div",
-              "role": "layout"
-            },
-            {
-              "class": "btn-login-btn-login-krafton-id",
-              "tag": "img",
-              "role": "content-image",
-              "src": "content/kid-krafton-id.webp",
-              "alt": "KRAFTON ID 로그인"
-            }
-          ]
-        },
-        {
-          "class": "krafton-id",
-          "tag": "p",
-          "role": "text",
-          "text": "KRAFTON ID로 로그인하고 이벤트에 참여하세요!..."
-        },
-        {
-          "class": "steam-account",
-          "tag": "div",
-          "role": "layout",
-          "children": [
-            {
-              "class": "steam-account-frame-27161",
-              "tag": "a",
-              "role": "link",
-              "href": "#",
-              "children": [
-                {
-                  "class": "steam-account-frame-27161-krafton-id-steam",
-                  "tag": "span",
-                  "role": "text",
-                  "text": "KRAFTON ID Steam 연동 안내"
-                }
-              ]
-            },
-            {
-              "class": "steam-account-kakao-games-krafton-id",
-              "tag": "p",
-              "role": "text",
-              "text": "Kakao games는 게임 내에서만..."
-            }
-          ]
-        }
-      ],
-
-      "imageClassification": [
-        {
-          "node": "BG",
-          "decision": "bg",
-          "reason": "name='BG', 합성 배경, TEXT 자식 없음"
-        },
-        {
-          "node": "KRAFTON ID 로그인",
-          "decision": "content-image",
-          "reason": "RENDERED_IMAGE (디자인 텍스트, outline 효과)"
-        },
-        {
-          "node": "볼트_2",
-          "decision": "skip",
-          "reason": "5x5 장식 볼트, 동일 imageRef 4개 → CSS로 대체 가능"
-        }
-      ]
-    }
-  ],
-
-  "shared": [],
-
-  "tokens": {
-    "note": "figma-to-scss.js가 _tokens.scss 자동 생성. architect는 참조만."
-  }
-}
-```
-
-## 판단 기준
-
-### tag 선택
-| sections.json 조건 | tag |
-|---|---|
-| 섹션 루트 | `section` |
-| type=TEXT + 제목 역할 (name에 title/heading) | `h2`~`h6` |
-| type=TEXT + 설명 | `p` |
-| type=TEXT + 라벨 | `span` / `strong` |
-| name에 btn/button/CTA | `button` |
-| name에 link/연동/안내 + href 가능 | `a` |
-| type=RENDERED_IMAGE | `img` |
-| imageRef 있음 + 콘텐츠 이미지 | `img` |
-| INSTANCE 반복 2+ | 부모에 v-for 표시 |
-| 나머지 FRAME/GROUP | `div` |
-
-### role 종류
-| role | 의미 |
-|---|---|
-| `bg` | 배경 (CSS background-image) |
-| `layout` | 레이아웃 컨테이너 |
-| `text` | 텍스트 콘텐츠 |
-| `content-image` | 콘텐츠 이미지 (img 태그) |
-| `interactive` | 클릭/인터랙션 가능 |
-| `link` | 네비게이션 링크 |
-| `decoration` | 장식 (aria-hidden) |
-| `list` | 반복 구조 (v-for) |
-| `skip` | 무시 (너무 작거나 불필요) |
-
-### 이미지 분류 (imageClassification)
-⛔ 모든 이미지 관련 노드에 대해 반드시 분류 기록.
-| decision | 조건 |
-|---|---|
-| `bg` | isBGFrame, TEXT 자식 없음 |
-| `content-image` | RENDERED_IMAGE, 벡터 글자, 디자인 텍스트 |
-| `asset` | imageRef 있는 아이콘/썸네일 |
-| `skip` | 너무 작은 장식 (≤5px), CSS로 대체 가능 |
-| `html` | TEXT 자식 포함, 인터랙티브, 동적 데이터 |
-
-### 공유 컴포넌트 (shared)
-- 동일 구조 INSTANCE가 2+ 섹션에서 사용 → shared
-- 3+ 사용 시 필수 분리
-- Props/Slots 인터페이스 정의 필수

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

@@ -1,140 +0,0 @@
-# Component Output Template — Tree-Based Generation
-
-tree.json 노드를 기반으로 컴포넌트를 생성할 때 이 템플릿을 따른다.
-
----
-
-## Vue / Nuxt (External SCSS)
-
-```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: CSS background-image로 처리. img 태그 사용 금지! -->
-    <!-- SCSS: .{{sectionName}} { background-image: url('/images/{{FEATURE_KEY}}/{{bg-file}}.webp'); background-size: cover; } -->
-
-    <!-- {{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}}
- *
- * [인터랙션]
- * ① {{INTERACTION_1}}
- *
- * [상태] {{STATE_LIST}}
- */
-
-interface {{ItemType}} {
-  id: string
-  name: string
-  image: string
-}
-
-defineProps<{
-  items: {{ItemType}}[]
-}>()
-</script>
-<!-- styles: styles/{{FEATURE_KEY}}/layout/_{{section}}.scss + components/_{{section}}.scss -->
-```
-
----
-
-## 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}}" }
-// designWidth = {{DESIGN_WIDTH}}px → vw = (px / designWidth) × 100
-
-.{{sectionName}} {
-  position: relative;
-  width: 100%;
-  height: {{HEIGHT_VW}}vw;               // tree: {{HEIGHT}} / {{DESIGN_WIDTH}} × 100
-  overflow: hidden;                       // tree: overflow:hidden
-  background-image: url('/images/{{FEATURE_KEY}}/{{section}}-bg.webp');
-  background-size: cover;
-  background-position: center top;
-}
-
-.{{sectionName}}__{{child1Name}} {
-  display: flex;                          // tree: display:flex
-  flex-direction: column;                 // tree: flexDirection:column
-  gap: {{GAP_VW}}vw;                      // tree: {{GAP}} / {{DESIGN_WIDTH}} × 100
-  padding: {{PADDING_VW}};               // tree: "{{PADDING}}" / {{DESIGN_WIDTH}} × 100
-}
-```
-
----
-
-## 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 {
-  // 역할: 제목 → 최소 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: 직접 (변환 안 함)
-}
-```
-
----
-
-## 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 속성 존재
-- [ ] 빌드 성공

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

@@ -1,100 +0,0 @@
-# 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}}