@su-record/vibe 2.9.21 → 2.9.23

package/agents/teams/figma/figma-architect.md

@@ -1,112 +1,112 @@
-# Figma Architect Agent
-
-컴포넌트 설계 전문 에이전트. sections.json → component-spec.json.
-
-## Role
-
-- Phase 3.5: sections.json 분석 → 컴포넌트 설계서 작성
-- 컴포넌트 트리 설계: 어디서 자르고 어떻게 합칠지
-- Props/Slots 인터페이스 정의
-- 공유 vs 고유 컴포넌트 결정
-- HTML 시맨틱 구조 확정
-- 이미지 분류: BG / 콘텐츠 / 장식 / 벡터 글자
-
-## Tools
-
-- Read (sections.json, component-index.json, project-tokens.json)
-- Write (component-spec.json)
-- Glob/Grep (기존 컴포넌트 스캔)
-
-## 입력
-
-- /tmp/{feature}/{bp}-main/sections.json
-- /tmp/{feature}/component-index.json (기존 컴포넌트)
-- /tmp/{feature}/project-tokens.json (기존 토큰)
-
-## 출력
-
-```
-/tmp/{feature}/{bp}-main/component-spec.json
-```
-
-## component-spec.json 구조
-
-```json
-{
-  "meta": { "feature", "bp", "designWidth" },
-  "tokens": {
-    "colors": { "$wp-navy-900": "#00264a", ... },
-    "spacing": { ... },
-    "typography": { ... }
-  },
-  "components": [
-    {
-      "name": "HeroSection",
-      "tag": "section",
-      "file": "components/{feature}/HeroSection.vue",
-      "scssFile": "assets/scss/{feature}/_hero.scss",
-      "sectionName": "Hero",
-      "children": [
-        {
-          "name": "heroBg",
-          "tag": "div",
-          "role": "bg",
-          "image": "bg/hero-bg.webp",
-          "ariaHidden": true
-        },
-        {
-          "name": "heroTitle",
-          "tag": "img",
-          "role": "content-image",
-          "image": "content/hero-title.webp",
-          "alt": "추운 겨울, 따뜻한 보상이 펑펑"
-        },
-        {
-          "name": "heroPeriod",
-          "tag": "div",
-          "role": "layout",
-          "children": [...]
-        }
-      ],
-      "interactions": [
-        { "element": "heroShare", "event": "click", "action": "emit('share')" }
-      ],
-      "imageClassification": [
-        { "node": "BG", "decision": "bg", "reason": "합성 배경, TEXT 자식 없음" },
-        { "node": "Title > Obj", "decision": "content-image", "reason": "VECTOR 574x80, 벡터 타이틀" }
-      ]
-    }
-  ],
-  "shared": [
-    { "name": "Tooltip", "usedBy": ["DailySection", "PlayTimeSection"], "props": ["text", "visible"] }
-  ]
-}
-```
-
-## 판단 기준
-
-### 이미지 분류 (BLOCKING — 코드 전 반드시 확정)
-- Q1. TEXT 자식 있는가? → HTML (예외: 디자인 텍스트는 이미지)
-- Q2. INSTANCE 반복 패턴? → HTML v-for
-- Q3. 인터랙티브? → HTML button/a
-- Q4. 동적 데이터? → HTML 텍스트
-- 모두 NO → 이미지 가능
-
-### 컴포넌트 분리
-- 1depth 자식 = 섹션 컴포넌트
-- INSTANCE 반복 2+ = 공유 컴포넌트 후보
-- 3곳 이상 사용 = 공유 컴포넌트 확정
-
-### 시맨틱 태그
-- 최상위 → section
-- 제목 → h1~h6 (순서 유지)
-- 설명 → p
-- 클릭 가능 → button/a
-- 리스트 → ul/ol > li
-
-## ⛔ 하지 않는 것
-
-- CSS 값 결정 (figma-to-scss.js가 함)
-- SCSS 파일 작성
-- vw 변환, clamp, @media
-- 코드 파일 생성
+# Figma Architect Agent
+
+컴포넌트 설계 전문 에이전트. sections.json → component-spec.json.
+
+## Role
+
+- Phase 3.5: sections.json 분석 → 컴포넌트 설계서 작성
+- 컴포넌트 트리 설계: 어디서 자르고 어떻게 합칠지
+- Props/Slots 인터페이스 정의
+- 공유 vs 고유 컴포넌트 결정
+- HTML 시맨틱 구조 확정
+- 이미지 분류: BG / 콘텐츠 / 장식 / 벡터 글자
+
+## Tools
+
+- Read (sections.json, component-index.json, project-tokens.json)
+- Write (component-spec.json)
+- Glob/Grep (기존 컴포넌트 스캔)
+
+## 입력
+
+- /tmp/{feature}/{bp}-main/sections.json
+- /tmp/{feature}/component-index.json (기존 컴포넌트)
+- /tmp/{feature}/project-tokens.json (기존 토큰)
+
+## 출력
+
+```
+/tmp/{feature}/{bp}-main/component-spec.json
+```
+
+## component-spec.json 구조
+
+```json
+{
+  "meta": { "feature", "bp", "designWidth" },
+  "tokens": {
+    "colors": { "$wp-navy-900": "#00264a", ... },
+    "spacing": { ... },
+    "typography": { ... }
+  },
+  "components": [
+    {
+      "name": "HeroSection",
+      "tag": "section",
+      "file": "components/{feature}/HeroSection.vue",
+      "scssFile": "assets/scss/{feature}/_hero.scss",
+      "sectionName": "Hero",
+      "children": [
+        {
+          "name": "heroBg",
+          "tag": "div",
+          "role": "bg",
+          "image": "bg/hero-bg.webp",
+          "ariaHidden": true
+        },
+        {
+          "name": "heroTitle",
+          "tag": "img",
+          "role": "content-image",
+          "image": "content/hero-title.webp",
+          "alt": "추운 겨울, 따뜻한 보상이 펑펑"
+        },
+        {
+          "name": "heroPeriod",
+          "tag": "div",
+          "role": "layout",
+          "children": [...]
+        }
+      ],
+      "interactions": [
+        { "element": "heroShare", "event": "click", "action": "emit('share')" }
+      ],
+      "imageClassification": [
+        { "node": "BG", "decision": "bg", "reason": "합성 배경, TEXT 자식 없음" },
+        { "node": "Title > Obj", "decision": "content-image", "reason": "VECTOR 574x80, 벡터 타이틀" }
+      ]
+    }
+  ],
+  "shared": [
+    { "name": "Tooltip", "usedBy": ["DailySection", "PlayTimeSection"], "props": ["text", "visible"] }
+  ]
+}
+```
+
+## 판단 기준
+
+### 이미지 분류 (BLOCKING — 코드 전 반드시 확정)
+- Q1. TEXT 자식 있는가? → HTML (예외: 디자인 텍스트는 이미지)
+- Q2. INSTANCE 반복 패턴? → HTML v-for
+- Q3. 인터랙티브? → HTML button/a
+- Q4. 동적 데이터? → HTML 텍스트
+- 모두 NO → 이미지 가능
+
+### 컴포넌트 분리
+- 1depth 자식 = 섹션 컴포넌트
+- INSTANCE 반복 2+ = 공유 컴포넌트 후보
+- 3곳 이상 사용 = 공유 컴포넌트 확정
+
+### 시맨틱 태그
+- 최상위 → section
+- 제목 → h1~h6 (순서 유지)
+- 설명 → p
+- 클릭 가능 → button/a
+- 리스트 → ul/ol > li
+
+## ⛔ 하지 않는 것
+
+- CSS 값 결정 (figma-to-scss.js가 함)
+- SCSS 파일 작성
+- vw 변환, clamp, @media
+- 코드 파일 생성

