@su-record/vibe 2.8.39 → 2.8.41

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

package/skills/vibe.figma.pipeline/rubrics/pipeline-stages.md

@@ -1,96 +0,0 @@
-# Pipeline Stage Descriptions and Failure Handling
-
-> This skill is merged into vibe.figma.consolidate (D-4). This rubric describes each stage of the Figma-to-code pipeline and what to do when a stage fails.
-
-## Stage Map
-
-```
-Phase 0: Setup
-  └─ Detect stack → Determine feature key → Create directories
-
-Phase 1: Storyboard
-  └─ Classify frames → Analyze SPEC/CONFIG/PAGE → Generate component shells
-
-Phase 2: Design (per breakpoint)
-  ├─ 2-1: Style scaffold
-  ├─ 2-2: Classify mode (normal/literal) per section
-  ├─ 2-3: Split tall frames if needed
-  └─ 2-4: Section loop
-       ├─ a. get_design_context
-       ├─ b. Download all assets
-       ├─ c. Convert code
-       ├─ d. Refactor component template
-       └─ e. Verify section
-
-Phase 3: Verification
-  ├─ Automated grep checks
-  └─ Screenshot comparison
-```
-
-## Stage Failure Handling
-
-### Phase 0 Failures
-
-| Failure | Resolution |
-|---------|-----------|
-| Cannot detect stack | Ask user: "Vue or React? SCSS or Tailwind?" |
-| Directory already exists | Proceed — do not overwrite existing files unless replacing |
-
-### Phase 1 Failures
-
-| Failure | Resolution |
-|---------|-----------|
-| Metadata too large (>100K chars) | Save to file, parse with Bash/Python to extract frame list |
-| No SPEC frame found | Continue without feature requirements; note missing in report |
-| No CONFIG frame | Use default scale factors (mobile: 480/720=0.667, PC: 1920/2560=0.75) |
-| Storyboard URL is "없음" | Skip Phase 1, go directly to Phase 2 |
-
-### Phase 2-a Failures (get_design_context)
-
-| Failure | Retry | Escalation |
-|---------|-------|-----------|
-| Timeout on first call | Retry once with `excludeScreenshot: true` | Split frame → per-child calls |
-| Timeout after split | Retry individual child once | `get_screenshot` + visual estimation |
-| Empty response | Retry once | Skip section, log in consolidation report |
-
-Maximum retries per section: 2. After 2 failures: use screenshot fallback. Never loop more than 3 times on the same section.
-
-### Phase 2-b Failures (Asset Download)
-
-| Failure | Resolution |
-|---------|-----------|
-| 0-byte file | Retry once with same curl command |
-| 404 URL | Try `get_metadata` → sub-node → `get_design_context` for fresh URL |
-| All retries failed | Log missing asset; continue with other assets; mark section as needs-review |
-
-Single asset failure does not block the entire section unless it is a critical background image.
-
-### Phase 2-e Section Verification Failures
-
-| Check Failed | Action |
-|-------------|--------|
-| Figma URL in output | Find and replace all occurrences; re-verify |
-| 0-byte or missing image | Re-download; if impossible, use placeholder only with TODO comment |
-| Empty template | Do not proceed to next section until fixed |
-| Build error | Fix TypeScript/template error; re-build |
-
-### Phase 3 Failures (Screenshot Comparison)
-
-| Priority | Issue Type | Action |
-|----------|-----------|--------|
-| P1 | Image missing, wrong layout, unstyled text | Fix immediately; re-verify before continuing |
-| P2 | Spacing delta, slight color difference | Fix if time allows; defer if P1=0 and deadline is tight |
-| P3 | Pixel-perfect micro-adjustments | Deferred to `/design-polish` pass |
-
-P1 = 0 is required before the feature is considered complete. P2/P3 are best-effort.
-
-## Design Quality Pipeline (Post-completion)
-
-```
-/design-normalize  → normalize inconsistent values
-/design-audit      → automated audit (quick pass)
-/design-critique   → thorough visual critique
-/design-polish     → final polish pass
-```
-
-Run at minimum: `/design-normalize` → `/design-audit --quick` before committing.

