@su-record/vibe 2.8.45 → 2.8.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.45",
+  "version": "2.8.46",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

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

@@ -68,9 +68,14 @@ component-index (/tmp/{feature}/component-index.json) 에서 매칭되는 컴포
      children 없음    → 빈 div 또는 스킵
 
 2. 배경 레이어 판별:
-   부모와 동일 크기(±5%) + imageRef 있음 + z-index 낮음
-     → position:absolute + inset:0 + object-fit:cover
-     → 부모에 position:relative + overflow:hidden 추가
+   BG 프레임 (name에 "BG"/"bg" 또는 부모와 동일 크기)
+     ❌ <img> 태그로 배경 처리 금지
+     ❌ position:absolute + inset:0 으로 이미지 배치 금지
+     ✅ 부모 요소에 CSS background-image로 처리:
+        background-image: url('/images/{feature}/{section}-bg.png');
+        background-size: cover;
+        background-position: center top;
+     ✅ BG 프레임은 HTML에 아무것도 렌더링하지 않음 (CSS만)
 
 3. 반복 패턴 감지:
    같은 부모 아래 동일 타입 + 유사 구조(children 수 동일) 노드 3개 이상
@@ -192,6 +197,27 @@ tree.json의 css 객체를 SCSS로 직접 변환한다. 추정하지 않는다.
 
 ## 2. 외부 SCSS 파일 구조
 
+### _base.scss (필수 — 래퍼 컨테이너)
+
+```scss
+// 모바일 퍼스트: vw 단위가 PC에서 거대해지는 것을 방지
+// designWidth(720px)를 max-width로 제한
+
+.{feature} {
+  width: 100%;
+  max-width: 720px;    // designWidth — PC에서 모바일 레이아웃 유지
+  margin: 0 auto;      // 중앙 정렬
+  overflow-x: hidden;
+
+  // PC 브레이크포인트에서 max-width 확장 (PC 디자인이 있을 때)
+  @media (min-width: 1025px) {
+    max-width: 100%;   // PC 디자인이 있으면 전체 너비
+  }
+}
+```
+
+이 파일이 없으면 vw 단위가 PC 뷰포트에서 비례 확대되어 레이아웃이 깨진다.
+
 ### layout vs components 구분
 
 ```
@@ -319,10 +345,8 @@ $bp-desktop: 1024px;
 -->
 <template>
   <section class="heroSection">
-    <!-- BG: 부모와 동일 크기 + imageRef → 배경 레이어 -->
-    <div class="heroBg">
-      <img src="/images/{feature}/hero-bg.png" alt="" aria-hidden="true" />
-    </div>
+    <!-- BG: CSS background-image로 처리 (img 태그 아님!) -->
+    <!-- .heroSection { background-image: url('/images/{feature}/hero-bg.png'); background-size: cover; } -->
 
     <!-- Title: flex-column, gap:24px → 직접 매핑 -->
     <div class="heroTitle">
@@ -407,9 +431,10 @@ function handleShare(): void {
 트리 노드의 속성으로 이미지 유형을 판별한다:
 
 배경 이미지:
-  조건: imageRef 있음 + 부모와 크기 동일(±5%) + 형제 중 가장 먼저 위치
-  매핑: position:absolute + inset:0 + z-index:0 + object-fit:cover
-  태그: <img alt="" aria-hidden="true" />
+  조건: BG 프레임 (name에 BG/bg 또는 부모와 크기 동일)
+  ❌ <img> 태그 금지
+  ✅ CSS background-image로만 처리:
+     부모 { background-image: url('...'); background-size: cover; }
 
 콘텐츠 이미지:
   조건: imageRef 있음 + 독립적 크기 + TEXT 형제 없음

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

@@ -20,10 +20,8 @@ tree.json 노드를 기반으로 컴포넌트를 생성할 때 이 템플릿을
 -->
 <template>
   <section class="{{sectionName}}">
-    <!-- BG: 부모와 동일 크기 + imageRef → 배경 레이어 -->
-    <div class="{{sectionName}}__bg">
-      <img src="/images/{{FEATURE_KEY}}/{{bg-file}}.png" alt="" aria-hidden="true" />
-    </div>
+    <!-- BG: CSS background-image로 처리. img 태그 사용 금지! -->
+    <!-- SCSS: .{{sectionName}} { background-image: url('/images/{{FEATURE_KEY}}/{{bg-file}}.png'); background-size: cover; } -->
 
     <!-- {{CHILD_1}}: tree flex-column, gap:{{GAP}}px → 직접 매핑 -->
     <div class="{{sectionName}}__{{child1Name}}">

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

@@ -99,6 +99,11 @@ Bash:
 ```
 각 섹션의 BG 프레임을 식별 → 합성된 배경 1장으로 렌더링:
 
+⚠️ 주의: BG 프레임만 렌더링한다 (텍스트 포함된 상위 프레임 렌더링 금지)
+  ❌ 섹션 전체를 렌더링 → 텍스트가 이미지에 포함 → HTML 텍스트와 중복
+  ✅ BG 하위 프레임만 렌더링 → 텍스트 없는 배경만 → CSS background-image
+  ✅ 텍스트는 tree.json에서 추출하여 HTML로 작성
+
 BG 프레임 판별 기준:
   - name에 "BG", "bg" 포함
   - 또는 부모와 크기 동일(±10%) + 자식 이미지 3개 이상