@su-record/vibe 2.10.0 → 2.11.0

package/skills/vibe.design/templates/DESIGN.md.template

@@ -0,0 +1,100 @@
+<!-- design-md-version: 1 -->
+<!-- generated-by: vibe.design -->
+<!-- format: Google Stitch 9-section standard -->
+
+# DESIGN.md — Visual Quality SSOT
+
+> 이 문서는 프로젝트의 시각 규약 단일 출처(SSOT)입니다.
+> `CLAUDE.md`(코드) · `AGENTS.md`(빌드) 와 동급으로 외부 AI 에이전트가 직접 읽습니다.
+> 수정 시 `/vibe.design lint` 로 9 섹션 완전성을 검증하세요.
+
+## Visual Theme
+
+> §1 — 브랜드 톤 한 문단 (분위기, 무드, 핵심 정서).
+
+예시: "Minimal · neutral grays + single accent · 도구처럼 정확하고 조용한 인상."
+
+## Color Palette
+
+> §2 — hex 토큰 리스트 (이 섹션의 hex 만 verify 통과). semantic 이름 우선.
+
+- Primary: `#000000`
+- Background: `#FFFFFF`
+- Text: `#1A1A1A`
+- Border: `#E5E5E5`
+- Accent: `#5E6AD2`
+- Success: `#10B981`
+- Warning: `#F59E0B`
+- Error: `#EF4444`
+
+## Typography
+
+> §3 — 폰트 패밀리, 사이즈 스케일, 행간/자간.
+
+- Family: `"Inter", -apple-system, system-ui, sans-serif`
+- Display: 48 / 56 (weight 600)
+- H1: 32 / 40 (weight 600)
+- H2: 24 / 32 (weight 600)
+- Body: 16 / 24 (weight 400)
+- Caption: 14 / 20 (weight 400)
+- Code: `"JetBrains Mono", monospace`
+
+## Components
+
+> §4 — 공용 컴포넌트의 시각 규약 (Button / Input / Card / Modal …).
+
+- **Button**: radius 8px, padding 12px 20px, transition 150ms ease
+- **Input**: radius 6px, border 1px solid Border, focus ring 2px Accent
+- **Card**: radius 12px, padding 24px, background Background, border 1px solid Border
+- **Modal**: max-width 480px, backdrop blur 8px, radius 16px
+
+## Layout
+
+> §5 — 그리드, 간격 스케일, 컨테이너 최대폭.
+
+- Spacing scale: `4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96`
+- Container max-width: 1200px
+- Section vertical rhythm: 96px (desktop) / 64px (mobile)
+- Grid: 12-col, gutter 24px
+
+## Depth
+
+> §6 — 그림자, elevation, z-index 계층.
+
+- elevation-0: none (flat)
+- elevation-1: `0 1px 2px rgba(0,0,0,0.05)`
+- elevation-2: `0 4px 8px rgba(0,0,0,0.08)`
+- elevation-3: `0 12px 24px rgba(0,0,0,0.12)`
+- z-index: base 0, dropdown 10, modal 100, toast 1000
+
+## Do's & Don'ts
+
+> §7 — 금기와 권장 사항 (visual P1 의 시드).
+
+**DO**
+- 색은 §2 Color Palette 의 토큰만 사용
+- 모든 인터랙티브 요소에 focus ring (2px Accent)
+- spacing 은 §5 scale 에서만 선택
+
+**DON'T**
+- hex 하드코딩 (`bg: #FF0000` 금지 — 토큰으로 §2 에 등록)
+- 임의 그림자값 (반드시 §6 elevation 사용)
+- 폰트 패밀리 임시 변경
+
+## Responsive
+
+> §8 — 브레이크포인트와 적응 규칙.
+
+- Breakpoints: `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`, `2xl: 1536px`
+- Mobile-first 작성, `min-width` 미디어쿼리만 사용
+- Section vertical rhythm: 96px (lg+) / 64px (sm/md)
+- Touch target 최소 44×44px (mobile)
+
+## Agent Prompt Guide
+
+> §9 — UI 코드 생성 AI 에이전트를 위한 한 문단 가이드.
+
+"UI 코드를 생성/수정할 때 §2 Color Palette · §3 Typography · §5 Layout spacing scale 의 토큰만 사용한다.
+hex 하드코딩 시 §2 에 토큰을 추가하거나 기존 토큰으로 치환한다.
+신규 컴포넌트는 §4 의 radius · padding 규칙을 따른다.
+브레이크포인트는 §8 만 사용한다."

package/skills/vibe.figma/SKILL.md

@@ -45,6 +45,8 @@ Step 1) 플래그 수집
   hasNew              = args에 "--new" 포함
   hasTeach            = args에 "--teach" 포함
   hasNewState         = args에 "--new-state" 포함 (Branch 3 전용: state 파일 무시하고 새로 그림)
