@su-record/vibe 2.8.20 → 2.8.21

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

@@ -1,344 +1,10 @@
 ---
 name: vibe-figma-analyze
-tier: standard
-description: "스토리보드 세밀 분석 → 실제 레이아웃 코드 + 기능 주석 + 컴포넌트 구조 생성. Step A에서 vibe-figma 이후 실행."
+description: "[Merged] → vibe-figma (Phase 1: Storyboard) 참조"
 triggers: []
+tier: standard
 ---
 
-# Storyboard Deep Analysis & Layout Generation
-
-스토리보드 URL 하나로 **실제 동작하는 레이아웃 코드**를 생성.
-빈 shell이 아니라, 스토리보드에서 파악 가능한 모든 정보를 코드에 반영.
-
-> **실행 지시: 이 스킬은 분석만 하는 게 아님. 반드시 Write 도구로 파일을 생성해야 함.**
-> A-1~A-4에서 분석 → A-5에서 **Write 도구로 실제 파일 생성** → A-6에서 인터랙션 테이블 출력.
-
-## 입력
-
-- 스토리보드 URL의 get_metadata 결과 (전체 프레임 목록)
-- storyboardSpec (브레이크포인트 등, vibe-figma에서 추출)
-
-## A-1. 프레임 전수 조사
-
-get_metadata에서 얻은 **모든 최상위 프레임**을 분류:
-
-```
-SKIP    — "개요", "Cover", "변경 이력" (문서 관리용)
-SPEC    — "기능 정의", "정책" → 기능 스펙 텍스트 추출 대상
-CONFIG  — "해상도", "Media Query", "브라우저" → 설정값 추출
-SHARED  — "공통", "GNB", "Footer", "Popup", "Dialog" → 공통 컴포넌트
-FLOW    — "Event Flow", "플로우" → 유저 플로우 파악
-ASSET   — "OG", "배너", "어셋" → 스킵 (메타 이미지)
-PAGE    — "메인", "화면설계" 하위 → 핵심 섹션 (코드 생성 대상)
-
-서브 프레임 (3.x.1, 3.x.2 등):
-  → 해당 PAGE 섹션의 상태 변형 / 인터랙션 결과 화면
-```
-
-## A-2. SPEC 프레임 세밀 분석
-
-**기능 정의서 프레임**에 대해 get_design_context 호출:
-
-```
-추출 대상:
-  - Overview: 개요, 대상, 일정
-  - Spec: 각 섹션별 기능 정의 (로직, 조건, 보상 구조)
-  - 일정: 시작/종료 시간, 단계별 기간
-
-추출한 텍스트를 섹션별로 분리:
-  {
-    "overview": "...",
-    "sections": {
-      "hero": "키 비주얼 영역, CTA 버튼...",
-      "featureA": "섹션 A 기능 설명...",
-      "featureB": "섹션 B 기능 설명..."
-    }
-  }
-
-→ A-5에서 각 컴포넌트의 기능 주석이 됨
-```
-
-## A-3. SHARED 프레임 분석
-
-공통 요소 프레임들의 get_screenshot으로 구조 파악:
-
-```
-GNB: 네비게이션 구조, 메뉴 항목, 로그인 버튼
-Footer: 링크, 법적 고지
-Popup: 패턴 분류 (확인/취소, 상세 모달, 알림, 입력 폼)
-
-→ 프로젝트에 이미 있는 컴포넌트 확인 (Glob으로 탐색)
-→ 있으면 import 재사용, 없으면 새로 생성
-```
-
-## A-4. PAGE 프레임 세밀 분석
-
-> **모든 PAGE 프레임을 빠짐없이 분석한다. 일부만 처리하고 넘어가면 안 됨.**
-> A-1에서 PAGE로 분류된 프레임 수 = A-5에서 생성하는 섹션 컴포넌트 수.
-
-**각 PAGE 프레임**에 대해 get_screenshot + get_design_context:
-
-```
-각 프레임에서 추출:
-
-1. 레이아웃 구조 (get_screenshot 비주얼 분석):
-   - 섹션 경계 (배경 변화 지점)
-   - 요소 배치 방향 (vertical stack / grid / positioned)
-   - 이미지 배경 영역 vs 콘텐츠 영역
-
-2. 인터랙션 스펙 (우측 주석):
-   - 번호 태그 (①②③) → 인터랙션 ID
-   - 동작 설명 → 이벤트 타입 + 결과
-   - 조건 분기 (로그인 여부, 기간 내/외 등)
-
-3. 상태 변형 (서브 프레임):
-   - 기본 → 클릭 후 → 성공 → 에러 등
-   - 팝업 트리거 조건
-
-결과를 섹션별로 저장:
-  sections[sectionName] = {
-    layout: "vertical-stack, bg-image + overlay + content",
-    children: ["Title", "Description", "Grid", "CTAButton"],
-    interactions: [
-      { id: "①", trigger: "클릭", action: "처리", result: "결과 표시" }
-    ],
-    states: ["default", "active", "completed"],
-    popups: ["ConfirmDialog"]
-  }
-```
-
-## A-5. 파일 생성 (Write 도구 사용 — 필수)
-
-> **Write 도구로 아래 파일들을 실제로 생성한다. 코드를 보여주기만 하면 안 됨.**
-
-디렉토리는 **vibe-figma-rules R-2.2** 감지 결과에 따라 결정.
-
-### 생성할 파일 목록
-
-```
-필수 생성 (Write 도구):
-  1. pages/{feature-name}.{vue|tsx}              ← 루트 페이지
-  2. components/{feature-name}/각섹션.{vue|tsx}   ← 섹션별 컴포넌트
-  3. components/{feature-name}/popups/각팝업      ← 팝업 컴포넌트
-  4. styles/{feature-name}/index.scss            ← 스타일 진입점 (빈 import 목록)
-  5. styles/{feature-name}/_tokens.scss          ← 빈 토큰 파일 (Step B에서 채움)
-```
-
-### 루트 페이지 구조
-
-```
-- 모든 섹션 컴포넌트 import
-- 팝업 조건부 렌더링 (v-if/&&)
-- 개요 JSDoc 주석 (A-2에서 추출한 overview)
-```
-
-### HARD RULE: 빈 template 금지
-
-```
-브라우저에서 열었을 때 화면에 텍스트가 보여야 한다.
-빈 컴포넌트 shell은 Step A 미완성.
-
-<template> 안에 반드시:
-  - 스토리보드에서 추출한 실제 텍스트 (제목, 설명, 버튼 라벨)
-  - 목 데이터가 렌더링되는 리스트 (v-for / .map)
-  - 클릭 가능한 버튼/링크
-  - 조건부 렌더링 (v-if / &&)
-```
-
-### 섹션 컴포넌트 — 실제 코드 예시 (Vue)
-
-```vue
-<template>
-  <section class="dailyCheckInSection">
-    <h2 class="dailyCheckInSection__title">일일 출석 미션</h2>
-    <p class="dailyCheckInSection__description">매일 출석하고 스노우 토큰을 받으세요!</p>
-
-    <div class="dailyCheckInSection__calendar">
-      <div
-        v-for="day in checkInDays"
-        :key="day.date"
-        class="dailyCheckInSection__day"
-        :class="{ 'is-checked': day.checked, 'is-today': day.isToday }"
-        @click="handleCheckIn(day)"
-      >
-        <span class="dailyCheckInSection__dayLabel">{{ day.date }}</span>
-        <span class="dailyCheckInSection__dayReward">{{ day.reward }} 토큰</span>
-      </div>
-    </div>
-
-    <div class="dailyCheckInSection__milestones">
-      <div
-        v-for="milestone in milestones"
-        :key="milestone.days"
-        class="dailyCheckInSection__milestone"
-        :class="{ 'is-claimable': milestone.claimable, 'is-claimed': milestone.claimed }"
-        @click="handleClaimReward(milestone)"
-      >
-        <span>{{ milestone.days }}일 달성</span>
-        <span>{{ milestone.reward }}</span>
-        <button v-if="milestone.claimable && !milestone.claimed">받기</button>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-/**
- * 일일 출석 미션 섹션
- *
- * [기능 정의]
- * - 매일 출석 시 스노우 토큰 즉시 지급
- * - 누적 3/5/7일 달성 시 추가 보상
- *
- * [인터랙션]
- * ① 출석하기 클릭 → 출석 처리 → 토큰 지급 표시
- * ② 누적 보상 클릭 → 보상 수령
- *
- * [상태] default, checked, reward-claimed
- */
-
-interface CheckInDay {
-  date: string
-  checked: boolean
-  isToday: boolean
-  reward: number
-}
-
-interface Milestone {
-  days: number
-  claimable: boolean
-  claimed: boolean
-  reward: string
-}
-
-// 목 데이터 — 빈 배열 금지!
-const checkInDays = ref<CheckInDay[]>([
-  { date: 'Day 1', checked: true, isToday: false, reward: 10 },
-  { date: 'Day 2', checked: true, isToday: false, reward: 10 },
-  { date: 'Day 3', checked: false, isToday: true, reward: 10 },
-  { date: 'Day 4', checked: false, isToday: false, reward: 10 },
-  { date: 'Day 5', checked: false, isToday: false, reward: 10 },
-  { date: 'Day 6', checked: false, isToday: false, reward: 15 },
-  { date: 'Day 7', checked: false, isToday: false, reward: 20 },
-])
-
-const milestones = ref<Milestone[]>([
-  { days: 3, claimable: false, claimed: false, reward: '보상 상자 1개' },
-  { days: 5, claimable: false, claimed: false, reward: '보상 상자 2개' },
-  { days: 7, claimable: false, claimed: false, reward: '스페셜 보상' },
-])
-
-function handleCheckIn(day: CheckInDay): void {
-  // TODO: 출석 API 호출
-}
-
-function handleClaimReward(milestone: Milestone): void {
-  // TODO: 누적 보상 수령 API 호출
-}
-</script>
-<!-- 스타일은 외부 파일: styles/{feature}/components/_daily-checkin.scss -->
-```
-
-### 필수 포함 사항 체크리스트
-
-```
-<template> 안에:
-  □ 섹션 제목 <h2> (스토리보드에서 추출한 실제 텍스트)
-  □ 설명 텍스트 <p> (스토리보드에서 추출)
-  □ 리스트 렌더링 (v-for + 목 데이터, 빈 배열 금지)
-  □ 버튼/CTA (실제 라벨 텍스트 + @click 핸들러)
-  □ 조건부 렌더링 (상태에 따른 v-if)
-  □ 클래스명 (Step B에서 외부 스타일과 매칭)
-
-<script> 안에:
-  □ JSDoc: [기능 정의] + [인터랙션] + [상태]
-  □ TypeScript interface
-  □ 목 데이터 (기능 정의서에서 추출, 3~7개 아이템)
-  □ 이벤트 핸들러 함수 (body는 // TODO:)
-```
-
-### 스타일 분리 규칙
-
-```
-컴포넌트 파일에 <style> 블록을 작성하지 않는다.
-스타일은 Step B에서 외부 파일로 생성.
-컴포넌트는 <template> + <script setup> 만 포함.
-```
-
-### Step A 완료 기준
-
-```
-브라우저에서 열었을 때:
-  ✅ 각 섹션의 제목/설명 텍스트가 화면에 보인다
-  ✅ 리스트 아이템이 렌더링된다 (목 데이터)
-  ✅ 버튼을 클릭하면 핸들러가 실행된다
-  ✅ 탭/아코디언/모달이 동작한다
-  ❌ 스타일은 없다 (Step B에서)
-  ❌ 이미지는 없다 (Step B에서)
-
-빈 화면 = Step A 미완성. 다음 단계로 넘어가지 않는다.
-```
-
-## A-6. 인터랙션 매핑 테이블
-
-코드 생성 후, 전체 인터랙션을 테이블로 출력:
-
-```markdown
-| 섹션 | ID | 트리거 | 동작 | 컴포넌트 | 함수 |
-|------|-----|--------|------|---------|------|
-| Hero | ① | 클릭 | 공유하기 팝업 | HeroSection | handleShare() |
-| 섹션A | ① | 클릭 | API 호출 | FeatureASection | handleAction() |
-
-→ Step B/C에서 이 함수들의 body를 구현
-```
-
-## A-7. Step A 검증
-
-> **아래 검증을 도구로 실제 실행해야 함.**
-
-### 검증 항목
-
-```
-0. 빈 화면 검사 (가장 중요 — 먼저 실행):
-   각 컴포넌트 파일을 Read로 열어서 <template> 안에 확인:
-     □ <h2> 또는 <h3> 섹션 제목 텍스트 존재
-     □ <p> 설명 텍스트 존재
-     □ v-for 또는 .map 렌더링 존재 (리스트 있는 섹션)
-     □ @click 또는 onClick 이벤트 존재 (인터랙션 있는 섹션)
-   <template> 안에 실제 HTML 태그가 없으면 → 빈 컴포넌트 → 재작성
-   Grep: "<template>" 다음 줄이 "</template>"이면 → 빈 template
-
-1. 파일 존재 확인 (Glob 도구):
-   □ 루트 페이지 파일 존재
-   □ PAGE 프레임 수 = 컴포넌트 파일 수
-   □ styles 디렉토리 존재
-
-2. 목 데이터 확인 (Grep 도구):
-   □ 빈 배열 (ref([]) 패턴) 검색 → 0건
-   → 발견 시 목 데이터 채움
-
-3. 스타일 분리 확인 (Grep 도구):
-   □ 컴포넌트 내 <style> 블록 0건
-
-4. 빌드 확인 (Bash 도구):
-   □ npm run build 성공
-
-5. 브라우저 확인:
-   □ dev 서버 열어서 실제 화면 확인
-   □ 각 섹션에 텍스트가 보이는지
-   □ 빈 화면이면 → 해당 컴포넌트 재작성
-```
-
-### 완료 조건
-
-```
-✅ 빈 template 0개 — 모든 컴포넌트에 실제 HTML 마크업 존재
-✅ 브라우저에서 텍스트/리스트/버튼이 보인다
-✅ 파일 수 = PAGE 프레임 수
-✅ 빈 배열 0개
-✅ <style> 블록 0개
-✅ 빌드 성공
+# vibe-figma-analyze
 
-빈 화면 = Step A 미완성. Step B로 넘어가지 않는다.
-→ Step B 진행 가능
-```
+이 스킬은 **vibe-figma** (Phase 1: Storyboard)으로 병합되었습니다.

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)으로 병합되었습니다.