npm - zugzbot - Versions diffs - 1.0.21 → 1.0.22 - Mend

zugzbot 1.0.21 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1271) hide show

package/.opencode/oh-my-design/skills/omd-asset-fetch/SKILL.md DELETED Viewed

@@ -1,213 +0,0 @@
----
-name: omd:asset-fetch
-description: "사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진 가져와' 류 요청에 트리거. omd:apply / omd:harness 안에서 자동 호출됨."
----
-# omd:asset-fetch — Free-license Asset Catalog
-## 왜 이 스킬
-"초안 같음" 결과물의 90%는 **placeholder가 너무 generic**이라서 — `[YOUR LOGO]` 점선 박스, organic blob SVG, "image placeholder" 회색 사각형. 사용자가 "와우" 못 느낌.
-이 스킬은 **모든 placeholder 자리에 verified free-license CDN 자산**을 박는 catalog. URL은 전부 200 OK 검증됨 (2026-05-14 기준).
-## 핵심 원칙
-1. **검증된 URL만**. 이 catalog에 없으면 generator가 임의로 만들지 말 것.
-2. **모든 자산은 commercial-use 허용** — 사용자 product에 ship 가능.
-3. **출처는 `assets/attribution.md`에 의무 기록** — URL + license + 사용 위치 + fetch 일자.
-4. **deterministic seeding 권장** — `seed` 또는 `lock` 파라미터로 결과 재현 가능. 매번 다른 이미지 나오는 random URL은 피할 것.
-5. **금지**: handcraft inline SVG로 placeholder를 "그려서" 채우기. catalog 자산 fetch 실패 시 → brand-color CSS gradient placeholder (이전 v1.3.4 fallback 정책과 동일).
-## Catalog (verified 2026-05-14)
-### 1. LOGO — product name **워드마크만** (v1.3.7부터)
-별도 icon / shapes mark / DiceBear logo 합성 **금지**. 헤더 logo = product name 텍스트 + 디스플레이 폰트, 그게 전부.
-**왜**: AI가 합성한 icon mark는 "generic"하게 보임 (사용자 frustration source). product 이름을 **꽤 괜찮은 폰트로** 그대로 박는 게 진짜 brand wordmark처럼 보이고 사용자가 1초만에 자기 product name으로 swap 가능.
-**패턴**:
-```html
-<a class="logo" href="/" style="display:inline-flex;align-items:center;text-decoration:none;">
-  <span class="logo-wordmark">{{PRODUCT_NAME}}</span>
-</a>
-<style>
-  .logo-wordmark{
-    font-family:"Bricolage Grotesque","Space Grotesk","DM Serif Display","Fraunces",-apple-system,sans-serif;
-    font-size:22px;font-weight:700;letter-spacing:-0.04em;
-    color:var(--color-text-heading);
-  }
-</style>
-```
-`<head>`에 디스플레이 폰트 `<link>` 의무 (§6 참고).
-**brand vibe별 폰트 매칭**:
-- cool / minimal / fintech serious → **Space Grotesk** 700 (geometric)
-- warm / playful / community → **Bricolage Grotesque** 700 (friendly variable)
-- editorial / luxury → **DM Serif Display** 또는 **Fraunces** (display serif)
-- bold / display → **Bricolage Grotesque** 800
-**`{{PRODUCT_NAME}}` 결정**:
-1. 사용자 prompt에 명시 product name 있으면 그대로 사용
-2. 없으면 brand vibe 맞는 generic placeholder 1개 선택 (omd-harness rule 5 §placeholder 표 참고: `Folio`, `Mint`, `Pop`, `Spark`, `Townie`, `Lane`, `Compass`, ...)
-3. 선택된 이름은 `<title>`, hero copy, footer brand 자리 전부 **일관 적용** (사용자 grep replace 1번이면 swap 끝)
-**금지 패턴 (v1.3.6 회귀 방지)**:
-- ❌ DiceBear `shapes` mark + wordmark 페어 — generic "AI 로고" 느낌
-- ❌ DiceBear `initials` 이니셜 chip — 이메일 아바타 같이 보임
-- ❌ 직접 그린 inline `<svg>` logo icon — 손그림 anatomy 회귀
-- ❌ `[YOUR LOGO]` / `[YOUR PRODUCT NAME]` 텍스트가 점선 박스 안에 그대로 — placeholder 티 폭발
-### 2. HERO 일러스트레이션 / 캐릭터
-**DiceBear avatars** (CC0) — v1.3.4부터 이미 사용 중. 5 스타일:
-| style | use case | URL pattern |
-|---|---|---|
-| `notionists` | financial advisor, business persona | `https://api.dicebear.com/9.x/notionists/svg?seed=<seed>&size=520` |
-| `lorelei` | warm, approachable | `https://api.dicebear.com/9.x/lorelei/svg?seed=<seed>&size=520` |
-| `personas` | diverse persona | `https://api.dicebear.com/9.x/personas/svg?seed=<seed>&size=520` |
-| `adventurer` | active, mobility | `https://api.dicebear.com/9.x/adventurer/svg?seed=<seed>&size=520` |
-| `fun-emoji` | warm, casual commerce | `https://api.dicebear.com/9.x/fun-emoji/svg?seed=<seed>&size=520` |
-생성기는 brand의 voice register 또는 surface signal에 맞춰 style 선택 — 예: 핀테크 advisor → `notionists`, 커뮤니티 커머스 → `lorelei` 또는 `fun-emoji`.
-**금지** (v1.3.4부터 누적, 자주 어겨지므로 재명시):
-- handcraft inline SVG 캐릭터 — 손그림 stick figure 합성 절대 금지
-- 캐릭터 일러스트를 우리 generator가 직접 inline `<path>`로 그리지 말 것
-- CDN fetch 후 다운로드한 파일 첫 부분에 `<!-- dicebear-fetched: <full URL> | <ISO> -->` 코멘트 박을 것 — 후속 audit gate가 검증
-### 3. ICONS — feature 카드, nav, product 카테고리
-**Lucide** (ISC) — 한 줄 1500+ 아이콘
-- URL: `https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/<name>.svg`
-- 예시: `credit-card`, `home`, `landmark`, `shield-check`, `trending-up`, `book-open`, `map-pin`, `bell`, `heart`, `search`, `user`, `chevron-right`, `arrow-right`, `external-link`, `play`, `bar-chart-3`
-**Heroicons** (MIT)
-- URL: `https://cdn.jsdelivr.net/npm/heroicons@2/24/outline/<name>.svg`
-- outline + solid family
-**Tabler Icons** (MIT)
-- URL: `https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/<name>.svg`
-색상 적용: SVG inline 후 `currentColor` / `stroke="..."` 변경, 또는 CSS filter
-### 4. PHOTOS — product 카드, hero 배경, testimonial 아바타
-**Lorem Picsum** (CC0 — Unsplash-derived rehosting)
-- random photo: `https://picsum.photos/<w>/<h>` (매 호출 다름)
-- **deterministic** (권장): `https://picsum.photos/seed/<seed>/<w>/<h>`
-  - seed는 `<brand>-product-01`, `<brand>-hero-01` 식으로 의미 부여
-- grayscale: `?grayscale`
-- blur: `?blur=2`
-- 예: `https://picsum.photos/seed/musinsa-card-1/400/500` → musinsa product 카드 자리에 들어갈 결정적 이미지
-**Loremflickr** (Flickr CC) — 키워드 매칭 + deterministic
-- URL: `https://loremflickr.com/<w>/<h>/<keyword>/all?lock=<n>`
-- 한국 컨텍스트 키워드: `seoul`, `korean,food`, `cafe,interior`, `apartment,korea`
-- `?lock=N`로 결정적 출력
-- 예: `https://loremflickr.com/600/400/seoul,city/all?lock=42` → 서울 도시 사진 결정적
-**사용 가이드**:
-- product 카드: Picsum seed로 시리즈 일관성 (`<brand>-product-1`, `-2`, `-3` ...)
-- hero 배경 photo (필요 시): Loremflickr 키워드 매칭
-- testimonial 아바타: DiceBear `lorelei` 또는 `notionists` (people 사진 placeholder 보다 일관)
-- 사진이 brand idiom과 안 맞으면 (예: musinsa editorial은 photo 자리에 색면 placeholder가 더 맞음) → 사용 안 함
-**금지**:
-- 실제 brand가 운영하는 CDN URL (`cdn.banksalad.com/...` 등)은 product DOM에 hot-link 금지 — TOS·IP 영역
-- 특정 인물 사진을 brand mascot처럼 박지 말 것
-### 5. PATTERNS / BACKGROUNDS
-**Hero Patterns** (CC BY 4.0) — `https://heropatterns.com` — SVG 도큐 보고 inline 복사
-- 라이센스에 따라 `assets/attribution.md`에 CC BY 표기 의무
-**CSS 자체 생성** — abstract gradient ornament는 generator가 직접:
-```css
-.hero-ornament {
-  position: absolute; inset: -100px -200px auto auto;
-  width: 480px; height: 280px;
-  background: radial-gradient(circle, var(--brand) 0%, transparent 70%);
-  filter: blur(120px); opacity: 0.4;
-  pointer-events: none; z-index: 0;
-}
-```
-이건 brand-specific creative work 아님 — 우리가 직접 그려도 무방.
-### 6. FONTS
-기존 `omd:reference-capture` Phase 3.5의 fonts.json catalog와 동일. SIL OFL / open-source만:
-- Pretendard, Wanted Sans, Noto Sans KR, Inter — jsdelivr / Google Fonts CDN
-**디스플레이/액센트 폰트** (logo / hero 헤드라인용, SIL OFL):
-- **DM Serif Display** (Google Fonts) — 우아한 serif display
-  - `https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap`
-- **Space Grotesk** (SIL OFL) — modern geometric sans
-  - `https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap`
-- **Fraunces** (SIL OFL) — display serif
-  - `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&display=swap`
-- **Bricolage Grotesque** (SIL OFL) — modern display
-  - `https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&display=swap`
-`[YOUR PRODUCT NAME]` 자리를 폼나게 만들 때 위 display 폰트 + `letter-spacing: -0.03em` + `font-weight: 600` 정도가 polish 시작점.
-## Attribution 의무
-모든 자산 사용 시 `assets/attribution.md`에 다음 형식으로 기록:
-```markdown
-# Asset Attribution
-Generated by `omd:asset-fetch` on <ISO-date>.
-## Used Assets
-| Asset | Source URL | License | Used at |
-|---|---|---|---|
-| Hero character | `https://api.dicebear.com/9.x/notionists/svg?seed=X&size=520` | CC0 | landing.html#L148 |
-| Logo wordmark | `Folio` rendered in Bricolage Grotesque 700 (SIL OFL via Google Fonts) | SIL OFL | landing.html header `.logo-wordmark` |
-| Product card 1 photo | `https://picsum.photos/seed/musinsa-card-1/400/500` | CC0 (Picsum) | landing.html#L412 |
-| ... | ... | ... | ... |
-## License Summary
-- CC0 자산: 무제한 commercial 사용
-- CC BY 4.0 자산 (Hero Patterns 등): 사용 시 attribution 의무 — 이 파일이 attribution 역할
-- SIL OFL 폰트: 폰트 자체 redistribution은 라이센스에 따름; 웹페이지 임베드는 자유
-```
-## 호출 패턴
-이 스킬은 **omd:apply / omd:harness가 내부적으로 호출**하는 룩업 catalog. 사용자가 명시적으로 부를 일은 드묾.
-| 호출 컨텍스트 | 액션 |
-|---|---|
-| omd:harness가 hero 일러스트 자리 채울 때 | §2 DiceBear avatar URL fetch |
-| omd:apply가 product 카드 N개 그릴 때 | §4 Picsum seeded URL 사용 |
-| omd:harness가 헤더 logo 자리 만들 때 | §1 워드마크-only 패턴 (디스플레이 폰트 + product name, icon mark X) |
-| omd:harness가 feature 카드 아이콘 정할 때 | §3 Lucide URL |
-| 사용자가 직접 "사진 자료 가져와줘" 요청 | 사용자 의도 확인 후 §4 Picsum / Loremflickr |
-## 검증 gate
-생성된 HTML 작성 직후 self-audit:
-1. `grep -E '<svg[^>]*>(\s*<path d="M[0-9.,\sCQ-]+"\s*/?>)' landing.html` — handcrafted inline svg path 개수 확인. 차트(.hero-chart) 외에 0이어야 함.
-2. `grep -E '\[YOUR LOGO\]|\[YOUR PRODUCT NAME\]' landing.html` — placeholder 텍스트 남아있나? 있으면 §1 패턴으로 교체.
-3. `grep -E 'assets/attribution\.md' landing.html` 또는 attribution.md 파일 존재 확인.
-4. `grep -E 'placeholder|TBD|TODO|FIXME' landing.html` — sub-agent가 lazy fallback 남겼나? 0이어야 함.
-## 안티패턴 (절대 금지)
-- ❌ generator가 inline SVG로 캐릭터·로고·아이콘·일러스트 "그리기"
-- ❌ catalog에 없는 임의 CDN URL 추측 (e.g. "https://example.com/cool-illustration.svg" 같은 거짓 URL)
-- ❌ brand가 운영하는 CDN URL hot-link (cdn.banksalad.com 등)
-- ❌ 사용자 product에 [YOUR LOGO] 점선 박스 그대로 ship — §1 패턴으로 교체 의무
-- ❌ attribution.md 생략
-## 한 줄 요약
-**모든 placeholder = catalog fetch + attribution. handcraft inline graphics 0.**

package/.opencode/oh-my-design/skills/omd-codex-image/SKILL.md DELETED Viewed

@@ -1,162 +0,0 @@
----
-name: omd:codex-image
-description: "이미지 placeholder를 동적으로 materialize. Codex 채널에서는 내장 image-generation primitive 호출, Claude Code 채널에서는 omd-asset-curator로 fall back, OpenCode에서는 spec dump. HTML/MD의 `<!-- omd:gen-image -->` 블록을 단일 source of truth로 사용. '이미지 생성해줘', '플레이스홀더 채워줘', '코덱스로 이미지 만들어' 류 트리거."
-user-invocable: true
----
-# omd:codex-image
-채널-aware 이미지 materialization 스킬. **하나의 spec format** + **세 가지 downstream 처리**.
-문제: oh-my-design이 emit하는 HTML/MD에는 늘 illustration 자리가 비어있다. 채널별 capability가 다르다 — Codex CLI는 내장 image generation을 갖고, Claude Code는 안 가졌고, OpenCode는 user에게 위임한다. 이 차이를 skill 1개로 통합한다.
-## 0. 단일 spec format
-artifact (HTML, Markdown, JSX, MDX) 안에 다음 주석 블록을 둔다.
-```html
-<!-- omd:gen-image
-  filename: assets/karrot-hero.png
-  prompt: "Karrot mobile home feed screenshot — white canvas, warm near-black headings, single Karrot Orange #FF6600 floating CTA. Mobile portrait, no chrome."
-  aspect: "16:9"
-  style: "product screenshot, minimal, mobile"
-  references:
-    - https://www.daangn.com/
-    - https://seed-design.io/
-  notes: "Single saturated element per viewport. Use brand orange only on the CTA."
--->
-<img src="assets/karrot-hero.png" alt="당근 홈 피드의 단일 오렌지 CTA" />
-```
-규칙:
-- `filename` — 결과물 저장 경로. 같은 디렉토리 기준 상대경로 권장.
-- `prompt` — 한 문단, 구체적, 시각 디테일 + 톤 + 컬러 hex 포함.
-- `aspect` — `16:9` `4:3` `1:1` `9:16` 중 하나.
-- `style` — 1~3 단어 (`product screenshot` / `inline svg` / `editorial photo` / `dieline diagram`).
-- `references` — 실제 브랜드 URL (선택, IP-safe 컨텍스트용).
-- `notes` — generator나 검수자가 알아야 할 제약.
-이 spec은 channel과 무관하다. 채널별 처리는 §1.
-## 1. 채널 분기
-호출 envelope의 `channel` (또는 환경 detect — `process.env.OMD_CHANNEL`이나 host agent 식별)에 따라:
-### 1.1 channel = `codex`
-Codex CLI는 native image generation을 갖고 있다. 다음 순서:
-1. artifact를 Read로 전체 로드
-2. `<!-- omd:gen-image ... -->` 블록을 정규식으로 추출 (multiline)
-3. 각 블록마다 Codex의 image generation primitive 호출 — 도구명은 host에 따라 다르다 (`generate_image`, `image.create`, `dall_e_image_generation`, `gpt_image_1` 등). Codex agent가 자기 환경에서 사용 가능한 것을 선택한다.
-4. 출력 파일을 `filename` 경로에 저장 (mkdir -p)
-5. **주석 블록은 그대로 두고** `<img src>`나 `![]()` 경로가 매칭되는지 확인. 안 맞으면 alt 텍스트 보존하면서 src만 교체.
-6. 각 처리 항목에 `<!-- omd:gen-image:done at=<ISO timestamp> by=codex -->` 주석을 spec 블록 아래에 1줄 추가.
-generation 실패 시: spec 블록은 그대로, `<!-- omd:gen-image:error reason="..." -->` 추가. 다음 호출이 재시도 가능하도록.
-prompt 보강 (Codex가 좋은 결과를 내려면):
-- `prompt` 원문 + 다음 prefix 자동 prepend: `"Render as <aspect> <style>. "`
-- `notes`에 색 hex 있으면 prompt 끝에 `"Use only the following colors: <hex list>."` 추가
-- `references` 있으면 `"Stylistic reference inspiration only — do not copy verbatim: <urls>"` 추가
-### 1.2 channel = `claude-code`
-Claude Code는 native image generation이 없다. 대신 `omd-asset-curator` 스킬로 라우팅:
-1. spec 블록을 추출
-2. 각 블록을 omd-asset-curator의 spec 형식으로 변환:
-   - `prompt` → asset-curator의 `description`
-   - `style` → asset-curator의 medium 힌트 (`product screenshot` → Picsum/Loremflickr, `inline svg` → 직접 SVG 생성, `icon` → Lucide)
-3. asset-curator가 free-license 자원에서 매칭 (DiceBear avatars, Lucide icons, Picsum CC0 photos, unDraw SVG 등) 또는 인라인 SVG를 생성해 `filename`에 저장
-4. spec 블록 그대로 두고 `<!-- omd:gen-image:done at=<ISO> by=asset-curator source=<url> -->` 추가
-5. **사용자에게 1줄 알림**: "Claude Code에서는 free-license fallback을 적용했어요. 더 정확한 이미지는 Codex 채널에서 generate하면 돼요."
-### 1.3 channel = `opencode`
-OpenCode는 image generation도, asset-curator도 자동으로 못 돌린다. user-in-the-loop:
-1. spec 블록을 추출
-2. terminal에 `## Image generation queue` 섹션을 emit:
-   ```
-   3개 이미지를 수동으로 생성/소싱해서 다음 경로에 두세요:
-   1. assets/karrot-hero.png  (16:9)
-      prompt: "Karrot mobile home feed — single orange CTA..."
-      refs: https://www.daangn.com/
-   2. ...
-   ```
-3. spec 블록은 그대로 두고 done 주석은 user 확인 후에만 추가
-## 2. fallback 그래프
-artifact를 처리할 때 항상 우선순위:
-```
-Codex native gen  ──┐
-                    ├─► success → done 주석 추가
-asset-curator      ──┘
-                    │
-                    └─► fail → user-queue (OpenCode 식 prompt)
-```
-각 단계 실패는 다음 단계로 escalate. 마지막 단계도 실패하면 error 주석 + 사용자에게 명시.
-## 3. idempotency
-이 스킬은 같은 artifact에 여러 번 돌려도 안전해야 한다.
-- 이미 `<!-- omd:gen-image:done -->` 주석이 붙은 spec 블록은 스킵
-- `filename` 경로의 파일이 이미 존재하면 (size > 0) 스킵
-- `--force` 명시되면 둘 다 무시하고 재생성
-## 4. IP safe rails
-- `references` URL은 inspiration만. 절대 verbatim 카피 X.
-- 브랜드 로고는 generation이 아니라 reference에서 **다운로드**해서 가져오기. Codex/asset-curator 둘 다 로고는 generate 금지 (왜곡된 가짜 로고는 IP risk).
-- 사람 얼굴이 들어가는 generation은 디폴트 거절 (DiceBear avatars 같은 캐리커처는 OK).
-## 5. 출력 보고
-처리 끝에 한 줄 요약:
-```
-✓ 4 images materialized (codex)  ·  0 skipped  ·  0 errors
-  → experiments/2026-05-19/karrot/assets/{hero,one-color,grid,detail}.png
-```
-또는 fallback이 섞였을 때:
-```
-✓ 2 codex · 2 asset-curator fallback · 1 user-queue
-```
-## 6. 호출 envelope
-```yaml
-agent: omd-codex-image
-inputs:
-  artifact_path: experiments/2026-05-19/karrot/landing.html
-  channel: codex          # 또는 claude-code | opencode | auto
-  force: false            # done 주석 무시하고 재생성
-  dry_run: false          # spec parse만 하고 generation 안 함
-```
-`channel: auto`면 env 또는 host detection으로 분기.
-## 7. 금지
-- spec 블록을 *제거*하지 말 것. done 주석만 *추가*. spec은 영구 기록.
-- Codex가 사용 불가한 환경에서 channel=codex 강제 호출 X — auto 또는 명시적 fallback 사용.
-- 같은 filename에 다른 prompt 두 번 처리 금지 (idempotency violation).
-- generation prompt에 사람 신원이나 실명 절대 넣지 않기.
-## 8. 다른 스킬과의 관계
-- **omd-asset-curator**: 무료 라이선스 자산 카탈로그. codex-image의 claude-code fallback path.
-- **omd-reference-capture**: 라이브 브랜드 사이트 캡쳐. `references:` URL 검증용으로 같이 쓰면 정확도 ↑.
-- **omd-orchestrator**: HTML emit 후 codex-image를 마지막 단계에 끼워 넣을 수 있음. orchestrator의 worker 카탈로그에 추가됨.
-- **omd-final-qa**: gen 결과 paste-in 후 자기 rubric에 "image quality" 항목 추가 (선택).