+  hasEmitDesignMd     = args에 "--emit-design-md" 포함 (Branch 1/2 전용: READ 완료 후 DESIGN.md 출력)
+  hasReadDesignMd     = 프로젝트 루트에 DESIGN.md 존재 (Branch 3 전용: WRITE 시 톤·팔레트 우선 입력)
 
 Step 2) 위치 인자 분류
   positional  = 모든 비-플래그 인자
@@ -218,6 +220,12 @@ Load skill `design-audit`
    → 5-dimension 점검 (a11y, performance, responsive, theming, AI slop)
    → P1 finding은 review 큐에 기록 (read-only)
 
+⤵ Phase 6.5 (hasEmitDesignMd == true 시)
+   → resolved tokens (Color/Typography/Spacing) + design-audit 산출물을
+     DESIGN.md (Stitch 9 섹션) 으로 정제해 프로젝트 루트에 저장
+   → 첫 줄: `<!-- design-md-version: 1 -->`
+   → `vibe.design lint` 자동 통과 확인
+
 ⛔ Phase 6 + design-audit 완료 전까지 "완료 요약" 출력 금지.
 ```
 
@@ -295,6 +303,11 @@ Load skill `figma` — Phase 6 (시각 검증 루프, P1=0까지)
 Load skill `design-audit`
    → a11y는 항상 검증. 컨벤션 무시 모드여도 접근성은 양보 불가.
 
+⤵ Phase 6.5 (hasEmitDesignMd == true 시)
+   → resolved tokens + design-audit 산출물을
+     DESIGN.md (Stitch 9 섹션) 으로 정제해 프로젝트 루트에 저장
+   → 첫 줄: `<!-- design-md-version: 1 -->`
+
 ⛔ Phase 6 + design-audit 완료 전까지 "완료 요약" 출력 금지.
 ```
 
@@ -353,8 +366,11 @@ Load skill `design-audit`
    ✅ 피처명 결정: mdArg 파일명에서 .md 제거한 값을 {feature}로 사용
 
 2. Design context 로드 (non-interactive 기본)
+   - hasReadDesignMd == true (프로젝트 루트에 DESIGN.md 존재):
+     · §1 Visual Theme / §2 Color Palette / §3 Typography 를 톤·팔레트의
+       **1 차 입력**으로 사용 (`design-context.json` · plan.md 보다 우선)
    - Read .vibe/design-context.json
-     · 존재 → 톤/팔레트 보강용으로 binding
+     · 존재 → 톤/팔레트 보강용으로 binding (DESIGN.md 가 있으면 보조)
      · 없음 → plan.md의 "## 7. Look & Feel" 값으로 임시 컨텍스트 구성
    - hasTeach == true 인 경우에만 Load skill `design-teach`로 인터랙티브 보강
 

package/skills/vibe.review/SKILL.md

@@ -284,6 +284,13 @@ Task(subagent_type="ui-antipattern-detector",
   prompt="Detect UI anti-patterns in: {changed_ui_files}. Check against MASTER.md if exists at .vibe/design-system/{project}/MASTER.md.")
 ```
 
+#### Visual P1 Baseline
+
+- 프로젝트 루트에 `DESIGN.md` 가 존재하면 **시각 P1 의 1 차 baseline** 으로 사용한다 (§2 Color Palette / §7 Do's & Don'ts).
+- `DESIGN.md` 부재 시 기존 폴백을 사용 (WCAG 2.1 AA + `MASTER.md` + design-audit 기본 5 차원).
+- v1 범위: hex 컬러 드리프트만 P1 후보. spacing / font 드리프트는 Phase 2+ 에서 추가.
+- 안티패턴 검출(⑧) 은 `DESIGN.md §7` 의 "DON'T" 항목을 우선 규칙으로 사용한다.
+
 **findings 통합**: ⑥⑦⑧ findings를 기존 findings[]와 병합 → P1/P2/P3 통합 정렬
 
 **⑦ Critical finding 에스컬레이션**: ui-a11y-auditor의 P1 finding은 Review Debate Team(Phase 4.5)에 자동 포함

package/skills/vibe.run/SKILL.md

@@ -69,6 +69,23 @@ Load skill `regress` with: list --feature "{feature-name}"
 
 Also load `.vibe/contracts/{feature-name}.md` if present — use it as the contract reference during implementation.
 
+### DESIGN.md Gate (UI stack only, before Phase 1)
+
+Run immediately after the contract load:
+
+```bash
+# UI stack 감지: .vibe/config.json 의 stacks[].type 중 STACK_TO_SKILLS 가 vibe.design 을 포함하는 것
+# DESIGN.md 존재: 프로젝트 루트
+test -f DESIGN.md
+```
+
+- **DESIGN.md present OR no UI stack** → silently continue
+- **DESIGN.md absent AND UI stack present**:
+  - interactive mode: 한 줄 안내 — "💡 UI 작업에 `DESIGN.md` 시각 SSOT 가 없습니다. `/vibe.design init` 으로 생성하면 시각 드리프트가 자동 검출됩니다. (생략 가능 — 1 회만 안내)"
+  - ultrawork mode: 무음 스킵 (gate 가 막지 않음)
+
+> **권유 > 강제**. DESIGN.md 부재는 절대 vibe.run 을 블록하지 않는다.
+
 ### Core Flow
 
 ```
