Run any Skill in Manus with one click

omd-component-harvest

Stars324

Forks27

UpdatedJune 9, 2026 at 10:24

기존 references/<id>의 §8 Component Patterns + frontmatter `tokens.components`를 멀티서피스(여러 라우트 + 메뉴/모달 인터랙션) + 공개 디자인시스템(Storybook/Primer/Polaris/Cedar/Geist/*.design) 크롤로 풍부화. 단일 랜딩 스냅샷의 '버튼 수준'을 모달·탭·테이블·토스트·폼상태까지 확장하되, 소스가 빈약하면(랜딩만 있는 앱 중심 기업) 억지로 만들지 않고 정직하게 cap. 완료 시 `tokens.components_harvested: true` 마커. '컴포넌트 풍부화', '컴포넌트 하베스트', 'X 컴포넌트 보강', 'component harvest' 류에 트리거. 토큰 자체가 없으면 먼저 omd-token-backfill/omd-add-reference.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

kwakseongjae

kwakseongjae/oh-my-design

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name

omd-component-harvest

description

omd:component-harvest — deepen a reference's component documentation

단일 랜딩 인스펙트는 컴포넌트를 버튼/카드/내브 수준에서 멈춘다(모달·데이트피커·테이블·토스트·탭·스텝퍼·빈상태·폼에러는 클릭/로그인/앱 라우트 뒤에 있음). 이 스킬은 인스펙션 표면을 넓혀(멀티 라우트 + 인터랙션 + 공개 DS 크롤) §8과 tokens.components를 풍부하게 만든다 — 단, 정직성 게이트를 유지한다.

제1원칙 — 억지로 만들지 않는다 (정직성)

"도전은 하되, 소스가 빈약하면 무리해서 뭔가를 만들어 제공해야 한다는 강박을 두지 않는다."

풍부함은 소스가 허락하는 만큼만. 랜딩 한 장 + 앱스토어 스크린샷뿐인 모바일 앱 중심 기업은 6개에서 정직하게 멈춘다. 채우려고 컴포넌트를 발명(confabulate)하지 않는다.
우리 게이트는 색(hex) grounding만 강제한다. 컴포넌트 세부 스펙은 게이트가 전수 검증하지 않으므로, 출처 없는 스펙을 쓰면 그게 곧 confabulation이다. 측정했거나 공개 DS에 문서화된 것만 쓴다.

티어링 (소스 신뢰도 순)

공개 DS 있음 (primer.style·polaris·cedar·geist·*.design·공개 Storybook/Figma) → 헤비 크롤. DS 문서의 컴포넌트 인벤토리 + 정확한 토큰명·radius·height를 lift. (github=Primer가 모범 사례: 0→41.)
공개 DS 없으나 웹앱 깊음 (SaaS 대시보드, 다중 마케팅 라우트) → 멀티 라우트 + 인터랙션: pricing/docs/login/blog 방문, 메뉴·모달·드롭다운 열어 getComputedStyle. 본 것만 기록.
소스 빈약 (랜딩 1장, 앱 중심) → 정직한 cap. 보이는 3~6개만, note에 "landing-only / app-first — capped" 명시. 그래도 components_harvested: true (= "시도했고, 이게 소스의 끝").

절차 (ref 1개)

베이스라인 — references/<id>/DESIGN.md 전체 읽기. 현재 §8 컴포넌트 수 + tokens.components 수 기록.
소스 판별 — 공개 DS 존재 여부 확인(브랜드명 + "design system"/"storybook"/"primer/polaris/cedar/geist", *.design 서브도메인). 티어 결정.
하베스트:
- 라이브: playwright getComputedStyle (GLOBAL_ROOT=$(npm root -g), --disable-http2, networkidle, 쿠키/모달 dismiss). 여러 라우트면 순회. 가능하면 메뉴/모달 열어 캡처.
- 공개 DS: 컴포넌트 인덱스 + 각 컴포넌트의 shape(radius)/size(height·padding)/color roles/states를 실제 토큰명으로 lift.
§8 재작성 — ## 8. Component Patterns를 그룹화(Actions/Navigation/Forms/Data display/Overlays/Feedback & Status)된 **component** 항목들로. 각 항목에 구체 스펙(radius/height/padding/color/states). 소스가 빈약하면 적게 — 발명 금지.
- ## Responsive Behavior 표(브레이크포인트 + 변화)도 공개 DS에 있으면 보강.
tokens 블록 (구조화 — 렌더러 직결) — tokens.components를 구조화 객체로 작성(헤비면 15+, cap이면 3~6). 렌더러(componentsFromTokens)가 이걸 직접 읽어 그린다(프로즈 §4 파싱보다 우선). flat 문자열 금지.
```
components:
  button-primary: { type: button, bg: "#1f883d", fg: "#ffffff", radius: "6px", height: "32px", padding: "0 16px", font: "14px / 600", states: "hover #1a7f37 · disabled #94d3a2", use: "Primary constructive action" }
  underline-tab:   { type: tab, active: "text #1f2328 + 2px bottom border #fd8c73", disabled: "#59636e label", use: "Repo tabs" }
```
- type 필수 — button input card badge tab toggle toast dialog listItem avatar 중 정확히 하나. 이 밖은 가장 가까운 것으로(table/tooltip/banner/empty-state→card, modal/sheet/overlay→dialog, segmented/nav→tab, chip/label/counter→badge, stepper/switch→toggle). 무엇도 버리지 않음.
- 선택 필드(소스에 있는 것만): bg fg border radius padding height font shadow hover focus active disabled states use. tab은 active에 "Npx bottom border #hex" 형태로 넣어야 언더라인이 그려짐.
- tokens.components_harvested: true 추가. 공개 DS 출처면 source: design-system. (상세: spec/components-schema.md)
미러 — design-md/<id>/DESIGN.md 복사.
검증 + 트래킹 — cd web && node scripts/build-registry.mjs && npx vitest run (정합성·proof·leak 게이트 통과). node scripts/token-status.mjs --components로 harvested 카운트 +1 확인.

하드 규칙 (테스트가 강제)

colors hex는 6-digit #rrggbb만, 전부 산문에 grounding. (rgba는 shadow/note만.)
frontmatter 닫는 --- 위에 ##/- 프로즈 금지(leak 가드).
flow 매핑 { 앞 공백.
출처 없는 컴포넌트 스펙 금지. 측정값 또는 공개 DS 문서만.

마커 & 체크리스트

완료 표식: tokens.components_harvested: true (리치든 정직-cap이든 "패스 돌림"의 의미). 이게 있으면 트래커가 더 이상 candidate로 안 띄움 → 빈약한 ref를 영원히 nag하지 않음.
web/scripts/token-status.mjs 가 컴포넌트 체크리스트:
- --components → harvested · rich(unmarked) · candidates 카운트 + candidate 목록(토큰 있고 <10 comp, 미harvest).
- --md → "Components — Harvested / Harvest candidates" 섹션.

배치

기본 5개 / run. candidate 목록 앞에서 뽑되, 티어 섞기(공개 DS 1~2 + 일반 + cap 후보)로 원칙을 매번 검증. 재개는 token-status가 보장.

하지 말 것

❌ 숫자 채우려 컴포넌트 발명. ❌ 출처 없는 스펙. ❌ cap한 ref에 components_harvested 누락(트래커가 계속 nag함).
❌ 토큰 없는 ref를 여기서 처리(먼저 omd-token-backfill 또는 omd-add-reference Phase 4.5).
❌ 산문 본문에 {token} 참조 치환(렌더러 이슈).

More from this repository

same repository

omd-feel

kwakseongjae/oh-my-design

디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션 타이밍·이징·동심원 radius·tabular-nums·44px 타깃·focus ring·prefers-reduced-motion 등. 'feel 좋게 다듬어줘', '인터페이스 디테일 적용', 'feel 점검', '마이크로 인터랙션 손봐줘', 'make this feel better', 'polish the interactions', 「インターフェースの細部を詰めて」, 「介面細節打磨」 류에 트리거. 브랜드 토큰은 DESIGN.md(omd:apply)가 우선.

2026-06-23324

omd-harness

kwakseongjae/oh-my-design

화면 전체나 신규 surface를 처음부터 디자인할 때의 진입점 — Discovery→Wireframe→Components→Microcopy→Validation 파이프라인을 omd-master 오케스트레이터로 실행. 트리거: '랜딩페이지', '랜딩 페이지', '랜딩 만들어줘', '홈 화면', '첫 화면', '프로토타입', '그럴싸한', '구색 갖춰', 'first screen', 'first impression', 'landing page', 'landing', 'prototype', 'MVP UI', 'home', 'production-ready', 'wireframe to production', '랜딩 처음부터', 'production-ready', '一からデザイン', '從頭設計'. 자연어 발화('그럴싸한 랜딩 만들어줘', 'MVP UI 잡아줘', '프로토타입이라도 구색 갖춰서')에도 자동 트리거. 단일 컴포넌트 수정은 omd:apply.

2026-06-22324

omd-init

kwakseongjae/oh-my-design

프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의 요청에 트리거. CLAUDE.md / AGENTS.md / Cursor rule shim도 함께 설치.

2026-06-22324

omd-reference-capture

kwakseongjae/oh-my-design

선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference 캡쳐', 'X 라이브 스타일 추출', '브랜드 자료 받아와' 류 요청에 트리거. omd:init 직후 또는 omd:harness 중간에 호출 가능. DESIGN.md는 이 스킬이 만들지 않음 (omd:init 책임).

2026-06-22324

omd-add-reference

kwakseongjae/oh-my-design

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

2026-06-10324

omd-batch-launch

kwakseongjae/oh-my-design

10개 brand 일괄 reference 추가 + 문서 카운트 sync + hyperframes 기반 promo MP4 생성. '10개씩 추천해줘', '한국 IT 10개 추가하고 영상까지', 'batch-launch', 'X 카테고리에서 10개 더' 류 트리거. 매 회 reference count +10, gitignored promo video 1편.

2026-06-10324

name

omd-component-harvest

description

omd:component-harvest — deepen a reference's component documentation

제1원칙 — 억지로 만들지 않는다 (정직성)

"도전은 하되, 소스가 빈약하면 무리해서 뭔가를 만들어 제공해야 한다는 강박을 두지 않는다."

풍부함은 소스가 허락하는 만큼만. 랜딩 한 장 + 앱스토어 스크린샷뿐인 모바일 앱 중심 기업은 6개에서 정직하게 멈춘다. 채우려고 컴포넌트를 발명(confabulate)하지 않는다.
우리 게이트는 색(hex) grounding만 강제한다. 컴포넌트 세부 스펙은 게이트가 전수 검증하지 않으므로, 출처 없는 스펙을 쓰면 그게 곧 confabulation이다. 측정했거나 공개 DS에 문서화된 것만 쓴다.

티어링 (소스 신뢰도 순)

공개 DS 있음 (primer.style·polaris·cedar·geist·*.design·공개 Storybook/Figma) → 헤비 크롤. DS 문서의 컴포넌트 인벤토리 + 정확한 토큰명·radius·height를 lift. (github=Primer가 모범 사례: 0→41.)
공개 DS 없으나 웹앱 깊음 (SaaS 대시보드, 다중 마케팅 라우트) → 멀티 라우트 + 인터랙션: pricing/docs/login/blog 방문, 메뉴·모달·드롭다운 열어 getComputedStyle. 본 것만 기록.
소스 빈약 (랜딩 1장, 앱 중심) → 정직한 cap. 보이는 3~6개만, note에 "landing-only / app-first — capped" 명시. 그래도 components_harvested: true (= "시도했고, 이게 소스의 끝").

절차 (ref 1개)

베이스라인 — references/<id>/DESIGN.md 전체 읽기. 현재 §8 컴포넌트 수 + tokens.components 수 기록.
소스 판별 — 공개 DS 존재 여부 확인(브랜드명 + "design system"/"storybook"/"primer/polaris/cedar/geist", *.design 서브도메인). 티어 결정.
하베스트:
- 라이브: playwright getComputedStyle (GLOBAL_ROOT=$(npm root -g), --disable-http2, networkidle, 쿠키/모달 dismiss). 여러 라우트면 순회. 가능하면 메뉴/모달 열어 캡처.
- 공개 DS: 컴포넌트 인덱스 + 각 컴포넌트의 shape(radius)/size(height·padding)/color roles/states를 실제 토큰명으로 lift.
§8 재작성 — ## 8. Component Patterns를 그룹화(Actions/Navigation/Forms/Data display/Overlays/Feedback & Status)된 **component** 항목들로. 각 항목에 구체 스펙(radius/height/padding/color/states). 소스가 빈약하면 적게 — 발명 금지.
- ## Responsive Behavior 표(브레이크포인트 + 변화)도 공개 DS에 있으면 보강.
tokens 블록 (구조화 — 렌더러 직결) — tokens.components를 구조화 객체로 작성(헤비면 15+, cap이면 3~6). 렌더러(componentsFromTokens)가 이걸 직접 읽어 그린다(프로즈 §4 파싱보다 우선). flat 문자열 금지.
```
components:
  button-primary: { type: button, bg: "#1f883d", fg: "#ffffff", radius: "6px", height: "32px", padding: "0 16px", font: "14px / 600", states: "hover #1a7f37 · disabled #94d3a2", use: "Primary constructive action" }
  underline-tab:   { type: tab, active: "text #1f2328 + 2px bottom border #fd8c73", disabled: "#59636e label", use: "Repo tabs" }
```
- type 필수 — button input card badge tab toggle toast dialog listItem avatar 중 정확히 하나. 이 밖은 가장 가까운 것으로(table/tooltip/banner/empty-state→card, modal/sheet/overlay→dialog, segmented/nav→tab, chip/label/counter→badge, stepper/switch→toggle). 무엇도 버리지 않음.
- 선택 필드(소스에 있는 것만): bg fg border radius padding height font shadow hover focus active disabled states use. tab은 active에 "Npx bottom border #hex" 형태로 넣어야 언더라인이 그려짐.
- tokens.components_harvested: true 추가. 공개 DS 출처면 source: design-system. (상세: spec/components-schema.md)
미러 — design-md/<id>/DESIGN.md 복사.
검증 + 트래킹 — cd web && node scripts/build-registry.mjs && npx vitest run (정합성·proof·leak 게이트 통과). node scripts/token-status.mjs --components로 harvested 카운트 +1 확인.

하드 규칙 (테스트가 강제)

colors hex는 6-digit #rrggbb만, 전부 산문에 grounding. (rgba는 shadow/note만.)
frontmatter 닫는 --- 위에 ##/- 프로즈 금지(leak 가드).
flow 매핑 { 앞 공백.
출처 없는 컴포넌트 스펙 금지. 측정값 또는 공개 DS 문서만.

마커 & 체크리스트

완료 표식: tokens.components_harvested: true (리치든 정직-cap이든 "패스 돌림"의 의미). 이게 있으면 트래커가 더 이상 candidate로 안 띄움 → 빈약한 ref를 영원히 nag하지 않음.
web/scripts/token-status.mjs 가 컴포넌트 체크리스트:
- --components → harvested · rich(unmarked) · candidates 카운트 + candidate 목록(토큰 있고 <10 comp, 미harvest).
- --md → "Components — Harvested / Harvest candidates" 섹션.

배치

기본 5개 / run. candidate 목록 앞에서 뽑되, 티어 섞기(공개 DS 1~2 + 일반 + cap 후보)로 원칙을 매번 검증. 재개는 token-status가 보장.

하지 말 것

❌ 숫자 채우려 컴포넌트 발명. ❌ 출처 없는 스펙. ❌ cap한 ref에 components_harvested 누락(트래커가 계속 nag함).
❌ 토큰 없는 ref를 여기서 처리(먼저 omd-token-backfill 또는 omd-add-reference Phase 4.5).
❌ 산문 본문에 {token} 참조 치환(렌더러 이슈).