@su-record/vibe 3.2.6 → 3.2.7

package/skills/vibe.figma/references/branch1-read-convention.md

@@ -0,0 +1,82 @@
+# Branch 1 — READ + 프로젝트 컨벤션 준수
+
+> Loaded by vibe.figma SKILL.md when Branch Routing selects Branch 1. Phase 0–6 본문.
+
+**시나리오**: 기존 프로젝트에 새 UI/페이지를 추가. 기존 디자인 토큰·컴포넌트·스타일 컨벤션을 따른다.
+
+**입력**: Figma URL 여러 개 (스토리보드 + MO/PC 디자인을 한 번에). URL 종류 자동 분류.
+**출력**: 프로젝트 `components/{feature}/`, `styles/{feature}/` (기존 토큰/컴포넌트 재사용)
+
+### Phase 0 — Setup + URL 수집 + Project Context
+
+```
+2. Execute the bundled implementation below — Phase 0 Setup
+   → 스택 감지, 디렉토리, 피처명, component-index.json, project-tokens.json
+
+> Read `references/branch-phases.md` for URL pre-collection rules and the design-context loading algorithm (Phase 0, Branch 1).
+
+     - hasTeach == true → 이때만 Load skill `vibe.design-teach`로 인터랙티브 진입
+```
+
+### Phase 1 — Storyboard 분석 (선택)
+
+```
+Execute the bundled implementation below — Phase 1 Storyboard
+```
+
+> Read `references/branch-phases.md` for the storyboard auto-detect/auto-skip rule and output scope (Branch 1, Phase 1).
+
+### Phase 2 — 재료 확보
+
+```
+Execute the bundled implementation below — Phase 2 Extract Mode (코디네이터: MO/PC 병렬 워커)
+   → tree.json + bg/ + content/ + sections/ (검증용)
+```
+
+> Read `references/branch-phases.md` for the input-selection detail and the Audit gate rule (tree.json `auditSummary`, P1/P2 handling).
+
+### Phase 3 — 데이터 정제
+
+```
+Execute the bundled implementation below — Phase 3
+   ⛔ figma-refine.js 강제 (자체 정제 스크립트 금지)
+   → /tmp/{feature}/{bp}-main/sections.json
+```
+
+### Phase 4 — BP별 스태틱 구현 (컨벤션 준수)
+
+```
+Execute the bundled implementation below — Phase 4 Convert Mode
+
+⤵ Phase 4 후처리
+Load skill `vibe.design-refine` — normalize 모드
+   → 매칭 안 된 하드코딩 값 → MASTER.md 토큰으로 정렬
+   → 새 토큰 필요 항목은 review 큐에 기록
+```
+
+> Read `references/branch-phases.md` for the reuse-matching (BLOCKING) rule and the figma-to-scss/figma-validate gate.
+
+### Phase 5 — 컴파일 게이트
+
+```
+Execute the bundled implementation below — Phase 5
+   → tsc/build/dev 서버. P1=0까지 루프. Stuck → 사용자 질문.
+```
+
+### Phase 6 — 시각 검증 + 품질 점검 (MANDATORY)
+
+```
+Execute the bundled implementation below — Phase 6 (시각 검증 루프, P1=0까지)
+
+⤵ Phase 6 후처리
+Load skill `vibe.design-review` — audit 모드
+   → 5-dimension 점검 (a11y, performance, responsive, theming, AI slop)
+   → P1 finding은 review 큐에 기록 (read-only)
+
+⛔ Phase 6 + design-review(audit) 완료 전까지 "완료 요약" 출력 금지.
+```
+
+> Read `references/branch-phases.md` for the raw-vs-computed reconciliation detail and Phase 6.5 DESIGN.md emission steps.
+
+---
+

package/skills/vibe.figma/references/branch2-read-standalone.md