package/skills/vibe.figma.rules/SKILL.md

@@ -1,10 +0,0 @@
----
-name: vibe.figma.rules
-description: "[Merged] → vibe.figma (rules are inlined) 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.rules
-
-이 스킬의 규칙은 **vibe.figma**, **vibe.figma.extract**, **vibe.figma.convert** 3개 스킬에 내장되었습니다.

package/skills/vibe.figma.rules/rubrics/naming-conventions.md

@@ -1,70 +0,0 @@
-# Figma Layer Naming Conventions for Clean Extraction
-
-> This skill is inlined into vibe.figma, vibe.figma.extract, and vibe.figma.convert. This rubric documents how Figma layer names map to generated code identifiers.
-
-## Layer Name → CSS Class
-
-Convert `data-name` attribute values from reference code to CSS class names:
-
-| Figma Layer Name | CSS Class | Notes |
-|-----------------|-----------|-------|
-| `BG` | `.bg` | Lowercase single word |
-| `Title` | `.title` | PascalCase → camelCase |
-| `Period` | `.period` | |
-| `Light` | `.light` | |
-| `BTN_Share` | `.btnShare` | `BTN_` prefix → `btn`, underscore → camelCase |
-| `BTN_Primary` | `.btnPrimary` | |
-| `KV` (Key Visual) | `.kv` | Acronym → all lowercase |
-| `GNB` | `.gnb` | |
-| `PC_Banner` | `.pcBanner` | |
-| `Snow_Particle_12` | `.snowParticle12` | Underscore-separated → camelCase |
-| *(no data-name)* | `.node-{nodeId}` | Replace `:` with `-` in nodeId |
-
-## Conflict Resolution
-
-When two layers in the same section share the same name:
-- Prefix with parent layer name: `.heroLight`, `.kidLight`
-- Or append an index suffix: `.light-1`, `.light-2`
-- Never generate duplicate class names in the same `<style scoped>` block
-
-## Image Variable Name → File Name
-
-| Figma Variable | File Name | Rule |
-|---------------|-----------|------|
-| `imgTitle` | `title.webp` | Strip `img` prefix, kebab-case |
-| `img21` | `img-21.webp` | Numeric suffix: keep number |
-| `imgSnowParticle12` | `snow-particle-12.webp` | CamelCase → kebab |
-| `imgImgBannerStatic` | `banner-static.webp` | Double `img` prefix → strip both |
-| `imgBtnShare` | `btn-share.webp` | |
-
-## Component File Naming
-
-| Figma Section Name | Component File |
-|-------------------|----------------|
-| "Hero" / "히어로" | `HeroSection.vue` |
-| "Daily Check-in" / "일일 출석" | `DailyCheckInSection.vue` |
-| "Play Time Mission" | `PlayTimeMissionSection.vue` |
-| "Exchange" / "교환" | `ExchangeSection.vue` |
-| "Popup" | `RewardPopup.vue` (non-section suffix) |
-| "GNB" | `TheGnb.vue` (project-wide shared) |
-
-Rules:
-- PascalCase always
-- Append `Section` suffix for page sections
-- No `Section` suffix for popups, overlays, shared layout components
-
-## Feature Key (Directory Name)
-
-Derived from Figma file name:
-
-| Figma File Name | Feature Key |
-|----------------|-------------|
-| "PUBG 겨울 PC방 이벤트" | `winter-pcbang` |
-| "Summer Campaign 2025" | `summer-campaign-2025` |
-| "Login Page Redesign" | `login-page-redesign` |
-
-Rules:
-- kebab-case
-- Remove language/brand prefixes if obvious from context
-- Numbers and years are kept
-- No special characters

package/skills/vibe.figma.style/SKILL.md

@@ -1,10 +0,0 @@
----
-name: vibe.figma.style
-description: "[Merged] → vibe.figma.convert 참조"
-triggers: []
-tier: standard
----
-
-# vibe.figma.style
-
-이 스킬은 **vibe.figma.convert**으로 병합되었습니다.