@su-record/vibe 2.8.24 → 2.8.25

package/skills/vibe-figma-codegen/rubrics/code-quality.md

@@ -0,0 +1,54 @@
+# 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/templates/consolidation-report.md

@@ -0,0 +1,95 @@
+# 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-convert/rubrics/conversion-rules.md

@@ -0,0 +1,83 @@
+# 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 */
+```
+
+## Class Naming (Literal Mode)
+
+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`)

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

@@ -0,0 +1,152 @@
+# Component Output Template
+
+Use this template when generating a section component from Figma reference code.
+
+---
+
+## Normal Mode (External SCSS)
+
+```vue
+<!-- components/{{FEATURE_KEY}}/{{ComponentName}}.vue -->
+<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" />
+    </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>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+/**
+ * {{SECTION_DISPLAY_NAME}}
+ *
+ * [기능 정의]
+ * - {{FEATURE_REQUIREMENT_1}}
+ * - {{FEATURE_REQUIREMENT_2}}
+ *
+ * [인터랙션]
+ * ① {{INTERACTION_1}}
+ * ② {{INTERACTION_2}}
+ *
+ * [상태] {{STATE_LIST}}
+ */
+
+interface {{ItemType}} {
+  id: number
+  label: 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: []
+}>()
+
+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>
+
+<script setup lang="ts">
+/**
+ * {{SECTION_DISPLAY_NAME}}
+ * [기능 정의] {{FEATURE_REQUIREMENT_1}}
+ * [인터랙션] ① {{INTERACTION_1}}
+ * [상태] {{STATE_LIST}}
+ */
+
+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;
+}
+
+.bg {
+  position: absolute;
+  inset: 0;
+}
+
+.bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.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;
+}
+
+/* {{RESPONSIVE_BREAKPOINT}} */
+@media (min-width: {{BP_PC}}px) {
+  .{{sectionName}} {
+    height: {{SECTION_HEIGHT_PC_SCALED}}px;
+  }
+}
+</style>
+```

package/skills/vibe-figma-extract/rubrics/image-rules.md

@@ -0,0 +1,67 @@
+# Image Extraction Rules
+
+## 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`
+
+## Naming
+
+Convert the JavaScript variable name to kebab-case:
+
+| 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` |
+
+Rules:
+- Strip leading `img` prefix before converting to kebab-case
+- Numbers stay as-is: `item11` → `item-11`
+- Acronyms lowercased: `BTN` → `btn`, `BG` → `bg`
+
+## Destination
+
+```
+public/images/{feature}/    ← Vue/Nuxt
+static/images/{feature}/    ← Nuxt 2 legacy
+public/{feature}/           ← Next.js (under /public)
+```
+
+Always use the directory confirmed in Phase 0 setup.
+
+## Size Limits
+
+| 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 |
+
+If a file exceeds the warn threshold, log it. Never block the download — size checks are advisory.
+
+## Download Rules
+
+- [ ] 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 (visible in screenshot but no URL): use `get_metadata` → sub-node `get_design_context` → `get_screenshot` fallback chain
+
+## Image Mapping Table
+
+After all downloads, produce a mapping before writing any component code:
+
+```js
+const imageMap = {
+  imgTitle: '/images/{feature}/title.webp',
+  img21:    '/images/{feature}/img-21.webp',
+  // ...every variable
+}
+```
+
+This map is the only source for `src` values in generated components. No raw Figma URLs in output code.

package/skills/vibe-figma-frame/rubrics/frame-selection.md

@@ -0,0 +1,55 @@
+# 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/rubrics/pipeline-stages.md

@@ -0,0 +1,96 @@
+# 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/rubrics/naming-conventions.md

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