@@ -0,0 +1,69 @@
+# Branch 2 — READ + 독립 규격 (--new)
+
+> Loaded by vibe.figma SKILL.md when Branch Routing selects Branch 2. Phase 0–6 본문.
+
+**시나리오**: 신규 독립 페이지 (랜딩, 프로토타입). 기존 컨벤션 무시, **Figma 원본 충실도 우선**.
+
+**입력**: Figma URL 여러 개 (Branch 1과 동일 — 스토리보드 + MO/PC 자동 분류)
+**출력**: `components/{feature}/` (독립 토큰, 새 컴포넌트 자유 생성)
+
+### Phase 0 — Setup (Lite) + URL 수집
+
+```
+2. Execute the bundled implementation below — Phase 0 Setup
+```
+
+> Read `references/branch-phases.md` for the URL-reuse note and the Phase 0 (Lite) skip list (component-index/project-tokens).
+
+### Phase 1 — Storyboard 분석 (선택)
+
+```
+Execute the bundled implementation below — Phase 1
+   → Branch 1 Phase 1과 동일 (storyboard URL이 있으면 분석, 없으면 SKIP)
+```
+
+### Phase 2 — 재료 확보
+
+```
+Execute the bundled implementation below — Phase 2 Extract Mode
+   → Branch 1 Phase 2와 동일 (design URL로 추출)
+
+   🚦 Audit gate: Branch 1과 동일하게 `auditSummary.p1 > 0` 이면 Phase 3 진입 금지.
+```
+
+### Phase 3 — 데이터 정제
+
+```
+Execute the bundled implementation below — Phase 3 (figma-refine.js 강제)
+```
+
+### Phase 4 — BP별 스태틱 구현 (Standalone 모드)
+
+```
+Execute the bundled implementation below — Phase 4 Convert Mode
+```
+
+> Read `references/branch-phases.md` for the Standalone-mode reuse/token rules (Branch 2, Phase 4).
+
+### Phase 5 — 컴파일 게이트
+
+```
+Execute the bundled implementation below — Phase 5
+```
+
+### Phase 6 — 시각 검증 + a11y (MANDATORY)
+
+```
+Execute the bundled implementation below — Phase 6 (시각 검증 루프, P1=0까지)
+
+⤵ Phase 6 후처리
+Load skill `vibe.design-review` — audit 모드
+   → a11y는 항상 검증. 컨벤션 무시 모드여도 접근성은 양보 불가.
+
+⛔ Phase 6 + design-review(audit) 완료 전까지 "완료 요약" 출력 금지.
+```
+
+> Read `references/branch-phases.md` for the raw-vs-computed note and Phase 6.5 DESIGN.md emission steps (Branch 2).
+
+---
+

package/skills/vibe.figma/references/branch3-write.md

