omd-add-reference

Name: omd-add-reference
Author: kwakseongjae

365stars35forks

How to install omd-add-reference?

kwakseongjae/oh-my-design/omd-add-reference

$npx -y skills add kwakseongjae/oh-my-design --skill omd-add-reference

Installs into the current project.

Summary

URL 또는 brand id 입력 → 3-tier 검증 파이프라인(Tier 1 라이브 + Tier 2 getdesign/refero + Tier 3 reconcile)으로 references/<id>/DESIGN.md를 신규 생성(CREATE)하거나 기존 섹션을 검증·갱신(UPDATE). '레퍼런스 추가/수정', 'X DS 검증', 'X 컴포넌트 다시 뽑아줘' 류에 트리거.

Files · 1

View on GitHub

SKILL.md

1	# omd:add-reference
2
3	`spec/verification-pipeline.md`의 3-tier 파이프라인을 기계적으로 실행하는 스킬. CREATE / UPDATE / SYNC 세 모드.
4
5	## 모드 라우팅 (Phase 0)
6
7	\| 입력 \| 모드 \|
8	\|---\|---\|
9	\| `https://...` \| CREATE — 새 reference 9-section 생성 \|
10	\| `<id>` (web/references/<id>/ 존재) \| UPDATE — §4 (기본) 또는 지정 섹션 검증·갱신 \|
11	\| `<id>` (없음) \| 에러 — URL로 CREATE할지 묻기 \|
12	\| `--mode sync` \| SYNC — count·landing·README·gh description만 갱신 \|
13
14	CREATE에는 항상 SYNC가 뒤따른다 (count +1).
15
16	---
17
18	## 핵심 원칙 (모든 모드 공통)
19
20	1. Tier 1 = 절대 우선. brand의 공식 DS docs 또는 라이브 사이트 computed style이 truth.
21	2. Tier 2 = 교차검증. getdesign.md/<id> + styles.refero.design/?q=<brand> 둘 다 시도. 한쪽만 성공해도 OK, 둘 다 실패면 footer에 명시.
22	3. 컨플릭트 silent 해결 금지. Tier 1 ↔ Tier 2 충돌 시 채팅으로 보고 후 결정.
23	4. 거짓 주장 금지. "확인했다"고 쓰려면 같은 턴에 tool call 증거 필요. refero "없음" 단정은 `?q=` 검색 + 스크롤 시도 후만.
24	5. 검증 footer 의무. 갱신한 섹션 끝에 `Verified: YYYY-MM-DD` + 모든 source URL 기록.
25	6. 정확성만큼 맥락 깊이도 gate다. reference는 감사 보고서가 아니라 사용자가 브랜드를 이해하고 적용하기 위한 문서다. 검증 메타·미확인 목록으로 §1/§3/§10-13을 대체하지 않는다. 공식 history/rebrand/culture/font 자료로 브랜드의 기원, 현재 변화, 표현 방식, 타이포 자산을 설명하되 각 사실의 evidence class를 분리한다.
26
27	### Context depth contract (CREATE/UPDATE 공통)
28
29	- §1 첫 문단은 `무엇을 하는 브랜드인가 + 무엇이 인상을 구별하는가`를 80–160단어 산문으로 답한다. `current public ecosystem`, `this reference preserves`, `unverified claims are omitted` 같은 검증 메타로 시작하지 않는다.
30	- §1은 가능하면 3층으로 구성한다: product/category → recognizable brand expression → current evolution/rebrand. 최소 2개 공식 source를 `.verification.md`의 context evidence에 남긴다.
31	- §3은 폰트를 한 덩어리로 평탄화하지 않고 다음 evidence class를 분리한다: official product-use, live computed surface-use, official distributed brand asset, declared-only, unresolved.
32	- 공식 발표가 특정 폰트를 앱/제품에 적용했다고 명시하면 live webfont가 없어도 product family 사실로 승격할 수 있다. 이 경우 metadata는 보여주되 browser-loadable source가 없으면 specimen은 unavailable로 둔다.
33	- 공식 배포 서체는 현재 UI 폰트가 아니어도 이름·역사·형태·license boundary를 설명할 가치가 있다. 다만 `tokens.typography.family.ui`에는 넣지 않는다.
34	- 미확인 경계는 해당 주장 근처의 짧은 boundary note나 verification footer에 둔다. 유용한 브랜드 설명 전체를 경고문·상태문서로 바꾸지 않는다.
35	- §10–13은 공식 mission, service principles, stakeholder groups, first-party culture/history 자료가 있으면 `[FILL IN]`보다 그것을 우선 사용한다. 허구 인물/인용/의도는 만들지 않는다.
36
37	---
38
39	## CREATE 모드
40
41	### Phase 1 — id 결정
42	- URL → 도메인에서 id 추출 (예: `kakao.com` → `kakao`)
43	- 충돌 시 사용자에게 (덮어쓰기 / 다른 id / abort) 묻기
44
45	### Phase 2 — Tier 1 수집
46	1. `<brand>.design`, `design.<domain>`, `<brand>/design-system` HEAD
47	2. WebSearch: `"<brand>" design system site:<domain>`
48	3. GitHub: `gh search repos "<brand> design tokens"`
49	4. 발견 시 → 공식 토큰 그대로 추출
50	5. 추가: MCP 없이 결정론 collector 실행: `npm --prefix web run capture:reference -- <id> --max-routes 3`. 생성된 `artifacts/reference-evidence/<id>.json`의 computed style, FontFaceSet, `@font-face`, surface/state evidence를 사용한다.
51	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 실패.
52	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를 찾는 용도일 뿐 인용 대상 아님.
53
54	### Phase 3 — Tier 2 수집 (둘 다 시도)
55	- `WebFetch https://getdesign.md/<id>` — 토큰 + component 스펙
56	- playwright `https://styles.refero.design/?q=<brand>` → 결과 카드 클릭 → 페이지 WebFetch
57	- 한 brand에 여러 style 페이지가 있을 수 있음 (ex: Apple = 4개) — 가장 트렌딩한 1-2개 사용
58
59	### Phase 4 — Reconcile + 9-section 작성
60	`references/stripe/DESIGN.md`를 포맷 레퍼런스로 9 섹션 작성. §4는 canonical schema(variant heading + bullet `Field: value`).
61
62	### Phase 4.5 — Machine-readable `tokens:` 블록 (mandatory)
63	산문을 다 쓴 뒤, frontmatter에 DTCG-lite `tokens:` 블록을 추가한다. 신규 ref는
64	Phase 2 라이브 inspect를 이미 했으므로 `source: live-extract`(또는 Tier 2와 reconcile 시 `reconciled`).
65	`references/stripe/DESIGN.md`의 tokens 블록을 스키마 레퍼런스로 사용:
66
67	- 네임스페이스(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`.
68	- 결정론 입력: `artifacts/reference-evidence/<id>.json`의 색·타이포·간격·radius cluster와 element pr

People who liked this also viewed

6 picks

Type

omd-add-reference

365stars35forks

View on GitHub

How to install omd-add-reference?

kwakseongjae/oh-my-design/omd-add-reference

$npx -y skills add kwakseongjae/oh-my-design --skill omd-add-reference

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# omd:add-reference
2
3	`spec/verification-pipeline.md`의 3-tier 파이프라인을 기계적으로 실행하는 스킬. CREATE / UPDATE / SYNC 세 모드.
4
5	## 모드 라우팅 (Phase 0)
6
7	\| 입력 \| 모드 \|
8	\|---\|---\|
9	\| `https://...` \| CREATE — 새 reference 9-section 생성 \|
10	\| `<id>` (web/references/<id>/ 존재) \| UPDATE — §4 (기본) 또는 지정 섹션 검증·갱신 \|
11	\| `<id>` (없음) \| 에러 — URL로 CREATE할지 묻기 \|
12	\| `--mode sync` \| SYNC — count·landing·README·gh description만 갱신 \|
13
14	CREATE에는 항상 SYNC가 뒤따른다 (count +1).
15
16	---
17
18	## 핵심 원칙 (모든 모드 공통)
19
20	1. Tier 1 = 절대 우선. brand의 공식 DS docs 또는 라이브 사이트 computed style이 truth.
21	2. Tier 2 = 교차검증. getdesign.md/<id> + styles.refero.design/?q=<brand> 둘 다 시도. 한쪽만 성공해도 OK, 둘 다 실패면 footer에 명시.
22	3. 컨플릭트 silent 해결 금지. Tier 1 ↔ Tier 2 충돌 시 채팅으로 보고 후 결정.
23	4. 거짓 주장 금지. "확인했다"고 쓰려면 같은 턴에 tool call 증거 필요. refero "없음" 단정은 `?q=` 검색 + 스크롤 시도 후만.
24	5. 검증 footer 의무. 갱신한 섹션 끝에 `Verified: YYYY-MM-DD` + 모든 source URL 기록.
25	6. 정확성만큼 맥락 깊이도 gate다. reference는 감사 보고서가 아니라 사용자가 브랜드를 이해하고 적용하기 위한 문서다. 검증 메타·미확인 목록으로 §1/§3/§10-13을 대체하지 않는다. 공식 history/rebrand/culture/font 자료로 브랜드의 기원, 현재 변화, 표현 방식, 타이포 자산을 설명하되 각 사실의 evidence class를 분리한다.
26
27	### Context depth contract (CREATE/UPDATE 공통)
28
29	- §1 첫 문단은 `무엇을 하는 브랜드인가 + 무엇이 인상을 구별하는가`를 80–160단어 산문으로 답한다. `current public ecosystem`, `this reference preserves`, `unverified claims are omitted` 같은 검증 메타로 시작하지 않는다.
30	- §1은 가능하면 3층으로 구성한다: product/category → recognizable brand expression → current evolution/rebrand. 최소 2개 공식 source를 `.verification.md`의 context evidence에 남긴다.
31	- §3은 폰트를 한 덩어리로 평탄화하지 않고 다음 evidence class를 분리한다: official product-use, live computed surface-use, official distributed brand asset, declared-only, unresolved.
32	- 공식 발표가 특정 폰트를 앱/제품에 적용했다고 명시하면 live webfont가 없어도 product family 사실로 승격할 수 있다. 이 경우 metadata는 보여주되 browser-loadable source가 없으면 specimen은 unavailable로 둔다.
33	- 공식 배포 서체는 현재 UI 폰트가 아니어도 이름·역사·형태·license boundary를 설명할 가치가 있다. 다만 `tokens.typography.family.ui`에는 넣지 않는다.
34	- 미확인 경계는 해당 주장 근처의 짧은 boundary note나 verification footer에 둔다. 유용한 브랜드 설명 전체를 경고문·상태문서로 바꾸지 않는다.
35	- §10–13은 공식 mission, service principles, stakeholder groups, first-party culture/history 자료가 있으면 `[FILL IN]`보다 그것을 우선 사용한다. 허구 인물/인용/의도는 만들지 않는다.
36
37	---
38
39	## CREATE 모드
40
41	### Phase 1 — id 결정
42	- URL → 도메인에서 id 추출 (예: `kakao.com` → `kakao`)
43	- 충돌 시 사용자에게 (덮어쓰기 / 다른 id / abort) 묻기
44
45	### Phase 2 — Tier 1 수집
46	1. `<brand>.design`, `design.<domain>`, `<brand>/design-system` HEAD
47	2. WebSearch: `"<brand>" design system site:<domain>`
48	3. GitHub: `gh search repos "<brand> design tokens"`
49	4. 발견 시 → 공식 토큰 그대로 추출
50	5. 추가: MCP 없이 결정론 collector 실행: `npm --prefix web run capture:reference -- <id> --max-routes 3`. 생성된 `artifacts/reference-evidence/<id>.json`의 computed style, FontFaceSet, `@font-face`, surface/state evidence를 사용한다.
51	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 실패.
52	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를 찾는 용도일 뿐 인용 대상 아님.
53
54	### Phase 3 — Tier 2 수집 (둘 다 시도)
55	- `WebFetch https://getdesign.md/<id>` — 토큰 + component 스펙
56	- playwright `https://styles.refero.design/?q=<brand>` → 결과 카드 클릭 → 페이지 WebFetch
57	- 한 brand에 여러 style 페이지가 있을 수 있음 (ex: Apple = 4개) — 가장 트렌딩한 1-2개 사용
58
59	### Phase 4 — Reconcile + 9-section 작성
60	`references/stripe/DESIGN.md`를 포맷 레퍼런스로 9 섹션 작성. §4는 canonical schema(variant heading + bullet `Field: value`).
61
62	### Phase 4.5 — Machine-readable `tokens:` 블록 (mandatory)
63	산문을 다 쓴 뒤, frontmatter에 DTCG-lite `tokens:` 블록을 추가한다. 신규 ref는
64	Phase 2 라이브 inspect를 이미 했으므로 `source: live-extract`(또는 Tier 2와 reconcile 시 `reconciled`).
65	`references/stripe/DESIGN.md`의 tokens 블록을 스키마 레퍼런스로 사용:
66
67	- 네임스페이스(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`.
68	- 결정론 입력: `artifacts/reference-evidence/<id>.json`의 색·타이포·간격·radius cluster와 element pr

People who liked this also viewed

6 picks

Type