@@ -124,6 +141,8 @@ Scenario 3 → Implement → Verify ❌ → Fix → ✅
 All pass = Quality guaranteed
 ```
 
+> **하네스-안전 증분 (Dual-Harness Doctrine)**: 시나리오는 **가장 작은 검증 단위**다. 한 시나리오 구현 → 즉시 검증 → 다음. 여러 시나리오를 묶어 빅뱅으로 구현하지 않는다 — Codex(직역) 에서 성공률이 급락하고 CC 에서도 디버깅 비용만 늘린다. `ultrawork` 모드라도 이 단위는 무너뜨리지 않는다 (병렬은 시나리오 간, 검증은 시나리오별). 전문: `vibe/rules/principles/dual-harness-doctrine.md`.
+
 ### Automated Verification (Closed Loop)
 
 **자율적 AI 코딩 = 구현 + 검증 + 반복. 검증을 AI에게 맡기는 순간 루프가 닫힌다.**

package/skills/vibe.test/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: vibe.test
 description: Self-test vibe — probe every command/skill/hook/agent in the target harness install dir and write a pass/fail report
-argument-hint: "[cc|coco]  (empty = current harness)"
+argument-hint: "[cc|codex]  (empty = current harness)"
 user-invocable: true
 ---
 
@@ -14,10 +14,10 @@ user-invocable: true
 ```
 /vibe.test         # Test current harness (auto-detect)
 /vibe.test cc      # Force-test ~/.claude/
