@su-record/vibe 2.8.19 → 2.8.21

package/skills/vibe-figma-codegen/SKILL.md

@@ -1,196 +1,10 @@
 ---
 name: vibe-figma-codegen
-description: Code generation — markup quality, stack rules, responsive, verification
+description: "[Merged] → vibe-figma-convert 참조"
 triggers: []
 tier: standard
 ---
 
-# Skill: vibe-figma-codegen — 코드 생성 규칙
+# vibe-figma-codegen
 
-마크업 품질, 스택별 코드 생성, 반응형, 검증.
-이미지 패턴은 **vibe-figma-rules R-4** + **vibe-figma-frame B-3.4** 참조.
-
----
-
-## C-1. Semantic HTML (필수)
-
-모든 요소는 가장 구체적인 semantic 태그를 사용. `<div>`는 최후 수단.
-
-| 시각 요소 | 올바른 태그 | 잘못된 태그 |
-|----------|-----------|-----------|
-| 페이지 섹션 | `<section>`, `<article>`, `<aside>` | `<div>` |
-| 네비게이션 | `<nav>` | `<div class="nav">` |
-| 헤더/푸터 | `<header>`, `<footer>` | `<div class="header">` |
-| 제목 계층 | `<h1>`→`<h6>` (순차, 건너뛰기 금지) | `<div class="title">` |
-| 텍스트 | `<p>` | `<div>` or `<span>` |
-| 리스트 | `<ul>`/`<ol>` + `<li>` | `<div>` 반복 |
-| 액션 버튼 | `<button>` | `<div onClick>` |
-| 링크 | `<a href>` | `<span onClick>` |
-| 폼 필드 | `<input>` + `<label>` | `<div contenteditable>` |
-| 이미지 | `<img alt="설명">` | content 이미지에 `background-image` |
-| 시간 | `<time datetime>` | `<span>` |
-
-## C-2. Accessibility Checklist
-
-```
-- [ ] 모든 인터랙티브 요소 키보드 접근 가능
-- [ ] <button> = 액션, <a> = 네비게이션 (역할 혼용 금지)
-- [ ] <img> alt 설명적 (장식은 alt="" + aria-hidden)
-- [ ] <input> ↔ <label> 연결
-- [ ] 색상 대비 >= 4.5:1 (텍스트), >= 3:1 (큰 텍스트, UI 컨트롤)
-- [ ] 포커스 인디케이터 표시
-- [ ] 아이콘 전용 버튼에 aria-label
-- [ ] 제목 계층 순차적
-```
-
-## C-3. 래퍼 제거 + 컴포넌트 통합
-
-래퍼 제거 및 80% Rule은 **vibe-figma-rules R-5** 참조.
-
-### 컴포넌트 구조 제한
-
-```
-Max nesting depth: 3 levels
-Max component length: 50 lines
-Max props: 5 per component
-```
-
-### 분리 트리거
-
-| 신호 | 조치 |
-|------|------|
-| 컴포넌트 > 50줄 | 서브 컴포넌트로 분리 |
-| 시각 패턴 2회+ 반복 | 공유 컴포넌트 추출 |
-| 유사도 80%+ | 단일 컴포넌트 + variant prop (R-5) |
-| 명확한 시각 경계 (카드, 모달, 폼) | 자체 컴포넌트 + 스타일 파일 |
-
-## C-4. 스토리보드 스펙 + Design Context 적용
-
-```
-storyboardSpec → 코드:
-  interactions → CSS :hover/:active/:focus + JS 핸들러
-  animations → transition, @keyframes (타이밍/이징 스펙대로)
-  states → 조건부 렌더링 + 상태별 UI
-  colorGuide / typographyGuide → 토큰 검증
-
-design-context.json → 코드:
-  accessibility = "AAA" → aria-describedby, prefers-reduced-motion
-  devices = ["mobile"] → 모바일 전용, touch target >= 44px
-  aesthetic.style = "minimal" → 적은 그림자, 얇은 보더
-  aesthetic.style = "bold" → 강한 그림자, 두꺼운 보더
-  brand.personality → 브랜드 고유 패턴 보존
-```
-
-## C-5. 스택별 코드 생성 규칙
-
-### React / Next.js + TypeScript
-
-```
-- 함수형 컴포넌트, 명시적 return type
-- Props interface 정의, named exports
-- <></> Fragment
-- CSS Modules 또는 Tailwind
-- Next.js: 'use client' 필요 시만, Image/Link 컴포넌트 사용
-```
-
-### Vue 3 / Nuxt
-
-```
-- <script setup lang="ts"> composition API
-- defineProps + TypeScript interface
-- <template>로 invisible 그룹핑
-- <style scoped> or <style module>
-- <Teleport> for 모달/오버레이
-- Nuxt: <NuxtLink>, <NuxtImg> 사용
-```
-
-### Svelte
-
-```
-- <script lang="ts">
-- export let + 타입
-- {#if}/{#each}/{#await} 블록
-- <slot>, transition: directive
-```
-
-### SCSS (공통)
-
-```
-- @use 'figma-tokens' as figma — 네임스페이스 import
-- @include figma.figma-pc { } — @media 직접 사용 금지
-- figma-fluid($mobile, $desktop) — 수동 clamp() 금지
-- Nesting max 3 levels
-- & for BEM-like modifiers
-```
-
-## C-6. 반응형 코드 생성
-
-### 원칙: Fluid First, Breakpoint Second
-
-```
-1. Typography & Spacing → clamp() fluid 토큰 (브레이크포인트 불필요)
-2. 레이아웃 방향 변경 → @media at breakpoint
-3. 가시성 토글 → @media display toggle
-4. 컴포넌트 교체 → 조건부 렌더링 또는 CSS
-```
-
-### Anti-Patterns (금지)
-
-| 잘못됨 | 올바름 |
-|--------|--------|
-| 모바일/데스크탑 별도 컴포넌트 파일 | 단일 컴포넌트 + 반응형 CSS |
-| font-size에 @media | clamp() fluid 토큰 |
-| 하드코딩 `@media (min-width: 768px)` | 프로젝트 브레이크포인트 사용 |
-| px 값 직접 사용 | 토큰 변수 사용 |
-| window.innerWidth JS 체크 | CSS-only 반응형 |
-
-## C-7. Correction Notes
-
-코드 생성 후 출력:
-
-```markdown
-### Generation Mode
-- Mode: default / --new / responsive
-- Output directory: {path}
-
-### Files Generated
-| File | Type | Description |
-
-### Responsive Summary (responsive mode only)
-| Token | Mobile | Desktop | Strategy |
-
-### Markup Quality
-- Semantic tags: {list}
-- Accessibility: {pass/fail}
-```
-
-## C-8. Refine Mode (`--refine`)
-
-이전 생성 코드의 완성도가 부족할 때 사용. **새로 만들지 않고 기존 코드를 수정만.**
-
-```
-1. URL 재입력 (또는 "이전과 동일")
-2. 기존 코드 스캔 (pages/, components/ 내 피처 폴더)
-3. Figma 원본 재추출 (get_design_context + get_screenshot)
-4. Side-by-side 비교 → Diff 기반 최소 수정
-5. 검증 루프 (vibe-figma-rules R-6, P1=0 될 때까지)
-```
-
-### Refine 수정 범위
-
-| 수정함 | 수정 안 함 |
-|--------|-----------|
-| 누락 에셋, 레이아웃/타이포/색상 불일치 | 파일 구조 변경 |
-| 누락 컴포넌트, 인터랙션 누락 | 컴포넌트 분리/통합 |
-| 반응형 누락, 이미지 경로 | 토큰 파일 재생성 |
-
-## Important
-
-```
-- Never guess colors — 추출 값만 사용
-- Never invent spacing — 토큰 스케일에 매핑
-- Never hardcode values — 토큰 변수 참조
-- Image is truth — 레이어 구조 혼란 시 이미지 우선
-- No console.log, No div soup
-- Component 50줄 초과 시 분리
-```
+이 스킬은 **vibe-figma-convert**으로 병합되었습니다.

