@su-record/vibe 2.8.38 → 2.8.40

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` | ❌ |
@@ -84,36 +84,80 @@ Bash:
 
 ---
 
-## 2. 이미지 에셋
+## 2. 이미지 에셋 — 노드 렌더링 기반 (imageRef 개별 다운로드 금지)
 
-### 2-1. Fill 이미지 다운로드
+```
+❌ imageRef 개별 다운로드 금지
+   → 텍스처 fill을 공유하는 경우 원본 텍스처(22.7MB)가 다운됨
+   → 노드 렌더링하면 해당 노드에 적용된 최종 결과물(364KB)이 나옴
 
+✅ 모든 이미지는 Figma screenshot API로 노드 렌더링
 ```
-트리에서 imageRef 수집 → Figma API로 다운로드:
 
-Bash:
-  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out=/tmp/{feature}/images/ --depth=10
+### 2-1. BG 프레임 렌더링 (섹션 배경)
+
+```
+각 섹션의 BG 프레임을 식별 → 합성된 배경 1장으로 렌더링:
+
+BG 프레임 판별 기준:
+  - name에 "BG", "bg" 포함
+  - 또는 부모와 크기 동일(±10%) + 자식 이미지 3개 이상
+  - 또는 1depth 첫 번째 자식이면서 이미지 노드 다수 보유
 
-반환: { total: N, images: { "imageRef": "/path/to/file.png", ... } }
+렌더링:
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {bg.nodeId} --out=/tmp/{feature}/bg/{section}-bg.png
 
-검증: total = refs.size (누락 0), 0byte 파일 없음
+→ BG 하위 20+ 레이어가 합성된 1장
+→ CSS background-image로 처리
+→ 개별 레이어(눈, 나무, 파티클 등) 다운로드하지 않음
 ```
 
-### 2-2. 아이템/아이콘 노드 렌더링
+### 2-2. 콘텐츠 노드 렌더링
 
 ```
-fill 이미지가 없지만 시각적으로 의미 있는 노드를 PNG로 렌더링:
+BG가 아닌 콘텐츠 이미지를 개별 노드 렌더링:
 
 대상 식별 (tree.json에서):
-  - INSTANCE/COMPONENT 타입 중 크기 50~300px
-  - name에 "item", "icon", "reward", "token", "coin", "badge" 포함
-  - VECTOR/GROUP 중 크기 ≤ 64px (아이콘 후보)
+  - 타이틀/서브타이틀 이미지 (name에 "title", "sub title")
+  - 버튼 이미지 (name에 "btn", "button")
+  - 아이콘 (VECTOR/GROUP 크기 ≤ 64px)
+  - 아이템/보상 이미지 (name에 "item", "reward", "token", "coin")
+
+렌더링 (imageRef 다운로드 아님!):
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {node.nodeId} --out=/tmp/{feature}/content/{name}.png
+
+→ 텍스처 fill이 적용된 최종 결과물이 나옴
+→ 22.7MB 텍스처 대신 364KB 렌더링 이미지
+```
+
+### 2-3. 벡터 글자 그룹 렌더링
+
+```
+커스텀 폰트 텍스트가 글자별 벡터로 분리된 경우:
+
+판별:
+  - 부모 GROUP/FRAME 아래 VECTOR 타입 3개 이상
+  - 각 VECTOR 크기 < 60x60
+  - 같은 imageRef를 공유 (텍스처 fill)
 
 렌더링:
-  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --render --nodeIds={id1},{id2},... --out=/tmp/{feature}/images/
+  부모 GROUP을 통째로 렌더링 (개별 글자 다운로드 금지)
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {group.nodeId} --out=/tmp/{feature}/content/{name}.png
 
-→ 벡터/인스턴스 에셋도 PNG로 확보
-→ Phase 3에서 목 데이터의 image 경로에 연결 가능
+예시:
+  "MISSION 01" GROUP (174x42, 벡터 9개) → 렌더링 1장 (58KB)
+  "일일/누적 출석" GROUP (327x51, 벡터 7개) → 렌더링 1장 (93KB)
+```
+
+### 2-4. imageRef 다운로드를 사용하는 유일한 경우
+
+```
+노드 렌더링이 불가능한 경우에만 imageRef 다운로드 폴백:
+  - Figma screenshot API 실패 (rate limit, 권한 등)
+  - 노드가 DOCUMENT 레벨이라 렌더링 불가
+
+이 경우에도 파일 크기 확인:
+  - 5MB 초과 → 텍스처 fill 가능성 높음 → 경고 로그
 ```
 
 ---
@@ -144,21 +188,29 @@ fill 이미지가 없지만 시각적으로 의미 있는 노드를 PNG로 렌
 
 /tmp/{feature}/
 ├── tree.json                    ← 코드 생성의 PRIMARY 소스
-├── images/                      ← 이미지 에셋 (fill + 노드 렌더링)
-│   ├── {imageRef}.png           ← fill 이미지
-│   ├── {nodeId}.png             ← 렌더링된 아이템/아이콘
+├── bg/                          ← BG 프레임 렌더링 (섹션당 1장)
+│   ├── hero-bg.png
+│   ├── daily-bg.png
+│   └── ...
+├── content/                     ← 콘텐츠 노드 렌더링
+│   ├── hero-title.png
+│   ├── hero-subtitle.png
+│   ├── mission-01.png           ← 벡터 글자 그룹 렌더링
+│   ├── btn-login.png
 │   └── ...
 ├── full-screenshot.png          ← Phase 4 검증용
 └── sections/                    ← Phase 4 섹션별 검증용
     ├── hero.png
     └── ...
 
-이미지 목록:
-  파일명 | 크기 | 용도 (트리 기반 판별)
-  {ref}.png | 720×1280 | 배경 (부모와 동일 크기 + z-index 낮음)
-  {ref}.png | 620×174 | 콘텐츠 이미지 (독립적 크기)
-  {ref}.png | 48×48 | 아이콘 (≤64px)
-  {nodeId}.png | 200×200 | 렌더링된 아이템 (INSTANCE)
+이미지 분류 (실제 테스트 기준):
+  | 분류 | 처리 | 예시 |
+  |------|------|------|
+  | BG 프레임 (89개) | 프레임 렌더링 → bg/ | hero-bg.png (4.2MB) |
+  | 벡터 글자 (33개) | GROUP 렌더링 → content/ | mission-01.png (58KB) |
+  | 콘텐츠 (8개) | 노드 렌더링 → content/ | hero-title.png (364KB) |
+  | 장식 (29개) | BG 렌더링에 포함 | — |
+  → 전체 159개 → 실제 파일 약 18장
 
 색상 팔레트 (tree.json의 backgroundColor/color 고유값):
   #0a1628, #00264a, #ffffff, ...

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를 참조하세요.