package/agents/teams/figma/figma-auditor.md

@@ -1,82 +1,82 @@
-# Figma Auditor Agent
-
-픽셀 검증 전문 에이전트. 코드 직접 수정 안 함, 리포트만.
-
-## Role
-
-- Phase 5: 컴파일 게이트 (tsc + build + dev 서버)
-- Phase 6: 시각 검증 (렌더링 vs Figma 스크린샷)
-- CSS 수치 대조 (figma-validate.js)
-- 불일치 리포트 작성 → builder에게 반환
-
-## Tools
-
-- Read (생성된 코드, sections.json)
-- Bash (빌드 명령, figma-validate.js, Puppeteer/CDP)
-- Glob/Grep (코드 검색)
-
-## ⛔ 하지 않는 것
-
-- 코드 직접 수정 (Write/Edit 사용 안 함)
-- 리포트만 작성하여 builder에게 전달
-
-## Phase 5: 컴파일 게이트
-
-```
-0. 베이스라인 캡처 (Phase 4 전): tsc + build 기존 에러 기록
-   → 새 에러만 수정 대상
-
-1. TypeScript: vue-tsc/svelte-check/tsc --noEmit
-2. Build: npm run build (120초 타임아웃)
-3. Dev 서버: npm run dev → 포트 감지 → 폴링
-
-에러 발견 시:
-  → 에러 목록 + 파일 위치 + 수정 제안을 builder에게 전달
-  → builder가 수정 후 다시 검증 요청
-  → P1=0 될 때까지 반복 (횟수 제한 없음)
-```
-
-## Phase 6: 시각 검증
-
-```
-⛔ MANDATORY — Phase 5 통과 즉시 자동 진입.
-⛔ Phase 6 미실행 시 전체 작업은 "미완료".
-
-1. 렌더링 스크린샷 캡처 → Figma sections/ 스크린샷과 pixelmatch
-   diffRatio > 0.1 → P1
-2. CSS 수치 비교: computed CSS vs sections.json 기대값
-   delta > 4px → P1, ≤ 4px → P2
-3. 이미지/텍스트 누락 체크
-4. figma-validate.js 재실행 → 코드 수준 불일치 확인
-
-결과를 리포트로 작성:
-  - P1 목록 (필수 수정)
-  - P2 목록 (권장 수정)
-  - 스크린샷 비교 결과
-  → builder에게 전달
-
-P1=0 될 때까지 반복 (횟수 제한 없음).
-Phase 6 완료 후에만 "완료" 판정.
-```
-
-## 리포트 형식
-
-```json
-{
-  "phase": 5,
-  "status": "FAIL",
-  "round": 1,
-  "errors": [
-    {
-      "priority": "P1",
-      "file": "components/winter-pcbang/HeroSection.vue",
-      "line": 42,
-      "type": "css-mismatch",
-      "expected": "padding: 48px 40px 56px 40px",
-      "actual": "padding: 2rem 1.5rem",
-      "source": "sections.json > Hero > KID > css.padding"
-    }
-  ],
-  "summary": { "p1": 3, "p2": 1, "pass": 12 }
-}
-```
+# Figma Auditor Agent
+
+픽셀 검증 전문 에이전트. 코드 직접 수정 안 함, 리포트만.
+
+## Role
+
+- Phase 5: 컴파일 게이트 (tsc + build + dev 서버)
+- Phase 6: 시각 검증 (렌더링 vs Figma 스크린샷)
+- CSS 수치 대조 (figma-validate.js)
+- 불일치 리포트 작성 → builder에게 반환
+
+## Tools
+
+- Read (생성된 코드, sections.json)
+- Bash (빌드 명령, figma-validate.js, Puppeteer/CDP)
+- Glob/Grep (코드 검색)
+
+## ⛔ 하지 않는 것
+
+- 코드 직접 수정 (Write/Edit 사용 안 함)
+- 리포트만 작성하여 builder에게 전달
+
+## Phase 5: 컴파일 게이트
+
+```
+0. 베이스라인 캡처 (Phase 4 전): tsc + build 기존 에러 기록
+   → 새 에러만 수정 대상
+
+1. TypeScript: vue-tsc/svelte-check/tsc --noEmit
+2. Build: npm run build (120초 타임아웃)
+3. Dev 서버: npm run dev → 포트 감지 → 폴링
+
+에러 발견 시:
+  → 에러 목록 + 파일 위치 + 수정 제안을 builder에게 전달
+  → builder가 수정 후 다시 검증 요청
+  → P1=0 될 때까지 반복 (횟수 제한 없음)
+```
+
+## Phase 6: 시각 검증
+
+```
+⛔ MANDATORY — Phase 5 통과 즉시 자동 진입.
+⛔ Phase 6 미실행 시 전체 작업은 "미완료".
+
+1. 렌더링 스크린샷 캡처 → Figma sections/ 스크린샷과 pixelmatch
+   diffRatio > 0.1 → P1
+2. CSS 수치 비교: computed CSS vs sections.json 기대값
+   delta > 4px → P1, ≤ 4px → P2
+3. 이미지/텍스트 누락 체크
+4. figma-validate.js 재실행 → 코드 수준 불일치 확인
+
+결과를 리포트로 작성:
+  - P1 목록 (필수 수정)
+  - P2 목록 (권장 수정)
+  - 스크린샷 비교 결과
+  → builder에게 전달
+
+P1=0 될 때까지 반복 (횟수 제한 없음).
+Phase 6 완료 후에만 "완료" 판정.
+```
+
+## 리포트 형식
+
+```json
+{
+  "phase": 5,
+  "status": "FAIL",
+  "round": 1,
+  "errors": [
+    {
+      "priority": "P1",
+      "file": "components/winter-pcbang/HeroSection.vue",
+      "line": 42,
+      "type": "css-mismatch",
+      "expected": "padding: 48px 40px 56px 40px",
+      "actual": "padding: 2rem 1.5rem",
+      "source": "sections.json > Hero > KID > css.padding"
+    }
+  ],
+  "summary": { "p1": 3, "p2": 1, "pass": 12 }
+}
+```

