zugzbot 1.0.21 → 1.0.23

package/.opencode/oh-my-design/.claude/skills/omd-add-reference/SKILL.md

@@ -1,381 +0,0 @@
----
-name: omd:add-reference
-description: "URL 또는 brand id 입력 → 3-tier 검증 파이프라인(Tier 1 라이브 + Tier 2 getdesign/refero + Tier 3 reconcile)으로 references/<id>/DESIGN.md를 신규 생성(CREATE)하거나 기존 섹션을 검증·갱신(UPDATE). '레퍼런스 추가/수정', 'X DS 검증', 'X 컴포넌트 다시 뽑아줘' 류에 트리거."
-argument-hint: "<url|id> [--mode create|update|update-§N] [--style-ref <id>]"
-user-invocable: true
----
-
-# omd:add-reference
-
-`spec/verification-pipeline.md`의 3-tier 파이프라인을 기계적으로 실행하는 스킬. **CREATE / UPDATE / SYNC** 세 모드.
-
-## 모드 라우팅 (Phase 0)
-
-| 입력 | 모드 |
-|---|---|
-| `https://...` | **CREATE** — 새 reference 9-section 생성 |
-| `<id>` (web/references/<id>/ 존재) | **UPDATE** — §4 (기본) 또는 지정 섹션 검증·갱신 |
-| `<id>` (없음) | 에러 — URL로 CREATE할지 묻기 |
-| `--mode sync` | **SYNC** — count·landing·README·gh description만 갱신 |
-
-CREATE에는 항상 SYNC가 뒤따른다 (count +1).
-
----
-
-## 핵심 원칙 (모든 모드 공통)
-
-1. **Tier 1 = 절대 우선.** brand의 공식 DS docs 또는 라이브 사이트 computed style이 truth.
-2. **Tier 2 = 교차검증.** getdesign.md/<id> + styles.refero.design/?q=<brand> **둘 다 시도**. 한쪽만 성공해도 OK, 둘 다 실패면 footer에 명시.
-3. **컨플릭트 silent 해결 금지.** Tier 1 ↔ Tier 2 충돌 시 채팅으로 보고 후 결정.
-4. **거짓 주장 금지.** "확인했다"고 쓰려면 같은 턴에 tool call 증거 필요. refero "없음" 단정은 `?q=` 검색 + 스크롤 시도 후만.
-5. **검증 footer 의무.** 갱신한 섹션 끝에 `Verified: YYYY-MM-DD` + 모든 source URL 기록.
-
----
-
-## CREATE 모드
-
-### Phase 1 — id 결정
-- URL → 도메인에서 id 추출 (예: `kakao.com` → `kakao`)
-- 충돌 시 사용자에게 (덮어쓰기 / 다른 id / abort) 묻기
-
-### Phase 2 — Tier 1 수집
-1. `<brand>.design`, `design.<domain>`, `<brand>/design-system` HEAD
-2. WebSearch: `"<brand>" design system site:<domain>`
-3. GitHub: `gh search repos "<brand> design tokens"`
-4. 발견 시 → 공식 토큰 그대로 추출
-5. **추가**: playwright로 brand 메인 사이트 라이브 inspect (computed style: hero CTA / nav / footer / search input / card)
-6. **🔒 Proof block 작성 (mandatory, `verified >= 2026-06-01` 게이트됨)**: inspect한 raw computed-style를 `web/references/<id>/.verification.md`에 `## Proof — Tier 1 live inspect` 블록으로 기록 — `**Inspected:**` 날짜 + `**Sources:**` URL + `### Raw samples` (≥5줄, 각 줄 = 실제 1개 관측값 with `rgb(`/`#hex`/`px`). 포맷은 `spec/verification-pipeline.md` "Proof Gate" 참조. **footer만 박고 proof 생략 = catalog-integrity 실패.**
-7. **🌏 KR/TW 추가 시 (`country: KR|TW`, `verified >= 2026-06-01`)**: Tier 2(getdesign/refero)는 한국·대만 brand 커버리지가 약함 → Tier 1이 증거를 짊어진다. `spec/regional-sources.yaml`의 `brand_owned`에서 **brand 자체 surface ≥2개**(공식 사이트 / DS docs / 공식 eng-design 블로그 / 공식 GitHub org)를 §4 footer `Tier 1 sources`에 명시. getdesign/refero는 이 ≥2에 **카운트 안 됨**. `discovery` aggregator(요즘IT/velog/iThome/INSIDE)는 brand surface를 **찾는 용도**일 뿐 인용 대상 아님.
-
-### Phase 3 — Tier 2 수집 (둘 다 시도)
-- `WebFetch https://getdesign.md/<id>` — 토큰 + component 스펙
-- playwright `https://styles.refero.design/?q=<brand>` → 결과 카드 클릭 → 페이지 WebFetch
-  - 한 brand에 여러 style 페이지가 있을 수 있음 (ex: Apple = 4개) — 가장 트렌딩한 1-2개 사용
-
-### Phase 4 — Reconcile + 9-section 작성
-`references/stripe/DESIGN.md`를 포맷 레퍼런스로 9 섹션 작성. §4는 canonical schema(variant heading + bullet `Field: value`).
-
-### Phase 4.5 — Machine-readable `tokens:` 블록 (mandatory)
-산문을 다 쓴 뒤, frontmatter에 **DTCG-lite `tokens:` 블록**을 추가한다. 신규 ref는
-Phase 2 라이브 inspect를 이미 했으므로 `source: live-extract`(또는 Tier 2와 reconcile 시 `reconciled`).
-`references/stripe/DESIGN.md`의 tokens 블록을 **스키마 레퍼런스**로 사용:
-
-- 네임스페이스(getdesign.md 정렬): **`colors`**(역할+variant: primary/primary-hover/brand/canvas/foreground/muted/on-primary/hairline/error/success…) · **`typography`**(`family` + 명명 토큰 `{size, weight, lineHeight, tracking, use}`) · **`spacing`**(명명 또는 배열) · **`rounded`**(`sm/md/lg/full`) · `shadow` · **`components`(구조화 — 아래)**.
-- **`components`는 구조화 객체로 작성 (mandatory).** 렌더러(`componentsFromTokens` in `extract-tokens.ts`)가 이 블록을 **직접 읽어** Components 섹션을 그린다(프로즈 §4 파싱보다 우선). 한 컴포넌트당 한 줄, flow style:
-  ```yaml
-  components:
-    button-primary: { type: button, bg: "#1f883d", fg: "#ffffff", radius: "6px", height: "32px", padding: "0 16px", font: "14px / 600", states: "hover #1a7f37", use: "Primary action" }
-    underline-tab:   { type: tab, active: "text #1f2328 + 2px bottom border #fd8c73", use: "Repo tabs" }
-  ```
-  - **`type` 필수** — `button input card badge tab toggle toast dialog listItem avatar` 중 하나(범위 밖은 가장 가까운 것: table/tooltip/banner→card, modal/sheet→dialog, segmented/nav→tab, chip/label→badge, stepper/switch→toggle). 그래야 그룹 헤딩이 아닌 type으로 렌더돼 안 빠진다.
-  - 선택 필드(라이브 inspect/DS에서 측정한 것만): `bg fg border radius padding height font shadow hover focus active disabled states use`. tab은 `active`에 "Npx bottom border #hex"를 넣어야 언더라인이 그려진다.
-  - **`components_harvested: true`** 를 블록에 추가. (상세 스키마: `spec/components-schema.md`)
-  - §4 프로즈(Component Stylings)는 **사람이 읽는 용도로 유지**하되, 렌더 소스는 구조화 토큰이다.
-- 결정론 보조: `GLOBAL_ROOT=$(npm root -g) node web/scripts/extract-tokens.mjs <id> --json` 으로 라이브 후보·ΔE drift 확보 → LLM이 canonical 역할/값 확정(legacy-vs-live 판별, Google/임베드 오탐 거부).
-- **정합성 필수**: `tokens.colors`의 모든 hex는 **산문(§2)·primary_color 어딘가에 존재**해야 한다(미존재 → 산문에 명시하거나 토큰 수정). catalog-integrity의 token↔prose 게이트가 강제한다. 컴포넌트 bg/fg hex도 이미 grounding된 colors를 재사용(새 hex 발명 금지).
-- 로고 (🚨 **`type: favicon`이면 slug는 도메인이 아니라 완전한 이미지 URL**): 렌더러 `web/src/lib/logos.ts`는 favicon slug를 **그대로** `<img src>`로 사용한다. bare 도메인을 넣으면 로고가 깨진다 (2026-06-10 batch에서 teamblind/abema/timee 3건 발생). 우선순위:
-  1. `https://www.google.com/s2/favicons?domain=<도메인>&sz=128` — `curl -sL`로 받아 **450바이트 미만이면 generic globe** → 다음 후보로
-  2. brand CDN의 favicon/앱아이콘 직접 URL (예: imweb vendor-cdn)
-  3. `type: simpleicons, slug: <slug>` — `https://cdn.simpleicons.org/<slug>` 200 확인
-  4. `type: github, slug: <org>` — org avatar
-- 작성 후 **단일 게이트 명령** 실행 (catalog-integrity 전 항목 + strict-YAML 파스 + 로고 liveness를 registry 빌드 없이 검사):
-  ```bash
-  node web/scripts/verify-reference.mjs <id>
-  ```
-  전 항목 PASS 전엔 완료 선언 금지. (보조: `node web/scripts/token-status.mjs --components`)
-
-### Phase 5 — _research.md + footer
-- `_research.md`: Tier별 source URL, 신뢰도, 추출 일자
-- §4 footer: `Verified` / `Tier 1 sources` / `Tier 2 sources` / `Conflicts unresolved`
-
-### Phase 6 — SYNC (CREATE 자동 후행)
-아래 SYNC 모드 절차 실행.
-
----
-
-## UPDATE 모드
-
-기존 reference를 풀 검증·갱신. **기본 대상은 §4 Components + 누락된 §10-15 Philosophy**. `--mode update-§N` 으로 단일 섹션만 지정 가능. `--no-philosophy` 로 §10-15 fill 스킵.
-
-### Default behavior (사용자 지정 없을 때)
-1. §4 풀 reconcile (모든 변형을 conflict matrix에 통과시키고 다시 작성)
-2. `grep -c "^## 10\." DESIGN.md` == 0 이면 §10-15 generation 추가 (omd-init / 기존 augment 절차 활용 — 아래 P-Phase)
-3. footer 박음
-
-**footer-only 갱신은 금지.** "verified stamp만 박고 §4 본문 안 건드림"은 사용자 신뢰 깨는 안티패턴 — 이전 batch 1·2 (Toss/Airbnb/Spotify/Kakao + Stripe/Linear/Vercel/Notion/Figma)에서 했던 실수. 지금부턴 모든 brand가 Apple 식 풀 reconcile.
-
-### Phase U1 — pre-check
-- `web/references/<id>/DESIGN.md` 존재 확인
-- 갱신 대상 섹션 read
-
-### Phase U2 — Tier 1 라이브 inspect
-playwright로 brand 메인 사이트 + 핵심 surface 1-2개 navigate → `browser_evaluate(getComputedStyle)` 로 raw observation 수집:
-```js
-const els = document.querySelectorAll('button, a[role=button], input, [role=tab]');
-// 각 element의 bg / color / radius / padding / height / fontSize / fontWeight / border 추출
-```
-- 마케팅 surface와 commerce/checkout surface가 분리된 brand는 **둘 다** 방문 (Apple 패턴)
-- raw → `web/references/<id>/.verification.md`에 기록
-
-### Phase U3 — Tier 2 교차검증
-1. `WebFetch https://getdesign.md/<id>` — 둘 다 표/스펙 추출
-2. playwright `?q=<brand>` 검색 → refero 페이지 WebFetch
-3. 둘 다 raw observation으로 `.verification.md`에 기록
-
-### Phase U4 — Conflict matrix
-`.verification.md`에 다음 표 작성:
-```
-| Field | Tier 1 (live) | getdesign | refero | Resolution |
-```
-**해결 규칙**:
-- 셋 다 일치 → 그대로
-- Tier 1 ≠ Tier 2 → Tier 1이 라이브 inspect 가능했으면 Tier 1 우선, 아니면 Tier 2 다수결
-- 둘이 갈리고 Tier 1 침묵 → `(unresolved)` 플래그 + 채팅으로 사용자 보고
-- 이전에 잘못 들어간 값(Apple `#0066cc` 9999px 케이스 등) 발견 시 **롤백 사유** 명시
-
-### Phase U5 — Write
-- §4를 canonical schema로 재작성:
-  ```
-  ### <Component class>
-
-  **<Variant name>**
-  - Background: <value>
-  - Text: <value>
-  - Border: <value>
-  - Radius: <value>
-  - Padding: <value>
-  - Font: <size> / <weight> / <family>
-  - Use: <one-line context>
-  ```
-
-#### 🚨 §4 작성 강제 규칙 (이거 어기면 builder/components 섹션이 통째로 안 나옴)
-
-**1줄 = 1필드.** 절대 슬래시(`/`)나 콤마로 여러 필드를 한 줄에 결합하지 말 것. 파서는 `^- Field: value$` 패턴만 인식한다.
-
-❌ **금지** — 1줄 multi-field (KRDS 초기 작성 케이스, 36 variants 중 35개가 안 보였음):
-```
-- Background: `#256EF4` / Text: `#FFFFFF` / Border: 1px solid `#256EF4`
-```
-
-✅ **필수** — 1필드 1불릿:
-```
-- Background: `#256EF4`
-- Text: `#FFFFFF`
-- Border: 1px solid `#256EF4`
-```
-
-**측정 못 한 필드는 불릿째 생략.** 값이 없으면 `- Padding: not measured` / `- Radius: n/a` / `not specified` 같은 placeholder를 절대 쓰지 말 것 — component preview가 그 문자열을 실제 스펙 값처럼 렌더한다. variant 블록은 측정한 필드만 나열한다 (Background+Text+Radius만 있어도 OK). catalog-integrity가 placeholder lint로 막는다.
-
-**State variants (Hover/Pressed/Focus/Disabled/Required/Error)**도 같은 variant 블록 안에서 별도 `- Hover:` / `- Pressed:` 불릿으로. 별도 `**Variant**` 블록을 따로 만들지 않는다.
-
-**Size scale (xsmall/small/medium/large/xlarge 등)**은 1개 `**Variant**`에 default 사이즈 값만 불릿으로 적고, 나머지 사이즈는 그 블록 뒤에 markdown 테이블/프로즈로 보강. variant를 5개로 쪼개지 않는다.
-
-**자가 검증 (write 직후 반드시 실행)** — 수기 grep 대신 단일 게이트:
-```bash
-node web/scripts/verify-reference.mjs <id>
-```
-슬래시 multi-field / placeholder / §1 헤더 / proof / 토큰 grounding / 로고 liveness까지 한 번에 검사한다. FAIL이 1개라도 있으면 → fix → 재실행. 통과 못하면 commit 금지.
-- 끝에 verification footer:
-  ```
-  ---
-  **Verified:** YYYY-MM-DD
-  **Tier 1 sources:** <list>
-  **Tier 2 sources:** <list>
-  **Conflicts unresolved:** <list or "none">
-  ```
-
-### Phase U6 — Tests + smoke
-1. `cd web && npm test --silent` — 215 passing 유지
-2. `web/src/lib/extract-components.test.ts`에 canonical default variant assertion 추가 (해당 brand 처음 검증 시)
-3. 시각 smoke: `/reference/<id>` 로컬에서 띄워서 white-on-white / circular-as-ellipse / radius cap regression 없는지 확인
-
-UPDATE는 SYNC를 트리거하지 않는다 (count 변동 없음).
-
----
-
-## Phase P — Philosophy fill (§10-15)
-
-CREATE 모드에서는 항상 실행. UPDATE 모드에서는 §10-15 누락 시 자동 실행.
-
-### P-1. Style ref pick
-- KR brand → `toss` 톤 차용
-- JP brand → `line`
-- TW brand → `pinkoi`
-- US brand → `claude` 또는 `stripe` (engineering tone이면 stripe)
-- 기타 → `notion` (중립)
-- `--style-ref <id>` flag로 override
-
-### P-2. Source 수집
-- `<domain>/about`, `<domain>/brand`, `<domain>/manifesto`, `<domain>/mission`
-- 창업자 인터뷰·에세이
-- WebSearch: `"<brand>" voice tone guidelines`, `"<brand>" brand philosophy`
-- 최소 3 source 권장
-
-### P-3. 섹션 생성 (OmD v0.1 spec)
-- §10 Voice & Tone — 2-3 voice adjectives + Do/Don't 표 + ≥3 voice samples (각각 verification 주석)
-- §11 Brand Narrative — 2-3 문단 origin → mission → why-now + 임원 인용 ≥1
-- §12 Principles — 3-5 numbered, 각각 *UI implication:* 라인
-- §13 Personas — 2-4 archetypes ≤ 3 sentences, 상단 disclaimer
-- §14 States — Empty/Loading/Error(≥2)/Success/Skeleton/Disabled 6 카테고리 모두
-- §15 Motion & Easing — duration scale + easing tokens + motion rules
-
-### P-4. Validate
-- `grep -c "^## 1[0-5]\." DESIGN.md` == 6 확인
-- voice samples ≥3, principles ≥3, states ≥10 행
-- 거짓 인용 없는지 (illustrative는 인라인 주석으로 명시)
-
-### P-5. Append
-DESIGN.md §9 끝에 §10-15 append. 프론트매터 `omd: 0.1` 없으면 추가.
-
----
-
-## SYNC 모드
-
-CREATE 시 자동, 수동으로도 호출 가능.
-
-1. **References count 갱신**: 현재 `ls -d web/references/*/ | wc -l` 결과를 다음 위치에 반영
-   - `README.md`, `README.ko.md`, `README.ja.md`, `README.zh-TW.md` — "67 brand DESIGN.md" 류
-   - `web/src/components/landing-v2/hero.tsx` 또는 `sections.tsx` — 카피 내 숫자
-   - `web/public/llms.txt` — 카탈로그 line
-   - GitHub repo description: 이미 **"100+ real company design systems"** count-agnostic 문구로 고정 (2026-05-15 결정 — 매 batch마다 숫자 갱신 안 함). 한 단계 (e.g. 200+ 도달) 넘기 전까진 `gh repo edit` 호출 금지.
-2. **Symlink sanity**: 루트 `references` → `web/references` symlink 확인 (이미 있으면 skip)
-3. **Reference fingerprints**: `data/reference-fingerprints.json`, `.claude/data/reference-fingerprints.json`, `.codex/data/reference-fingerprints.json` 새 entry append
-4. 사용자에게 git status 보여주고 commit 여부 묻지 않음 (memory: no auto-commits)
-
----
-
-## Reusable utilities
-
-### refero 검색 흐름
-```
-1. mcp__playwright__browser_navigate("https://styles.refero.design/?q=<brand>")
-2. mcp__playwright__browser_snapshot — 결과 카드의 /style/<uuid> URL 수집
-3. 각 카드를 WebFetch로 추출 (depth가 필요하면 navigate 후 evaluate)
-```
-
-### apple.com 류 라이브 inspect 패턴
-```js
-const out = [];
-document.querySelectorAll('button, a, input').forEach(el => {
-  const cs = getComputedStyle(el);
-  const r = cs.borderRadius;
-  const bg = cs.backgroundColor;
-  if ((bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') && (r === '0px')) return;
-  const rect = el.getBoundingClientRect();
-  if (rect.height < 24) return;
-  out.push({
-    text: (el.textContent||el.getAttribute('aria-label')||'').trim().slice(0,40),
-    bg, color: cs.color, radius: r,
-    padding: cs.padding, h: Math.round(rect.height),
-    fontSize: cs.fontSize, fontWeight: cs.fontWeight,
-    cls: el.className.toString().slice(0, 60),
-  });
-});
-return out.slice(0, 30);
-```
-
----
-
-## 안티패턴 (절대 금지)
-
-- ❌ Tier 2 전혀 시도 안 하고 "확인했음" 주장
-- ❌ refero "없음" 결론을 단일 스크롤에서 내림
-- ❌ Tier 1 라이브 인 inspect 없이 §4 컴포넌트 값 작성
-- ❌ 검증 footer 누락
-- ❌ 충돌 silent 해결
-- ❌ getdesign.md 표시값을 Tier 1로 취급 (Tier 2임)
-- ❌ **Proof block 없이 footer만 `Verified` 박기** — `verified >= 2026-06-01` ref은 `.verification.md`에 `## Proof` 블록(≥5 raw sample + URL + 날짜) 필수. footer-only stamp = catalog-integrity 실패. (`spec/verification-pipeline.md` Proof Gate)
-- ❌ **§4 필드에 placeholder 값** (`not measured` / `not specified` / `n/a` / `tbd`) — 측정 못 한 필드는 불릿째 생략. preview가 문자열을 그대로 렌더해서 깨져 보인다. catalog-integrity placeholder lint가 막음.
-- ❌ **§7 Do's and Don'ts를 `**Do**` 볼드 헤더나 `- Do …` 평문으로 작성** — 파서(`extractGuidelines`)는 **`### Do` / `### Don't` 헤더** 또는 인라인 `- **DO**` 불릿만 인식한다. 그 외 형식은 0개로 처리돼 preview Guidelines 섹션이 통째로 빈다. 반드시 `### Do` + 불릿 / `### Don't` + 불릿 형식. (don't 불릿은 맨 앞 "Don't" 빼고 적기 — 섹션 헤더가 컨텍스트 제공). catalog-integrity guideline advisory가 감지.
-- ❌ **KR/TW ref인데 Tier 1 source가 getdesign/refero뿐** — `verified >= 2026-06-01` KR/TW는 brand-owned regional source ≥2 필수 (`spec/regional-sources.yaml`). 서구 카탈로그는 Tier 2일 뿐 카운트 안 됨.
-- ❌ **새 reference 추가 후 SYNC phase 안 돌리고 종료** — fingerprints / API mapping / logos / docs SEO 카운트가 mismatch. 단일 추가도 SYNC 필수 (아래 Phase 5 참조).
-- ❌ **`logo.type: favicon`에 bare 도메인 slug** — 렌더러는 slug를 그대로 `<img src>`에 넣는다. `slug: abema.tv`는 로고 깨짐 (2026-06-10 batch 3건). 반드시 완전한 URL + `verify-reference.mjs`의 logo-live 게이트 통과.
-- ❌ **tokens YAML flow-style에서 콜론 뒤 공백 누락** — `feature-title:{ size: ... }`는 strict YAML 파스 실패 → build-registry가 ref 전체를 거부 (2026-06-10 stores 케이스). `key: {` 형식 + verify-reference의 yaml-strict-parse 게이트로 차단.
-- ❌ **수기 grep 자가검증으로 끝내기** — 자가검증은 CI 게이트와 같은 코드(`verify-reference.mjs`)여야 한다. 부분집합 grep은 YAML/로고 클래스를 놓친다.
-- ❌ **§1 헤더를 비표준으로 변경** — `## 1. Visual Theme & Atmosphere` 가 catalog canonical. "Overview" / "Identity" / "Foundation tokens" / `## §1` 등 변형 쓰면 web preview Hero 카드의 description이 빈칸으로 렌더 (2026-05-14 kr10 batch에서 flex/upbit/kbank 3건 발생). 모든 §N 헤더는 `## N. <Title>` 형식 + §1은 무조건 `Visual Theme & Atmosphere` + 첫 단락은 산문 prose (테이블/리스트/서브헤딩 금지). 검증: `grep -L '^## 1\. Visual Theme' references/*/DESIGN.md` 결과 0.
-
----
-
-## Phase 5 — SYNC (registry-driven, 새 reference 추가 직후 mandatory)
-
-Hand-maintained map drift was the recurring batch-bug (homepage-urls.ts 2-batch miss). It's eliminated: every brand attribute lives in the **canonical frontmatter** at the top of `references/<id>/DESIGN.md`, and `web/src/data/registry.generated.ts` is the typed projection consumed by every UI surface.
-
-### 1. Canonical frontmatter (the only place you edit data)
-Required keys per id (schema doc lives at the top of `registry.generated.ts`):
-
-```yaml
----
-id: <slug>
-name: <English display>
-display_name_kr: <한글 표시>    # optional
-country: KR|US|JP|TW|UK|DE|FR|IT
-category: ecommerce|fintech|saas|ai|consumer-tech|education|productivity|developer-tools|design-tools|backend-devops|automotive|marketing|government|healthcare
-homepage: https://...
-primary_color: "#hex"
-logo:
-  type: favicon|simpleicons|github
-  slug: <favicon→완전한 이미지 URL | simpleicons→slug | github→org>   # favicon slug는 URL 그대로 렌더됨 — bare 도메인 금지
-verified: YYYY-MM-DD
-omd: 0.1
-ds:                              # optional, Tier-1 official DS only
-  name: ...
-  url: ...
-  type: system|brand
-  description: ...
-  og_image: ...                  # optional
----
-```
-
-### 2. Regenerate + propagate + gate — 단일 명령
-```bash
-node web/scripts/sync-catalog.mjs        # --dry-run으로 미리보기 가능
-```
-이 한 명령이 ① build-registry ② fingerprints ×3 (누락 id append + count + 미러 동기화) ③ design-md mirror 재복사 ④ README ×4 / llms.txt / app layout 카운트 문자열 ⑤ llms.txt Examples append ⑥ `npm test` 까지 수행한다. vitest catalog-integrity가 그린이면 API route / logos / tokens / design-systems 모듈은 registry에서 자동 반영된다.
-
-스크립트가 생성하는 fingerprint의 `tone_keywords`는 §1에서 휴리스틱 추출 — 어색하면 손으로 다듬는다.
-
-### 3. 여전히 수동인 것 (스크립트가 안 건드림)
-- CHANGELOG.md 엔트리 + `package.json` patch bump (omd-cli memory rule)
-- git commit (memory: no auto-commits)
-
-### 4. Sub-agent self-verification (mandatory at end of CREATE/UPDATE)
-```bash
-node web/scripts/verify-reference.mjs <id>
-```
-registry 빌드 없이 단독 실행 가능 — 서브에이전트는 이걸로 자가검증한다 (catalog-integrity per-ref 항목과 1:1 + strict-YAML + 로고 liveness). Report pass/fail and the exact failing gate. Do not declare done before this is green. (sync-catalog 후 추가 보증이 필요하면 `cd web && npm test -- --run __tests__/catalog-integrity.test.ts -t "<id>"`.)
-
----
-
-## Batch 서브에이전트 프로토콜 (5~20개 일괄 추가)
-
-검수 리소스 폭증의 근본 원인은 "에이전트마다 다른 자가검증 + 중앙에서 재검수"의 이중화였다. 프로토콜:
-
-1. **오케스트레이터**: brand 목록 확정 (id/homepage/country/category_hint/tier1_hints) → brand당 서브에이전트 1개 병렬 디스패치 (한 wave에 5~10개; 토큰 압박 시 5개씩). 서브에이전트 프롬프트 = **`.claude/skills/omd-add-reference/batch-instructions.md` 경로 + brand 파라미터 + verified 날짜(오늘)** — 지침 본문을 프롬프트에 복사하지 말고 파일을 읽게 한다.
-2. **서브에이전트 권한 경계 (강제)**:
-   - 쓰기는 `web/references/<id>/{DESIGN.md,.verification.md}` **2파일만**. registry/fingerprints/README/llms/design-md/테스트는 절대 건드리지 않는다 (병렬 충돌 방지 — SYNC는 중앙 1회).
-   - `npm test`/`build-registry`/git 실행 금지.
-   - 종료 조건 = `node web/scripts/verify-reference.mjs <id>` 전 게이트 PASS. FAIL이 남은 채 보고 금지.
-   - 사이트 접근 불가/콘텐츠 빈약 → 파일 생성 없이 `status: INFEASIBLE` 보고 (오케스트레이터가 대체 brand 투입).
-3. **보고 스키마 (고정)**: `status / id / category / primary_color / logo(type/slug/bytes) / tier1 / tier2 / verify-reference 결과줄 / conflicts / notes ≤2줄`.
-4. **오케스트레이터 마무리**: 전 에이전트 OK 확인 → `node web/scripts/sync-catalog.mjs` 1회 → CHANGELOG + package.json bump → dev 서버 띄워 신규 `/reference/<id>` 2~3개 시각 smoke → 결과 보고.
-
-## 트리거 (자연어 OK — 슬래시 없이 호출되어도 동작)
-
-- "X 레퍼런스 추가" / "X 새로 만들어줘" / URL 한 줄 → CREATE
-- "X 컴포넌트 다시 뽑아줘" / "X §4 검증" / "X 잘못된거 같아" → UPDATE
-- "67 카운트 맞춰줘" / "landing 동기화" / "리퍼런스 동기화" → SYNC
-
-### Batch / 자연어 인식
-
-- "next 5", "다음 5개", "다음 10개" → 알파벳 순으로 미검증(no `**Verified:**` footer) brand 중 N개를 골라 UPDATE 일괄
-- "남은거 다 처리해줘", "67 migration 처리해줘" → 미검증 전체를 N=5씩 batch로 진행하고 매 batch 끝에 status 보고
-- "stripe부터 5개" → 알파벳 정렬 위치 stripe부터 5개 (stripe/supabase/superhuman/tesla/together.ai)
-- "<brand1> <brand2> <brand3>" 공백 list → 명시된 brand 일괄
-
-### Batch 진행 절차
-
-1. `grep -L '^\*\*Verified:\*\*' web/references/*/DESIGN.md` 로 미검증 list 산출
-2. 사용자 지정 N(또는 전체)만큼 head/range 선택
-3. 각 brand에 대해 UPDATE phase U2~U5 실행 (parallel WebFetch + sequential playwright session)
-4. batch 끝마다 `npm test --silent` 실행
-5. 보고 형식: `완료: <list> | 남은 수: <count> | 다음 batch 후보: <head 5>`

package/.opencode/oh-my-design/.claude/skills/omd-add-reference/batch-instructions.md

@@ -1,111 +0,0 @@
-# OMD Reference CREATE — Batch 서브에이전트 공용 지침
-
-> 오케스트레이터는 brand당 서브에이전트 1개를 디스패치하며, 프롬프트에 **이 파일 경로 + brand 파라미터**(id / name / display_name_kr(KR만) / country / homepage / category_hint / tier1_hints / verified 날짜)를 전달한다. 서브에이전트는 이 지침에 파라미터를 대입해 실행한다.
-> (검증 효과 실측: 2026-06-11 KR 5종 batch — 5/5 첫 실행에 전 게이트 그린, 중앙 수정 0건.)
-
-너는 oh-my-design 카탈로그에 **새 레퍼런스 1개**를 CREATE 모드로 추가한다. 작업 루트는 이 파일 기준 repo 루트(`web/references/`가 있는 디렉터리).
-
-## 0. 선행 읽기 (반드시, 순서대로)
-1. `.claude/skills/omd-add-reference/SKILL.md` — 실행할 스킬 본문
-2. `spec/verification-pipeline.md` — 3-tier + Proof Gate
-3. `spec/components-schema.md` — tokens.components 스키마
-4. (country가 KR 또는 TW일 때만) `spec/regional-sources.yaml`
-5. 포맷 레퍼런스: `web/references/stripe/DESIGN.md` — frontmatter tokens 스키마 + §1–15 구조
-6. 최신 게이트 통과 예시: `web/references/finda/DESIGN.md` + `web/references/finda/.verification.md`
-
-## 1. 산출물 — 정확히 이 2개 파일만 생성
-- `web/references/<id>/DESIGN.md`
-- `web/references/<id>/.verification.md`
-
-**이 디렉터리 밖의 어떤 파일도 수정·생성 금지.** registry, fingerprints, README, llms.txt, design-md mirror, 테스트는 오케스트레이터가 SYNC 1회로 중앙 처리한다. `npm test`·`build-registry`·`sync-catalog`·git 명령 실행 금지.
-
-## 2. Tier 1 수집
-1. tier1_hints의 공식 DS/디자인 사이트 존재 확인 (WebFetch/WebSearch). 있으면 토큰·컴포넌트 스펙 추출.
-2. **라이브 inspect (필수)** — 글로벌 playwright를 node로 직접 실행 (MCP 아님):
-
-```bash
-node --input-type=module -e "
-import { pathToFileURL } from 'node:url';
-import { execSync } from 'node:child_process';
-const GROOT = execSync('npm root -g').toString().trim();
-const pw = await import(pathToFileURL(GROOT + '/playwright/index.js').href);
-const chromium = pw.chromium ?? pw.default?.chromium;
-const b = await chromium.launch({ headless: true });
-const p = await b.newPage({ viewport: { width: 1440, height: 900 } });
-await p.goto('<HOMEPAGE>', { timeout: 45000, waitUntil: 'domcontentloaded' });
-await p.waitForTimeout(3500);
-// 모달/쿠키 dismiss
-for (let i = 0; i < 2; i++) { await p.keyboard.press('Escape').catch(()=>{}); await p.waitForTimeout(150); }
-await p.evaluate(() => { document.querySelectorAll('[role=dialog],[aria-modal=true],[class*=modal i],[class*=popup i],[class*=overlay i]').forEach(el => { const s = getComputedStyle(el); if ((s.position==='fixed'||s.position==='absolute') && parseInt(s.zIndex||'0')>=50 && el.offsetHeight>150) el.remove(); }); });
-const out = await p.evaluate(() => {
-  const res = { title: document.title, body: {}, els: [], bgFreq: {}, fgFreq: {} };
-  const bcs = getComputedStyle(document.body);
-  res.body = { font: bcs.fontFamily, color: bcs.color, size: bcs.fontSize, lh: bcs.lineHeight, bg: bcs.backgroundColor };
-  document.querySelectorAll('button, a, input, [role=button], [role=tab], h1, h2, h3').forEach(el => {
-    const cs = getComputedStyle(el); const r = el.getBoundingClientRect();
-    if (r.height < 18 || r.width < 10) return;
-    res.els.push({ tag: el.tagName, text: (el.textContent||el.getAttribute('aria-label')||'').trim().slice(0,40), bg: cs.backgroundColor, color: cs.color, radius: cs.borderRadius, padding: cs.padding, h: Math.round(r.height), fontSize: cs.fontSize, fontWeight: cs.fontWeight, border: cs.border, shadow: cs.boxShadow.slice(0,60), font: cs.fontFamily.slice(0,40) });
-  });
-  document.querySelectorAll('*').forEach(el => { const cs = getComputedStyle(el); const bg = cs.backgroundColor; if (bg && bg !== 'rgba(0, 0, 0, 0)') res.bgFreq[bg] = (res.bgFreq[bg]||0)+1; res.fgFreq[cs.color] = (res.fgFreq[cs.color]||0)+1; });
-  res.els = res.els.slice(0, 50);
-  res.bgFreq = Object.fromEntries(Object.entries(res.bgFreq).sort((a,b)=>b[1]-a[1]).slice(0,12));
-  res.fgFreq = Object.fromEntries(Object.entries(res.fgFreq).sort((a,b)=>b[1]-a[1]).slice(0,12));
-  return res;
-});
-console.log(JSON.stringify(out, null, 1));
-await b.close();
-" 2>&1 | head -200
-```
-
-- 홈페이지 외에 **핵심 surface 1개 이상 추가 방문** (가격/제품/스토어 페이지 등). 공식 DS 문서 사이트가 있으면 그것도 라이브 inspect 가능.
-- 봇 차단/타임아웃이면 `waitUntil:'load'`, 현실적인 Chrome UA + locale, www 유무 변형, `channel:'chrome'`(headed) 순으로 재시도. (Akamai류는 headed Chrome만 통과하는 경우 있음 — adobe/salesforce 사례.)
-
-## 3. Tier 2 수집 (둘 다 시도, 실패해도 진행하되 footer에 명시)
-- `WebFetch https://getdesign.md/<id>` (404면 brand명 변형 1회 시도)
-- refero: playwright로 `https://styles.refero.design/?q=<brand>` navigate → `/style/` 링크 수집 → WebFetch
-- Tier 1 ↔ Tier 2 충돌 시 silent 해결 금지 — `.verification.md` conflict matrix에 기록하고, 라이브 inspect 값 우선. 미해결은 footer `Conflicts unresolved`에 명시.
-
-## 4. DESIGN.md 작성 — 머신 게이트 (verify-reference.mjs가 전부 검사)
-1. frontmatter 필수키: `id`, `name`, (`display_name_kr` KR만), `country`, `category`(enum: ecommerce|fintech|saas|ai|consumer-tech|education|productivity|developer-tools|design-tools|backend-devops|automotive|marketing|government|healthcare), `homepage`, `primary_color: "#6자리hex"`, `logo: {type, slug}`, `verified: "<오케스트레이터 지정 날짜>"`, `omd: "0.1"`, `tokens:` 블록
-2. frontmatter(여는 `---`와 닫는 `---` 사이)에 markdown heading(`## `)이나 col-0 불릿(`- `) 누출 금지 (tokens: 블록의 들여쓰인 내용 제외). tokens flow-style은 콜론 뒤 공백 필수 — `key:{`는 strict YAML 파스 실패.
-3. §1 헤더는 정확히 `## 1. Visual Theme & Atmosphere` + **다음 줄 공백** + 첫 비공백 줄은 산문 prose. §2–§15도 `## N. <Title>` 형식 (stripe 헤더 그대로)
-4. §4 Component Stylings: `**Variant**` 헤딩 + `- Field: value` 불릿. **1불릿 1필드** — 슬래시/콤마 결합 금지. 측정 못 한 필드는 불릿째 생략 (placeholder 금지). State는 같은 블록 안 `- Hover:` 불릿으로.
-5. §4 끝 footer: `**Verified:**` / `**Tier 1 sources:**`(URL≥1) / `**Tier 2 sources:**` / `**Conflicts unresolved:**`
-6. KR/TW만: Tier 1 sources에 **brand-owned 소스 URL ≥2** (getdesign·refero·google favicon proxy 카운트 안 됨)
-7. `.verification.md`: `## Proof — Tier 1 live inspect` 헤딩 + `**Inspected:**` 날짜 + `**Sources:**` URL + `### Raw samples` 실측 ≥10줄 (각 줄에 rgb(/hex/px). finda 포맷). conflict matrix도 이 파일에.
-8. `tokens.colors`의 모든 hex는 본문 산문(§2 권장)에 동일 문자열로 등장해야 함.
-9. `tokens.components`: 구조화 객체, `type`은 button|input|card|badge|tab|toggle|toast|dialog|listItem|avatar, bg/fg/border hex도 본문 grounding, `components_harvested: true`, 최소 4개.
-10. §7은 `### Do` / `### Don't` 헤더 + 불릿 형식만 인정.
-11. §10–15 전부 작성 (Voice & Tone / Brand Narrative / Principles / Personas / States / Motion — 상세 기준은 SKILL.md Phase P).
-
-## 5. 로고 결정 (필수)
-🚨 **`type: favicon`이면 slug는 도메인이 아니라 완전한 이미지 URL** — 렌더러(`web/src/lib/logos.ts`)가 slug를 그대로 `<img src>`로 사용한다. bare 도메인 = 로고 깨짐.
-우선순위:
-1. `slug: "https://www.google.com/s2/favicons?domain=<도메인>&sz=128"` — `curl -sL`로 받아 450바이트 미만이면 generic globe → 다음 후보
-2. brand CDN의 favicon/앱아이콘 직접 URL
-3. `type: simpleicons, slug: <slug>` (cdn.simpleicons.org/<slug> 200 확인)
-4. `type: github, slug: <org>`
-최종 선택과 바이트수를 보고에 포함. 최종 판정은 verify-reference의 `logo-live` 게이트.
-
-## 6. 자가 검증 (write 후 필수 — CI와 동일 코드)
-```bash
-node web/scripts/verify-reference.mjs <id>
-```
-FAIL이 1개라도 있으면 **수정 후 재실행**. 전 항목 PASS 전 종료 금지. 요약줄(`<id>: N/N gates green`)을 보고의 `selfcheck:`에 그대로 넣는다.
-
-## 7. INFEASIBLE 처리
-사이트 접근 불가(차단/타임아웃 반복) 또는 디자인 추출 불가 수준의 빈약한 콘텐츠 → **파일을 만들지 말고** `status: INFEASIBLE` + 사유로 보고 (오케스트레이터가 대체 brand 투입).
-
-## 8. 최종 보고 형식 (마지막 메시지 — 오케스트레이터가 파싱함)
-```
-status: OK | INFEASIBLE
-id: <id>
-category: <확정 카테고리>
-primary_color: <hex>
-logo: <type>/<slug> (<bytes>B)
-tier1: <URL ...>
-tier2: <getdesign 결과 / refero 결과>
-selfcheck: <verify-reference 요약줄 그대로>
-conflicts: <none 또는 목록>
-notes: <특이사항 1-2줄>
-```

package/.opencode/oh-my-design/.claude/skills/omd-apply/SKILL.md

@@ -1,87 +0,0 @@
-<!-- omd:installed-skill — managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->
-
----
-name: omd:apply
-description: "프로젝트 루트의 DESIGN.md를 UI/스타일링/마이크로카피/모션 작업의 authoritative brand context로 적용합니다. 컴포넌트 만들기, CSS 수정, 카피 작성, 애니메이션 튜닝, 디자인 시스템 질문에 트리거됩니다. 사용자 교정이 발생하면 자동으로 omd remember를 호출해 preference log에 기록합니다."
----
-
-# omd:apply — Brand Context Injection
-
-프로젝트 루트의 `DESIGN.md`를 읽고, UI 관련 모든 작업의 authoritative brand context로 사용한다. 작업 도중 사용자가 디자인 선택을 교정하면 `.omd/preferences.md`에 자동 기록한다.
-
-## 트리거 조건
-
-다음 중 하나가 감지되면 SKILL 전체를 로드한다.
-- 새 컴포넌트 생성 (button, card, dialog, nav, form 등)
-- 기존 컴포넌트 스타일 변경 (Tailwind 클래스, CSS, 토큰 값)
-- 마이크로카피 작성/수정 (버튼 라벨, empty state, 에러 메시지, tooltip)
-- 모션/트랜지션 추가
-- 색상·타이포그래피·스페이싱 조정
-- 디자인 시스템 관련 질문
-
-## Phase 1 — DESIGN.md 로드
-
-작업 시작 전:
-
-1. 프로젝트 루트의 `DESIGN.md`를 **전체 읽는다**. 요약하지 말고 실제 파일 내용을 Read 툴로 로드.
-2. `.omd/preferences.md`가 있으면 함께 읽는다. `status: pending` 엔트리들은 아직 DESIGN.md에 반영 안 된 교정사항 — **이들을 DESIGN.md보다 우선** 적용한다.
-3. Precedence 순서:
-   ```
-   .omd/preferences.md (pending) > DESIGN.md > framework defaults
-   ```
-
-DESIGN.md가 없으면 사용자에게 알리고 `omd init` 제안. 임의 생성하지 말 것.
-
-## Phase 2 — Brand Context 적용
-
-작업 전체에서 다음 규칙 강제:
-
-- **Token 값은 DESIGN.md에서만 인용한다.** 임의 hex, 임의 spacing 값, 임의 radius 사용 금지.
-- **Voice 섹션을 마이크로카피에 적용한다.** 문장 길이, 어휘 register, 은유 밀도를 DESIGN.md의 Voice 섹션에 맞춘다.
-- **Component 섹션에 명시된 규칙을 따른다.** 해당 컴포넌트 섹션이 있으면 variant / state / sizes를 그대로 사용.
-- **없는 토큰을 지어내지 않는다.** DESIGN.md에 없는 스펙이 필요하면 사용자에게 "이건 DESIGN.md에 없는데, 어떻게 할까요?" 물어본다.
-
-## Phase 3 — 교정 캡처 (Self-Report)
-
-**이것이 omd:apply의 차별화 포인트다. 반드시 수행.**
-
-턴을 끝내기 전, 이번 턴에 다음 중 하나라도 발생했는지 확인한다:
-
-1. 사용자가 당신의 디자인 선택을 명시적으로 교정 ("no, use X", "actually, Y", "don't use Z", "we never do W")
-2. 사용자가 당신이 쓴 토큰/값을 revert하거나 다른 값으로 교체
-3. 사용자가 "우리는 ~한다/하지 않는다" 형태의 디자인 원칙을 언급
-
-감지되면 턴 종료 전에 **반드시** 다음 커맨드를 Bash 툴로 실행:
-
-```bash
-omd remember "<교정 내용을 한 문장으로 요약>" --context "<수정된 파일 경로 또는 사용자 발화 요약>"
-```
-
-`--agent` 플래그는 생략한다. CLI가 환경변수(`CLAUDECODE`, `CODEX_SESSION_ID`, `OPENCODE` 등)로 자동 감지한다. 명시 override가 필요한 경우만 `--agent <name>`.
-
-예시:
-- 사용자: "CTAs는 절대 uppercase 쓰지 마"
-  → `omd remember "CTA buttons must never use uppercase text"`
-- 사용자가 `bg-brand-600`을 `bg-brand-500`으로 직접 바꿈
-  → `omd remember "primary CTA background should be brand-500, not brand-600" --context "src/components/Button.tsx"`
-- 사용자: "우리는 4pt grid가 아니라 8pt 써"
-  → `omd remember "spacing scale uses 8pt base, not 4pt"`
-
-scope는 note 내용에서 자동 추론된다 (keyword-based). 명시적으로 override가 필요하면 `--scope <value>` 추가 (e.g. `components.button`, `color`, `spacing`, `typography`, `voice`, `motion`, `layout`, `visualTheme`).
-
-## Phase 4 — 확인 메시지 (간결)
-
-교정을 기록했을 때만 턴 끝에 한 줄로 알린다:
-
-```
-📝 Logged to .omd/preferences.md — run `omd learn` to review, `omd learn --apply` to fold into DESIGN.md.
-```
-
-일반 작업에서는 이 메시지 불필요. 과하게 알리지 말 것.
-
-## 금지 사항
-
-- DESIGN.md가 없는데 임의로 생성하지 말 것 (사용자에게 `omd init` 제안).
-- preferences.md에 직접 쓰지 말 것. 항상 `omd remember` 커맨드를 경유.
-- 교정 감지 시 사용자에게 "기록할까요?" 묻지 말 것. 자동 기록 → 사후 한 줄 알림.
-- 같은 턴 내에서 같은 교정을 중복 기록하지 말 것.