package/.opencode/oh-my-design/skills/omd-designer-review/SKILL.md DELETED Viewed

@@ -1,180 +0,0 @@
----
-name: omd:designer-review
-description: "시각 + 브랜드 일관성 리뷰. HTML/MD/JSX artifact를 받아 brand DESIGN.md 대비 typo hierarchy, 색 budget, radius scale, 컴포넌트 state, 모바일 반응형 검수. severity BLOCK/WARN/FYI + line ref 출력. 'UI 리뷰', '디자인 검토', 'DESIGN.md 대비 검수' 류 트리거."
-user-invocable: true
----
-# omd:designer-review
-artifact를 받아 brand의 DESIGN.md 기준으로 visual / brand consistency를 audit한다. **read-write가 아니라 advisory** — 직접 수정하지 않고 review report만 emit.
-구조는 [`mastepanoski/claude-skills` ui-design-review](https://agentskills.so/skills/mastepanoski-claude-skills-ui-design-review)에서 차용.
-## 0. 필수 입력
-- `artifact_path`: HTML, MD, JSX, TSX 중 하나
-- `design_md_path`: 해당 브랜드의 `references/<id>/DESIGN.md` 또는 프로젝트 루트 `DESIGN.md`
-- (선택) `viewport`: `mobile` | `desktop` | `both` (default: both)
-이 두 입력이 없으면 BLOCK으로 즉시 종료.
-## 1. Audit 카테고리 (6)
-### 1.1 Typography hierarchy
-- DESIGN.md `§ Typography` 스펙 read
-- artifact 내 h1/h2/h3/p의 size, weight, line-height 추출
-- 일치 여부 검사
-- 빈 h-level skip (h1 → h3) → WARN
-- 본문 weight가 400/500이 아닌 700 fall-through → WARN
-### 1.2 Color budget (Toss "2 saturated brand elements / viewport" rule)
-DESIGN.md `§ Color`의 brand saturated tokens 추출.
-- viewport당 brand saturated 사용 횟수 카운트
-- > 2 → WARN (Toss principle 위반)
-- > 4 → BLOCK
-- DESIGN.md에 없는 hex 직접 사용 → WARN
-- 회색 대신 saturated 사용 (예: warning이 아닌 컨테이너에 red-500) → WARN
-### 1.3 Radius scale
-- DESIGN.md `§ Radius` 토큰 read (예: 0, 4, 8, 12, 16, 9999)
-- artifact 내 `border-radius` 추출
-- 토큰에 없는 값 → WARN
-- 한 컴포넌트 안에서 radius 혼용 (8 + 12) → FYI
-### 1.4 Component states
-각 interactive 요소가 다음 state를 갖춰야:
-- default ✓
-- hover ✓
-- focus (focus-visible OK) ✓
-- active ✓
-- disabled ✓
-누락 → BLOCK (focus는 a11y 필수)
-### 1.5 Mobile responsiveness
-- viewport=both인 경우 mobile에서 검사
-- 최소 hit area 44x44 (iOS HIG) → BLOCK 미달
-- 가로 스크롤 발생 → BLOCK
-- 텍스트 14px 미만 → WARN
-### 1.6 Spacing / layout
-- DESIGN.md `§ Spacing` 토큰
-- 토큰 외 값 (예: `padding: 13px`) → WARN
-- 인접 요소 간 일관성 (한 카드 안에서 padding-x가 16 vs 20 혼재) → WARN
-## 2. Severity 정의
-| Severity | 의미 | 후속 조치 |
-|---|---|---|
-| **BLOCK** | a11y 또는 hard rule 위반. 출간 불가. | writer로 revision round 1 |
-| **WARN** | best practice 위반. 출간 가능하나 권장 수정. | writer가 판단 후 fix |
-| **FYI** | 정보성. 의도일 수 있음. | 무시 가능 |
-## 3. 출력 형식
-`<work_dir>/.reviews/designer-review-round-<N>.md`:
-```markdown
-# Designer review — round <N>
-**Date:** <ISO>
-**Artifact:** <path>
-**DESIGN.md:** <path>
-**Viewport:** mobile | desktop | both
-## Summary
-- BLOCK: <count>
-- WARN: <count>
-- FYI: <count>
-## Issues
-### [BLOCK] Focus state missing on primary CTA
-- **Location:** `components/SignupForm.tsx:42`
-- **Rule:** § Component states — focus is mandatory
-- **Evidence:** `<button className="bg-blue-500 hover:bg-blue-600">` — focus 클래스 없음
-- **Fix suggestion:** add `focus-visible:ring-2 focus-visible:ring-blue-300`
-### [WARN] Color budget exceeded on mobile hero
-- **Location:** `index.ko.md:34-41`
-- **Rule:** § Color budget — max 2 saturated / viewport
-- **Evidence:** 3 saturated brand 사용 (red-500, blue-500, green-500)
-- **Fix suggestion:** green-500을 gray-700 또는 텍스트로 대체
-...
-## Verdict
-- **PASS** (BLOCK=0, WARN≤3) — 출간 OK
-- **REVISION** (BLOCK=0, WARN>3) — 권장 수정 후 재리뷰 옵션
-- **BLOCK** (BLOCK≥1) — 출간 불가, writer revision round 시작
-```
-## 4. 시각 검수 (optional)
-artifact가 HTML/JSX이고 browser-harness가 가용하면 mobile 320px + desktop 1280px 스크린샷을 캡쳐해 `.reviews/screenshots/`에 저장. 텍스트 audit과 함께 첨부.
-## 5. DESIGN.md 강제 재독
-**Anti-pattern**: 이전 review에서 읽은 DESIGN.md를 캐싱해 재사용 → memory hallucination 위험.
-→ 매 호출마다 DESIGN.md를 **다시 read**. 읽은 timestamp를 report 헤더에 명시.
-## 6. Anti-patterns
-- ❌ "looks good" rubber-stamp (final-qa 동일 룰. designer-review도 "전반적으로 괜찮음" 식 응답 금지)
-- ❌ DESIGN.md 안 읽고 일반 best practice로 평가
-- ❌ severity inflation (모든 걸 BLOCK)
-- ❌ severity deflation (BLOCK 사안을 FYI로)
-- ❌ Fix suggestion 없는 issue (반드시 actionable)
-- ❌ Line ref 없는 issue (`somewhere in the file` 금지)
-## 7. 1회 revision 후 재호출 시
-input에 `prior_report_path` 포함되면:
-- 이전 BLOCK/WARN 항목을 list로 추출
-- artifact 재read
-- 항목별로 RESOLVED / UNRESOLVED / NEW로 표시
-Round 2에도 UNRESOLVED BLOCK 있으면 orchestrator로 BLOCK escalation.
-## 8. 취향 캡처 — review → taste loop (최종 phase)
-review report를 emit한 **후에** 이번 run의 finding들을 한 번 스캔해, 반복 패턴을 취향 후보로 제안한다. report 자체는 advisory 그대로 — 이 phase가 유일하게 쓰기를 일으킬 수 있는 지점이고, 그것도 **사용자가 동의한 경우에만**.
-### 후보 조건 (둘 중 하나)
-1. **같은 axis ≥2회** — 이번 run의 finding을 axis로 분류(radius / color / spacing / typo / voice)했을 때 같은 axis가 2회 이상 등장
-2. **기존 pending preference와 매칭** — `.omd/preferences.md`가 존재하면 read해서, finding이 `status: pending` 엔트리의 scope와 같은 축이면 1회여도 후보 (반복의 증거가 이미 파일에 있으므로)
-`.omd/preferences.md`가 없으면 조건 2는 생략 — 파일을 만들지 않는다.
-### 제안 (run당 질문 1개 max)
-후보가 1개 이상이면 **단 한 번** 묻는다: "이 패턴, 취향으로 기록할까요?"
-- **Claude Code**: AskUserQuestion — 후보가 여러 개면 multiSelect 옵션으로 묶어서 한 질문에 (후보당 한 줄: axis + 발생 횟수 + 요약)
-- **다른 채널 (Codex / OpenCode)**: 같은 내용을 산문 질문 하나로
-### 동의 시 기록
-선택된 후보는 **omd:remember 스킬의 기록 절차를 그대로 수행**해 기록한다 — 포맷을 손으로 흉내 내 직접 append하지 말 것 (writer는 omd:remember 하나; id 생성·scope 매핑·frontmatter 생성·heading 규칙 전부 그 절차를 따른다):
-- `signal: review` / `confidence: inferred` / `status: pending`
-- `source_context`: 이번 review report 경로 (예: `.reviews/designer-review-round-1.md`)
-### 금지
-- **자동 기록 금지** — 질문 없이 append 절대 불가 (omd:remember의 "묻지 말고 기록" 룰은 사용자 발화용 — review 추론에는 적용되지 않는다)
-- **자동 fold 금지** — `status: pending`으로만 기록. DESIGN.md 반영은 평소의 fold-in 임계/게이트(omd:learn)가 결정
-- run당 질문 2개 이상 금지 — 후보가 많아도 multiSelect 하나로 배칭
-- 거절된 후보를 같은 세션에서 재제안 금지
-> **수동 검증**: 같은 artifact에서 radius WARN 2건이 나오는 review를 돌리면, report 출력 후 "이 패턴, 취향으로 기록할까요?" 질문이 정확히 1회 뜨고, 동의 시 `.omd/preferences.md`에 `signal: review` / `confidence: inferred` / `status: pending` 엔트리 1개가 append되어야 한다 (DESIGN.md는 변경 없음).