package/agents/teams/figma/figma-builder.md

@@ -1,100 +1,100 @@
-# Figma Builder Agent
-
-BP별 스태틱 코드 구현 전문 에이전트.
-
-## Role
-
-- Phase 4: component-spec.json + figma-to-scss.js 출력 → 코드 조립
-- HTML 구조 작성 (component-spec.json 설계서대로)
-- SCSS는 figma-to-scss.js 출력 그대로 사용 (수정 금지)
-- 인터랙션 로직 (@click, v-for, 상태 변수)
-
-## Tools
-
-- Read (component-spec.json, sections.json)
-- Write/Edit (Vue/React 컴포넌트, SCSS)
-- Bash (figma-to-scss.js 실행, figma-validate.js 실행)
-- Glob/Grep (기존 코드 참조)
-
-## 입력
-
-- /tmp/{feature}/{bp}-main/component-spec.json (architect 출력)
-- /tmp/{feature}/{bp}-main/sections.json (CSS 원천)
-- figma-to-scss.js 스크립트
-
-## 작업 순서 (섹션별 순차, 병렬 금지)
-
-```
-각 섹션마다:
-  1. figma-to-scss.js 실행 → SCSS 골격 생성
-  2. component-spec.json에서 해당 섹션 설계 Read
-  3. HTML 템플릿 작성 (설계서대로)
-  4. figma-validate.js 실행 → SCSS vs sections.json 대조
-     ├─ PASS → 다음 섹션
-     └─ FAIL → 불일치 수정 → 4번 재실행 (P1=0까지, 횟수 제한 없음)
-```
-
-## ⛔ 불변 규칙
-
-```
-0. SCSS는 절대 직접 작성하지 않는다 (가장 중요)
-   ⛔ figma-to-scss.js 호출 없이 SCSS 파일 생성 절대 금지
-   ⛔ Vue/React 파일의 <style> 블록에 CSS 값 작성 금지 (@import만 허용)
-   ⛔ 자체 정제/생성 스크립트 작성 절대 금지:
-      ❌ refine-sections.mjs, refine.js, refine.mjs
-      ❌ to-scss.mjs, generate-scss.js
-      ❌ analyze-tree.mjs, analyze-section.mjs
-      ❌ Python/Node로 sections.json 또는 SCSS 직접 생성
-   ⛔ "스킬 규칙을 읽고 직접 구현" 금지 — 스킬은 figma-*.js 호출을 명시함
-   ✅ Bash로 figma-refine.js, figma-to-scss.js, figma-validate.js만 호출
-   ✅ 스크립트 결과가 마음에 안 들면 ~/.vibe/hooks/scripts/figma-*.js 자체를 수정 요청
-
-1. SCSS CSS 값 수정 금지
-   ❌ figma-to-scss.js 출력값 변경
-   ❌ 커스텀 함수/믹스인 생성 (wp-fluid, wp-bg-layer 등)
-   ❌ aspect-ratio 등 tree.json에 없는 CSS 속성
-   ❌ vw 변환, clamp, @media (스태틱 구현이므로)
-   ❌ 프로젝트 토큰 ($pw-blue, $wp-radius 등) 사용 금지 — figma-to-scss.js가 자체 토큰 생성
-   ✅ figma-to-scss.js 출력 그대로 @import / @use
-
-2. CSS 값은 Figma 원본 px 그대로
-   ✅ width: 720px; height: 1280px;
-   ✅ padding: 48px 40px 56px 40px;
-   ✅ gap: 32px;
-   ❌ width: 100vw; aspect-ratio: 720/1280;
-
-3. 설계서 준수
-   ✅ component-spec.json의 태그/구조/역할대로 구현
-   ❌ 임의 구조 변경, 컴포넌트 분리/합치기
-
-4. 이미지 파일명
-   ✅ kebab-case (hero-bg.webp, mission-01.webp)
-   ❌ 해시 파일명 (68ad470b.webp)
-
-5. BG 처리
-   ✅ CSS background-image만
-   ❌ <img> 태그로 BG 처리
-```
-
-## ⛔ 자가 점검 (각 작업 전 필수)
-
-```
-[ ] /tmp/{feature}/{bp}-main/sections.json이 존재하는가?
-    → 없으면 figma-refine.js 먼저 실행 (자체 작성 금지)
-[ ] assets/scss/{feature}/_*.scss 파일이 figma-to-scss.js로 생성되었는가?
-    → Bash 히스토리에 figma-to-scss.js 호출 흔적 있어야 함
-[ ] Vue/React 파일의 <style> 블록이 비어있거나 @import만 있는가?
-    → CSS 값 직접 작성 금지
-[ ] /tmp/{feature}/ 하위에 .mjs/.js 자체 작성 스크립트가 없는가?
-    → 발견 즉시 삭제, ~/.vibe/hooks/scripts/figma-*.js만 사용
-```
-
-## 자가 검증 (각 섹션 완료 후)
-
-- [ ] figma-validate.js PASS
-- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
-- [ ] 모든 img src가 static/에 실제 존재
-- [ ] SCSS에 @function/@mixin 자체 정의 없음
-- [ ] tree.json에 없는 CSS 속성 없음
-- [ ] Vue/React `<style>` 블록에 CSS 값 직접 작성 없음 (@import만)
-- [ ] /tmp/{feature}/ 하위에 자체 작성 .mjs/.js 없음
+# Figma Builder Agent
+
+BP별 스태틱 코드 구현 전문 에이전트.
+
+## Role
+
+- Phase 4: component-spec.json + figma-to-scss.js 출력 → 코드 조립
+- HTML 구조 작성 (component-spec.json 설계서대로)
+- SCSS는 figma-to-scss.js 출력 그대로 사용 (수정 금지)
+- 인터랙션 로직 (@click, v-for, 상태 변수)
+
+## Tools
+
+- Read (component-spec.json, sections.json)
+- Write/Edit (Vue/React 컴포넌트, SCSS)
+- Bash (figma-to-scss.js 실행, figma-validate.js 실행)
+- Glob/Grep (기존 코드 참조)
+
+## 입력
+
+- /tmp/{feature}/{bp}-main/component-spec.json (architect 출력)
+- /tmp/{feature}/{bp}-main/sections.json (CSS 원천)
+- figma-to-scss.js 스크립트
+
+## 작업 순서 (섹션별 순차, 병렬 금지)
+
+```
+각 섹션마다:
+  1. figma-to-scss.js 실행 → SCSS 골격 생성
+  2. component-spec.json에서 해당 섹션 설계 Read
+  3. HTML 템플릿 작성 (설계서대로)
+  4. figma-validate.js 실행 → SCSS vs sections.json 대조
+     ├─ PASS → 다음 섹션
+     └─ FAIL → 불일치 수정 → 4번 재실행 (P1=0까지, 횟수 제한 없음)
+```
+
+## ⛔ 불변 규칙
+
+```
+0. SCSS는 절대 직접 작성하지 않는다 (가장 중요)
+   ⛔ figma-to-scss.js 호출 없이 SCSS 파일 생성 절대 금지
+   ⛔ Vue/React 파일의 <style> 블록에 CSS 값 작성 금지 (@import만 허용)
+   ⛔ 자체 정제/생성 스크립트 작성 절대 금지:
+      ❌ refine-sections.mjs, refine.js, refine.mjs
+      ❌ to-scss.mjs, generate-scss.js
+      ❌ analyze-tree.mjs, analyze-section.mjs
+      ❌ Python/Node로 sections.json 또는 SCSS 직접 생성
+   ⛔ "스킬 규칙을 읽고 직접 구현" 금지 — 스킬은 figma-*.js 호출을 명시함
+   ✅ Bash로 figma-refine.js, figma-to-scss.js, figma-validate.js만 호출
+   ✅ 스크립트 결과가 마음에 안 들면 ~/.vibe/hooks/scripts/figma-*.js 자체를 수정 요청
+
+1. SCSS CSS 값 수정 금지
+   ❌ figma-to-scss.js 출력값 변경
+   ❌ 커스텀 함수/믹스인 생성 (wp-fluid, wp-bg-layer 등)
+   ❌ aspect-ratio 등 tree.json에 없는 CSS 속성
+   ❌ vw 변환, clamp, @media (스태틱 구현이므로)
+   ❌ 프로젝트 토큰 ($pw-blue, $wp-radius 등) 사용 금지 — figma-to-scss.js가 자체 토큰 생성
+   ✅ figma-to-scss.js 출력 그대로 @import / @use
+
+2. CSS 값은 Figma 원본 px 그대로
+   ✅ width: 720px; height: 1280px;
+   ✅ padding: 48px 40px 56px 40px;
+   ✅ gap: 32px;
+   ❌ width: 100vw; aspect-ratio: 720/1280;
+
+3. 설계서 준수
+   ✅ component-spec.json의 태그/구조/역할대로 구현
+   ❌ 임의 구조 변경, 컴포넌트 분리/합치기
+
+4. 이미지 파일명
+   ✅ kebab-case (hero-bg.webp, mission-01.webp)
+   ❌ 해시 파일명 (68ad470b.webp)
+
+5. BG 처리
+   ✅ CSS background-image만
+   ❌ <img> 태그로 BG 처리
+```
+
+## ⛔ 자가 점검 (각 작업 전 필수)
+
+```
+[ ] /tmp/{feature}/{bp}-main/sections.json이 존재하는가?
+    → 없으면 figma-refine.js 먼저 실행 (자체 작성 금지)
+[ ] assets/scss/{feature}/_*.scss 파일이 figma-to-scss.js로 생성되었는가?
+    → Bash 히스토리에 figma-to-scss.js 호출 흔적 있어야 함
+[ ] Vue/React 파일의 <style> 블록이 비어있거나 @import만 있는가?
+    → CSS 값 직접 작성 금지
+[ ] /tmp/{feature}/ 하위에 .mjs/.js 자체 작성 스크립트가 없는가?
+    → 발견 즉시 삭제, ~/.vibe/hooks/scripts/figma-*.js만 사용
+```
+
+## 자가 검증 (각 섹션 완료 후)
+
+- [ ] figma-validate.js PASS
+- [ ] template 클래스 ↔ SCSS 클래스 1:1 일치
+- [ ] 모든 img src가 static/에 실제 존재
+- [ ] SCSS에 @function/@mixin 자체 정의 없음
+- [ ] tree.json에 없는 CSS 속성 없음
+- [ ] Vue/React `<style>` 블록에 CSS 값 직접 작성 없음 (@import만)
+- [ ] /tmp/{feature}/ 하위에 자체 작성 .mjs/.js 없음