package/skills/vibe-figma-consolidate/SKILL.md

@@ -1,100 +1,10 @@
 ---
 name: vibe-figma-consolidate
-description: Step D — 모바일/PC 스타일 공통화, 컴포넌트 통합, 최종 검증, 후처리 파이프라인
+description: "[Merged] → vibe-figma (Phase 4: Verification) 참조"
 triggers: []
 tier: standard
 ---
 
-# Skill: vibe-figma-consolidate — Step D: 공통화 + 최종 검증
+# vibe-figma-consolidate
 
-> **실행 지시: Edit 도구로 기존 파일을 실제 수정한다.**
-
-## D-1. 스타일 공통화
-
-```
-1. 모바일/PC에서 동일한 값 → 공통 토큰으로 추출
-2. 중복 CSS/SCSS 규칙 통합
-3. 컴포넌트 내 중복 로직 제거
-```
-
-| 유형 | 처리 방법 |
-|------|----------|
-| 색상 (동일) | 공통 CSS custom property |
-| 타이포 (동일 scale) | 공통 토큰 유지 |
-| 간격 (다름) | clamp() fluid 토큰 (계산: vibe-figma-rules R-3) |
-| 레이아웃 방향 (다름) | @media 분기 유지 |
-| 컴포넌트 구조 (동일) | 하나로 통합 |
-
-## D-2. 컴포넌트 통합
-
-80% Rule 및 variant 통합 기준은 **vibe-figma-rules R-5** 참조.
-
-```
-1. 유사 컴포넌트 (80%+) → variant prop 통합
-2. 중복 sub-component → 공유 컴포넌트 추출
-3. 불필요한 래퍼 → Fragment/template 제거
-```
-
-## D-3. 최종 검증
-
-검증 공통 프로세스는 **vibe-figma-rules R-6** 참조.
-
-### Step D 추가 검증
-
-```
-양쪽 뷰포트 동시 검증:
-  - 모바일 Figma vs 코드 (mobile viewport)
-  - PC Figma vs 코드 (desktop viewport)
-  - 양쪽 모두 P1=0, Match Score 95%+
-  - 이미지 에셋 전부 정상 표시
-  - 공통 토큰으로 중복 제거 완료
-```
-
-### Model Routing (Step D)
-
-| 작업 | 모델 |
-|------|------|
-| 공통화 리팩토링 + 최종 검증 | **Sonnet** |
-| Post — 코드 리뷰 | **gpt-5.3-codex** (Codex 미설치 시 스킵) |
-
-## D-4. Design Quality Pipeline (후처리)
-
-Step D 완료 후 사용자에게 다음 단계를 제시.
-
-### Pre-requisite check
-
-`.claude/vibe/design-context.json`이 없으면:
-```
-디자인 컨텍스트가 없습니다. /design-teach 를 먼저 실행하면
-브랜드, 접근성, 타겟 디바이스에 맞춘 더 정확한 코드를 생성할 수 있습니다.
-```
-
-### Quick (기본 추천)
-
-```
-/design-normalize → /design-audit
-```
-- Normalize: 하드코딩 값 → MASTER.md 토큰으로 치환
-- Audit: A11Y + 성능 + 반응형 + AI Slop 검출
-
-### Thorough (프로덕션 추천)
-
-```
-/design-normalize → /design-audit → /design-critique → /design-polish
-```
-- + Critique: Nielsen 10 휴리스틱 + 페르소나 분석
-- + Polish: 인터랙션 상태 보완 (hover/focus/loading/error)
-
-### 출력 포맷
-
-```markdown
-## Design Quality Pipeline
-
-생성된 파일: {file list}
-
-추천 다음 단계:
-  1. /design-normalize  — 토큰 정렬
-  2. /design-audit      — 기술 품질 검사
-  3. /design-critique    — UX 휴리스틱 리뷰
-  4. /design-polish      — 최종 인터랙션 보완
-```
+이 스킬은 **vibe-figma** (Phase 4: Verification)으로 병합되었습니다.