-/vibe.test coco    # Force-test ~/.coco/
+/vibe.test codex   # Force-test ~/.codex/
 ```
 
-No subcommands. No CC-vs-coco comparison semantics. One command, one report.
+No subcommands. No CC-vs-Codex comparison semantics. One command, one report.
 
 ## Report
 
@@ -34,7 +34,7 @@ Markdown summary is also printed to the console when the run finishes.
 
 Load skill `test` with target harness: `$ARGUMENTS`
 
-- If `$ARGUMENTS` is empty, detect the current harness (CC vs coco) and use that.
+- If `$ARGUMENTS` is empty, detect the current harness (CC vs Codex) and use that.
 - If the target install dir is missing, exit cleanly with guidance (not an error).
 
 See `skills/test/SKILL.md` for the probe spec and the report template.

package/skills/vibe.verify/SKILL.md

@@ -184,6 +184,26 @@ For each UI scenario in Feature file:
 - DOM 기반: `div class="nav-wrapper mx-4 flex..."` = 200+ chars
 - 전자를 사용해야 시나리오 50개도 한 세션에서 검증 가능
 
+### 3.2 Visual Drift Detection (--from-design-md)
+
+**활성 조건**: 프로젝트 루트에 `DESIGN.md` 존재 + UI 스택. 또는 `--from-design-md` 플래그 명시.
+
+**동작**:
+
+```
+Load skill `vibe.design` with: verify --files=<changed-ui-files>
+```
+
+`vibe.design verify` 는 `DESIGN.md §2 Color Palette` 의 hex 토큰 셋을 추출(`extractHexTokens`)하고,
+변경 파일에서 토큰 밖 hex 하드코딩을 검출(`findHardcodedColors`) 한다.
+
+**판정**:
+- P1 drift (토큰 밖 hex) → `/vibe.verify` 실패
+- DESIGN.md 부재 → 안내 후 silent skip (블록하지 않음)
+- v1 범위: hex only. spacing / font 드리프트는 Phase 2+
+
+**성능 목표**: <1s / 100 파일 (변경 파일만 스캔 — `/vibe.verify` 기존 정책 일치).
+
 ### 3.5 Step Count (MANDATORY before Quality Report)
 
 Read `.vibe/metrics/current-run.json` to obtain the tool-call count from the preceding `/vibe.run` (and any follow-up work in this session). Then append a record to `.vibe/metrics/history.jsonl` and include the count in the Quality Report below.

package/vibe/rules/principles/dual-harness-doctrine.md

@@ -0,0 +1,50 @@
+# Dual-Harness Doctrine
+
+> vibe는 여러 하네스(Claude Code, Codex, Gemini) 위에서 동작한다.
+> 차이는 경로·파일명 같은 **인프라**가 아니라 **인지 방식**에 있다.
+
+## 비대칭의 본질
+
+| | Claude Code | Codex |
+|---|---|---|
+| 모호한 요청 | 의도를 **추론**해 알아서 채움 | **직역** — 지시한 그대로만, 예시 텍스트도 실데이터로 |
+| research 트리거 | planning mode를 켜야 시작 | 모드 없이 **자발적** 탐색 |
+| 작업 단위 | 한 번에 working solution → 끝에 QA | **작게 순차** + 단계별 검증이 성공률 높음 |
+| 도메인 지식 | 탐색을 맡겨도 됨 | 직접 주입할수록(라이브러리·함수·위치) 정확도↑ |
+
+## Core Principle
+
+> **vibe는 어떤 하네스의 *암묵적 동작*에도 의존하지 않는다.**
+> **추론은 `/vibe` 디스패처가 앞단에서 한 번 하고, skill 본문은 모든 것을 명시적으로 쓴다.**
+
+= **"명시성 공통분모 + 추론 앞단"** 모델
+
+- **skill 본문 = 낮은 공통분모**: 명시적·직역-안전. Codex에서 안전하고 CC에서도 여전히 정확.
+- **`/vibe` 디스패처 = 추론 레이어**: 모호한 자연어를 명시적 지시로 *먼저* 펼쳐, 모든 하네스에서 CC급 편의를 제공.
+
+## Operating Rules
+
+1. **추론은 앞단에서 단 한 번.** `/vibe`가 모호한 NL → 명시적·직역 가능한 지시로 전개한다. 하위 skill은 모호한 입력을 받지 않는다.
+2. **예시·placeholder는 명시 표기.** 직역 하네스가 실데이터로 넣을 수 있는 예시 텍스트를 무표기로 쓰지 않는다. `<예시>`, `[채워넣을 값]`, `{{placeholder}}` 사용. (Codex는 무표기 예시를 그대로 테스트 데이터에 넣는다.)
+3. **research는 명시적으로 트리거.** "planning mode" 스위치에 의존하지 않는다. 조사·탐색이 필요한 단계는 skill이 말로 지시한다.
+4. **가장 작은 검증 단위로 분해.** 구현 → 검증 → 다음. 여러 단위를 묶지 않는다. (`vibe.run`의 시나리오 루프가 이미 이 방식 — ultrawork가 빅뱅으로 무너뜨리지 않게 유지.)
+5. **도메인 지식은 SPEC에 주입.** SPEC/plan은 구체적 라이브러리명·함수명·파일 위치를 담는다. 선택이 아닌 **의무 출력** — Codex 정확도가 여기에 비례한다.
+
+## Hooks Across Harnesses
+
+CC의 풍부한 hook 모델(PreToolUse/PostToolUse/UserPromptSubmit/Stop)에는 Codex에 완전한 등가물이 없다. hook의 **의도**별로 하네스에 맞는 메커니즘에 매핑한다.
+
+| hook 의도 | Claude Code | Codex |
+|---|---|---|
+| 라이프사이클 (turn 완료, 세션 시작/종료) | `Stop` / `SessionStart` hook | `config.toml`의 `notify` 프로그램 (agent-turn-complete 시 JSON 발화) |
+| pre-edit / scope guard | `PreToolUse` (동기 deny) | ❌ 동기 인터셉트 없음 → AGENTS.md 운영 규칙 + notify 기반 사후 검증 |
+| 키워드 디스패치 (ralph/ultrawork) | `UserPromptSubmit` | AGENTS.md 지시 (Codex가 직역 실행) |
+| 금지 패턴 차단 | `PreToolUse` | AGENTS.md 규칙 + 에이전트에게 실행하라 지시한 check 명령 |
+
+**핵심 통찰: Codex의 직역 성향이 AGENTS.md "soft hook"을 신뢰성 있게 만든다.** CC는 soft 지시를 가끔 무시해 hard hook이 필요하지만, Codex는 적힌 대로 실행한다. 따라서:
+
+- **하드 라이프사이클 이벤트** → Codex `config.toml notify` (실제·결정적). `stop-dispatcher` 로직(auto-commit, devlog, review gate) 재사용 가능.
+- **행동 가드** → AGENTS.md 운영 규칙. 직역이라 *오히려* 신뢰성 있음.
+- **진짜 동기 pre-edit 차단은 Codex에서 불가** — 사후 검증을 완화책으로 수용한다.
+
+> **Action item (미구현):** `.codex/settings.local.json`에 죽은 hook을 쓰는 것을 중단하고, 대신 `.codex/config.toml`에 `notify` 핸들러를 생성해 `stop-dispatcher` 로직을 재사용하며, 가드 규칙은 AGENTS.md로 방출한다.