@@ -0,0 +1,122 @@
+# Branch 3 — WRITE (plan.md → Figma)
+
+> Loaded by vibe.figma SKILL.md when Branch Routing selects Branch 3 (--create / --create-storyboard / --create-design). createMode 매트릭스와 Step A–F 본문.
+
+**시나리오**: plan.md의 UI 서술(Look & Feel, 레이아웃, 반응형)을 Figma 파일에 디자인으로 생성.
+
+**입력**:
+- 라우팅에서 받은 `mdArg` (필수, .md 경로)
+- 라우팅에서 받은 `createMode` ∈ {full, storyboard, design}
+- target Figma file URL/key (Step B에서 질문)
+
+**출력**: 지정된 Figma 파일 내 새 페이지/프레임/섹션
+
+> **Phase 명명 주의**: Branch 3은 `figma` 스킬의 Phase 0~6과 충돌을 피하기 위해 **Step A~F**로 표기한다.
+> **2단계 생성 원칙**: `createMode == full`이면 본 디자인 직진 금지. 반드시 **와이어프레임(Step D) → 사용자 검토 → 본 디자인(Step E)** 순서.
+
+### createMode별 실행 매트릭스
+
+> Read `references/step-algorithms.md` for the full per-Step createMode matrix (A–F × full/storyboard/design) and the `design` mode Step E branching summary.
+
+### Step A — plan.md 파싱 + 디자인 컨텍스트
+
+> Read `references/step-algorithms.md` for the full plan.md required-section extraction list, missing-section rejection message, feature-name rule, and design-context priority resolution.
+
+```
+   - hasTeach == true 인 경우에만 Load skill `vibe.design-teach`로 인터랙티브 보강
+
+3. Load skill `vibe.ui-ux-pro-max`
+   → plan.md의 분위기/타이포/컬러 키워드로 가이드 매칭
+   → 컬러 팔레트, 폰트 페어링, UX 가이드 후보 생성
+```
+
+### Step B — Figma 타겟 파일 + State 로드 + Plugin 규칙
+
+> Read `references/step-algorithms.md` for the user-input prompt, fileKey extraction, and state-file path detail.
+
+```
+4. Load skill `figma:figma-use` (MANDATORY prerequisite)
+   → use_figma 호출 규칙 (color 0-1, 폰트 로드, layoutSizing 순서 등)
+
+5. Load skill `figma:figma-generate-design`
+   → 디자인 시스템 컴포넌트 발견 + 섹션별 조립 워크플로
+```
+
+> Read `references/state-schema.md` for the full state JSON schema, wireHash/designHash rationale, and reuse/reject algorithm.
+
+### Step C — 디자인 시스템 발견
+
+```
+⛔ createMode == "storyboard" 인 경우 이 Step 전체 SKIP
+   (와이어는 컴포넌트/변수 정보가 필요 없음)
+
+Load skill `figma:figma-generate-design` — Step 2: Discover Design System
+```
+
+> Read `references/step-algorithms.md` for the full 2a/2b/2c discovery sub-steps and unmatched-token prompt.
+
+### Step D — 와이어프레임 생성 (incremental + idempotent)
+
+**목적**: plan.md 8번(레이아웃)만으로 회색 박스 + 텍스트 placeholder의 골격을 그린다. 컬러/타이포/컴포넌트 인스턴스는 **금지**.
+
+```
+⛔ createMode == "design" 인 경우 이 Step 전체 SKIP
+   (디자인만 모드는 Step E로 직진 — 와이어 단계 통째로 생략)
+
+Load skill `figma:figma-generate-design` — Step 3 패턴 재사용 (와이어 모드)
+
+   Step D 종료 직전:
+     state.updatedAt = now
+     Write /tmp/{feature}/figma-create-state.json
+```
+
+> Read `references/step-algorithms.md` for the full per-section wire generation algorithm (신규/캐시/구조변경 케이스), incremental-call rule, and responsive handling.
+
+#### 🚪 사용자 검토 게이트 (Step D ↔ Step E 사이)
+
+```
+⛔ createMode != "full" 인 경우 이 게이트 SKIP
+   - storyboard 모드: Step E가 없어서 게이트 의미 없음 → 곧바로 Step F로
+   - design 모드: Step D가 없어서 게이트 의미 없음 → Step E 먼저 실행
+
+1. mcp__plugin_figma_figma__get_screenshot 으로 와이어 프레임들 캡처
+```
+
+> Read `references/step-algorithms.md` for the full user review-gate message template and ralph/ultrawork auto-continue behavior.
+
+### Step E — 본 디자인 적용 (incremental + idempotent)
+
+**목적**: plan.md 7번+8번+9번 기반으로 컴포넌트 인스턴스/색/타이포/실제 텍스트를 그린다. 모드에 따라 wireNodeId 재사용 여부가 달라진다.
+
+```
+⛔ createMode == "storyboard" 인 경우 이 Step 전체 SKIP
+   (와이어만 모드는 Step E 없이 Step F로)
+
+Load skill `figma:figma-generate-design` — Step 3+: Assemble Sections (디자인 모드)
+
+   Step E 종료 직전:
+     state.planHash = sha256(plan.md 전체)
+     state.updatedAt = now
+     Write /tmp/{feature}/figma-create-state.json
+```
+
+> Read `references/step-algorithms.md` for the full 분기 A (full 모드) / 분기 B (design 모드) pseudocode and common rules (incremental use_figma calls, wireNodeId preservation).
+
+### Step F — 시각 검증 + 최종 사용자 확인
+
+```
+1. mcp__plugin_figma_figma__get_screenshot 으로 생성된 프레임 캡처
+   - createMode == "storyboard" → wireNodeId들 캡처
+   - createMode == "design"     → designNodeId들 캡처
+   - createMode == "full"        → designNodeId들 캡처
+```
+
+> Read `references/step-algorithms.md` for the full per-mode LLM self-check list and final user-facing summary template.
+
+```
+⛔ Step F 완료 전까지 "완료 요약" 출력 금지.
+⛔ 코드 파일 생성 절대 금지 (이 Branch는 WRITE-to-Figma 전용).
+```
+
+---
+