package/skills/vibe-figma-convert/SKILL.md

@@ -0,0 +1,284 @@
+---
+name: vibe-figma-convert
+description: 참조 코드(React+Tailwind) → 프로젝트 코드 + 외부 스타일 파일
+triggers: []
+tier: standard
+---
+
+# vibe-figma-convert — 코드 변환
+
+`get_design_context` 참조 코드를 프로젝트 스택 코드 + 외부 SCSS 파일로 변환.
+
+---
+
+## 1. 외부 스타일 파일 생성
+
+### 변환 예시
+
+```
+참조 코드 (React+Tailwind):
+  <div className="h-[1280px] relative w-[720px]">                    ← 섹션 컨테이너
+    <div className="absolute h-[1280px] overflow-clip w-[720px]">    ← BG 레이어
+      <img src={img21} className="absolute inset-0 object-cover size-full" />
+    </div>
+    <div className="absolute flex flex-col items-center top-[130px]"> ← Content
+      <div className="h-[174px] w-[620px]">                          ← Title 이미지
+        <img src={imgTitle} className="absolute inset-0 object-cover size-full" />
+      </div>
+      <p className="text-[24px] text-white leading-[1.4] text-center"> ← 텍스트
+        참여 대상 : PC 유저 (Steam, Kakao)
+      </p>
+    </div>
+  </div>
+```
+
+```
+변환 → styles/{feature}/layout/_hero.scss:
+
+@use '../tokens' as t;
+
+.heroSection {
+  position: relative;
+  height: 960px;              // 1280 × 0.75
+  width: 100%;
+  overflow: clip;
+}
+
+.heroBg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  img { width: 100%; height: 100%; object-fit: cover; }
+}
+
+.heroContent {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 98px;          // 130 × 0.75
+}
+```
+
+```
+변환 → styles/{feature}/components/_hero.scss:
+
+@use '../tokens' as t;
+
+.heroTitle {
+  width: 465px;               // 620 × 0.75
+  height: 131px;              // 174 × 0.75
+  img { width: 100%; height: 100%; object-fit: cover; }
+}
+
+.heroParticipation {
+  font-size: t.$text-sub;     // 24px × 0.75 = 18px
+  color: t.$color-white;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+}
+```
+
+### layout vs components 구분
+
+```
+layout/  → position, display, flex/grid, width, height, padding, margin,
+           gap, overflow, z-index, background-image, inset
+components/ → font-size, font-weight, color, line-height, letter-spacing,
+              text-align, border, border-radius, box-shadow, opacity
+```
+
+### _tokens.scss 업데이트
+
+```
+섹션을 처리할 때마다 새로운 고유값을 토큰에 추가:
+
+// Colors
+$color-white: #FFFFFF;
+$color-bg-dark: #0A1628;
+$color-heading: #1B3A1D;
+$color-text-body: #333333;
+$color-period-label: #003879;
+$color-grayscale-950: #171716;
+
+// Typography (Figma px × scaleFactor)
+$text-hero: 36px;            // 48 × 0.75
+$text-sub: 18px;             // 24 × 0.75
+$text-body: 16px;            // 21 × 0.75
+$text-period: 21px;          // 28 × 0.75
+
+// Font families
+$font-pretendard: 'Pretendard', sans-serif;
+$font-roboto-condensed: 'Roboto Condensed', sans-serif;
+
+// Spacing
+$space-section: 98px;        // 130 × 0.75
+$space-content: 18px;        // 24 × 0.75
+
+// Breakpoints
+$bp-pc: 1024px;
+```
+
+---
+
+## 2. 컴포넌트 파일 변환
+
+### Vue / Nuxt
+
+```vue
+<template>
+  <section class="heroSection">
+    <!-- BG Layer -->
+    <div class="heroBg">
+      <img src="/images/{feature}/bg.webp" alt="" aria-hidden="true" />
+    </div>
+
+    <!-- Content Layer -->
+    <div class="heroContent">
+      <div class="heroTitle">
+        <img src="/images/{feature}/title.webp" alt="추운 겨울, 따뜻한 보상이 펑펑" />
+      </div>
+      <div class="heroSubTitle">
+        <img src="/images/{feature}/sub-title.webp" alt="겨울을 녹일 보상, 지금 PC방에서 획득하세요!" />
+      </div>
+
+      <!-- Period Info (참조 코드 data-name="Period") -->
+      <div class="heroPeriod">
+        <p class="heroPeriodTarget">참여 대상 : PC 유저 (Steam, Kakao)</p>
+        <div class="heroPeriodDetails">
+          <div class="heroPeriodItem">
+            <p class="heroPeriodLabel">이벤트 기간</p>
+            <p class="heroPeriodValue">{{ eventPeriod }}</p>
+          </div>
+          <div class="heroPeriodItem">
+            <p class="heroPeriodLabel">교환/응모 종료일</p>
+            <p class="heroPeriodValue">{{ exchangeDeadline }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Share Button (참조 코드 data-name="BTN_Share") -->
+    <button class="heroShareBtn" @click="handleShare">
+      <img src="/images/{feature}/share.webp" alt="공유하기" />
+    </button>
+  </section>
+</template>
+
+<script setup lang="ts">
+/**
+ * Hero 섹션 — 키비주얼 + 이벤트 기간 정보
+ *
+ * [인터랙션] 공유 버튼 클릭 → 공유하기 팝업
+ * [상태] 로그인 전/후
+ */
+
+defineProps<{
+  eventPeriod: string
+  exchangeDeadline: string
+}>()
+
+const emit = defineEmits<{
+  share: []
+}>()
+
+function handleShare(): void {
+  emit('share')
+}
+</script>
+<!-- 스타일: styles/{feature}/layout/_hero.scss + components/_hero.scss -->
+```
+
+### JSX 변환 규칙 (React+Tailwind → Vue/Nuxt)
+
+| React JSX | Vue SFC |
+|-----------|---------|
+| `className="..."` | `class="..."` |
+| `{condition && <X/>}` | `<X v-if="condition" />` |
+| `{items.map(i => <X key={i.id}/>)}` | `<X v-for="i in items" :key="i.id" />` |
+| `onClick={handler}` | `@click="handler"` |
+| `src={변수}` | `src="/images/{feature}/파일.webp"` (imageMap으로 교체) |
+| `style={{ maskImage: ... }}` | `:style="{ maskImage: ... }"` |
+| `<img alt="" />` (장식) | `<img alt="" aria-hidden="true" />` |
+
+### JSX 변환 규칙 (React+Tailwind → React/Next.js)
+
+| React+Tailwind | React/Next.js + SCSS |
+|----------------|---------------------|
+| `className="text-[48px] font-black"` | `className={styles.heroTitle}` |
+| `<img src={변수}` | `<Image src="/images/{feature}/파일.webp"` |
+| Tailwind 클래스 | CSS Module 또는 외부 SCSS 클래스 |
+
+---
+
+## 3. 이미지 배치 패턴
+
+### 배경 이미지 (참조 코드에서 absolute + inset-0 + object-cover)
+
+```
+참조 코드에 이 패턴이 있으면 → 배경 이미지:
+  <div className="absolute ...">
+    <img src={imgXxx} className="absolute inset-0 object-cover size-full" />
+  </div>
+
+→ Multi-Layer 변환:
+  .{section}Bg → position: absolute; inset: 0; z-index: 0;
+  .{section}Content → position: relative; z-index: 10;
+```
+
+### 콘텐츠 이미지 (참조 코드에서 독립적 img)
+
+```
+→ <img src="/images/{feature}/파일.webp" alt="설명" width={스케일적용} height={스케일적용} />
+```
+
+### 장식 이미지 (참조 코드에서 mix-blend, opacity, blur)
+
+```
+→ <img ... alt="" aria-hidden="true" /> (접근성: 장식은 비표시)
+→ CSS: mix-blend-mode, opacity, filter: blur() 등 참조 코드 값 그대로
+```
+
+---
+
+## 4. 반응형 추가 (데스크탑 URL)
+
+```
+같은 섹션에 대해 데스크탑 참조 코드 추출 후:
+
+같은 값 → 유지
+다른 px 값:
+  @include pc {
+    .heroSection { height: 1440px; }  // 데스크탑 스케일
+  }
+  또는 clamp(모바일, calc, 데스크탑) 사용
+
+다른 배경 이미지:
+  .heroBg img { content: url('/images/{feature}/hero-mobile.webp'); }
+  @include pc {
+    .heroBg img { content: url('/images/{feature}/hero-pc.webp'); }
+  }
+
+다른 레이아웃:
+  .heroContent { flex-direction: column; }
+  @include pc { .heroContent { flex-direction: row; } }
+
+기존 모바일 코드 삭제 금지. @media 또는 mixin으로 추가만.
+```
+
+---
+
+## 5. Semantic HTML 최소 규칙
+
+```
+- 섹션 래퍼: <section>
+- 제목: <h1>~<h6> (순차, 건너뛰기 금지)
+- 텍스트: <p>
+- 버튼: <button> (@click 있으면)
+- 링크: <a> (href 있으면)
+- 리스트: <ul>/<ol> + <li> (반복 패턴)
+- 장식 이미지: alt="" + aria-hidden="true"
+- 콘텐츠 이미지: alt="설명적 텍스트"
+```