@su-record/vibe 2.8.20 → 2.8.21

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="설명적 텍스트"
+```

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

@@ -0,0 +1,150 @@
+---
+name: vibe-figma-extract
+description: Figma MCP에서 이미지 다운로드 + CSS 값 추출
+triggers: []
+tier: standard
+---
+
+# vibe-figma-extract — 데이터 추출
+
+`get_design_context` 응답에서 이미지와 CSS 값을 추출하는 절차.
+
+---
+
+## 1. 이미지 에셋 추출 + 다운로드
+
+### URL 추출
+
+```
+참조 코드에서 모든 에셋 URL을 수집:
+  패턴: const {변수명} = "https://www.figma.com/api/mcp/asset/{uuid}"
+
+예:
+  const img21 = "https://www.figma.com/api/mcp/asset/76e951df-..."
+  const imgTitle = "https://www.figma.com/api/mcp/asset/f97dad41-..."
+  const imgSnowParticle12 = "https://www.figma.com/api/mcp/asset/3de2eeed-..."
+```
+
+### 파일명 결정
+
+```
+변수명 → kebab-case 파일명:
+  img21 → img-21.webp
+  imgTitle → title.webp
+  imgSnowParticle12 → snow-particle-12.webp
+  imgSnowmanItem11 → snowman-item-11.webp
+  imgImgBannerStatic → banner-static.webp
+```
+
+### 다운로드
+
+```
+for each (변수명, url) in assets:
+  Bash: curl -sL "{url}" -o public/images/{feature}/{파일명}.webp
+
+다운로드 후 검증:
+  Bash: ls -la public/images/{feature}/
+  → 모든 파일 존재 + 0byte 아닌지 확인
+  → 실패한 파일 → 재시도 1회
+```
+
+### 누락 에셋 처리
+
+```
+스크린샷에 보이는 이미지가 참조 코드에 에셋 URL로 없을 때:
+
+1. get_metadata(섹션 nodeId)로 하위 노드 목록 확보
+2. 이미지로 의심되는 하위 nodeId에 get_design_context 재호출
+   → 에셋 URL 발견 시 다운로드
+3. 그래도 없으면 → get_screenshot(해당 nodeId)으로 이미지 직접 저장
+```
+
+### 이미지 매핑 테이블
+
+```
+다운로드 완료 후 매핑 생성:
+
+  imageMap = {
+    img21: '/images/{feature}/img-21.webp',
+    imgTitle: '/images/{feature}/title.webp',
+    imgSnowParticle12: '/images/{feature}/snow-particle-12.webp',
+    ...
+  }
+
+이 매핑은 코드 변환 시 src={변수명}을 로컬 경로로 교체하는 데 사용.
+```
+
+---
+
+## 2. CSS 값 추출
+
+### Tailwind → CSS 변환표
+
+참조 코드의 Tailwind 클래스에서 CSS 속성 + 값을 추출:
+
+| Tailwind | CSS | 스케일 적용 |
+|----------|-----|-----------|
+| `text-[48px]` | `font-size: 48px` | ✅ × scaleFactor |
+| `text-[#1B3A1D]` | `color: #1B3A1D` | ❌ |
+| `font-black` | `font-weight: 900` | ❌ |
+| `font-bold` | `font-weight: 700` | ❌ |
+| `font-semibold` | `font-weight: 600` | ❌ |
+| `font-medium` | `font-weight: 500` | ❌ |
+| `leading-[1.4]` | `line-height: 1.4` | ❌ (단위 없음) |
+| `tracking-[-0.36px]` | `letter-spacing: -0.36px` | ✅ |
+| `bg-[#0A1628]` | `background-color: #0A1628` | ❌ |
+| `bg-[rgba(13,40,61,0.5)]` | `background: rgba(13,40,61,0.5)` | ❌ |
+| `pt-[120px]` | `padding-top: 120px` | ✅ |
+| `gap-[24px]` | `gap: 24px` | ✅ |
+| `rounded-[12px]` | `border-radius: 12px` | ✅ |
+| `shadow-[...]` | `box-shadow: ...` | 부분 (px만) |
+| `w-[720px]` | `width: 720px` | ✅ |
+| `h-[1280px]` | `height: 1280px` | ✅ |
+| `opacity-40` | `opacity: 0.4` | ❌ |
+| `blur-[3.5px]` | `filter: blur(3.5px)` | ✅ |
+| `mix-blend-lighten` | `mix-blend-mode: lighten` | ❌ |
+| `mix-blend-multiply` | `mix-blend-mode: multiply` | ❌ |
+| `overflow-clip` | `overflow: clip` | ❌ |
+| `absolute` | `position: absolute` | ❌ |
+| `relative` | `position: relative` | ❌ |
+| `inset-0` | `inset: 0` | ❌ |
+| `flex` | `display: flex` | ❌ |
+| `flex-col` | `flex-direction: column` | ❌ |
+| `items-center` | `align-items: center` | ❌ |
+| `justify-center` | `justify-content: center` | ❌ |
+| `object-cover` | `object-fit: cover` | ❌ |
+| `object-contain` | `object-fit: contain` | ❌ |
+| `whitespace-nowrap` | `white-space: nowrap` | ❌ |
+| `text-center` | `text-align: center` | ❌ |
+| `text-white` | `color: #FFFFFF` | ❌ |
+| `size-full` | `width: 100%; height: 100%` | ❌ |
+| `max-w-none` | `max-width: none` | ❌ |
+| `pointer-events-none` | `pointer-events: none` | ❌ |
+
+### CSS 변수 패턴
+
+```
+참조 코드에 Figma 디자인 토큰이 CSS 변수로 포함될 수 있음:
+  font-[family-name:var(--font/family/pretendard,...)]
+  text-[length:var(--font/size/heading/24,24px)]
+  text-[color:var(--color/grayscale/950,#171716)]
+
+→ var() 안의 fallback 값(24px, #171716)을 사용.
+→ CSS 변수명은 프로젝트 토큰 네이밍에 참고.
+```
+
+---
+
+## 3. HTML 구조 추출
+
+```
+참조 코드의 JSX 구조가 HTML 구조.
+data-name 속성으로 레이어 용도 파악:
+  data-name="BG" → 배경 레이어
+  data-name="Title" → 제목 영역
+  data-name="Period" → 기간 정보 영역
+  data-name="Light" → 장식 조명
+  data-name="BTN_Share" → 공유 버튼
+
+구조 변환은 vibe-figma-convert에서 처리.
+```