Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/daangn/seed-design/create-componentnpx skills add daangn/seed-design --skill create-componentgit clone --depth 1 https://github.com/daangn/seed-designWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00088 | $0.02608 |
| Opus 5 | $0.00044 | $0.01304 |
| Sonnet 5 | $0.00018 | $0.00522 |
| Haiku 4.5 | $0.00009 | $0.00261 |
Grade A, and why
create-component scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 189 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Create Component
이 문서는 라우터다. 컴포넌트 작업의 흐름과 게이트만 정의하고, 실제 내용은 각 Phase의 reference 파일에 있다. 각 Phase에 진입할 때 해당 reference를 그때 읽는다. 모두 미리 읽지 않는다.
핵심 흐름
Platform Gate → Delivery Surface Gate → Phase 0 Pre (Brainstorm) → Phase 0 (Architecture) → Phase 1 (Implementation) → Phase 2 (Verification)
React/Lynx 결정 package/snippet 판단 사용자 합의 아키텍처 결정 레이어별 구현 자동·수동 검증
각 Phase 사이에 게이트가 있다. 게이트 통과 전까지 다음 Phase로 가지 않는다. 흐름이 깨지면 빠진 요구사항·어긋난 아키텍처·우회된 검증이 누적되어 다른 컴포넌트까지 흔든다.
Storybook-only fast path
요청이 docs/stories/*.stories.tsx, docs/.storybook/*의 작성·리팩터링·검증에만 한정되고 컴포넌트 API나 동작을 바꾸지 않으면 Platform/Delivery Surface/Phase 0 게이트를 적용하지 않는다.
references/storybook.md를 읽는다.docs/.storybook/preview.ts,docs/stories/utils/parameters.ts, 가까운 기존 story를 확인한다.- CSF Next factory 패턴으로 작성하고 story별 동작 범위를 보존한다.
references/storybook.md의 검증 명령과references/visual-testing.md의 Storybook 항목을 실행한다.
컴포넌트 API·상태·recipe까지 바뀌면 fast path를 중단하고 일반 핵심 흐름으로 돌아간다.
막힘 처리 (모든 Phase 공통)
작업 중 막히면 임의 우회·mock·as any·테스트 생략·"나중에 고치자" 금지. 통증 메모 작성 → 사용자 보고 → 결정 후 재시도.
상세 룰과 차단점 분류표: references/sticking-policy.md
Platform Gate: 대상 플랫폼 결정
진입 시 즉시 읽기 → references/platform-gate.md
Phase 0 Pre 전에 target platform을 react / lynx / cross-platform 중 하나로 확정한다. 플랫폼이 정해져야 Headless, Recipe, Styled UI, Snippet, Docs, Example, Verification 경로가 결정된다.
🔒 게이트 Platform → 0Pre
- target platform 확정
cross-platform이면 shared Rootage/API와 플랫폼별 구현 분리 원칙 확인- 새
packages/lynx-react-headless/<component>패키지가 필요하면 사용자 확인 전 구현 금지
Delivery Surface Gate: 공개 표면 결정
진입 시 즉시 읽기 → references/api-design.md의 "Delivery Surface Gate"와 "Analog Parity Check"
Platform Gate 직후, 구현 전에 이 컴포넌트를 package export, registry snippet, 둘 다, docs-only 중 어디로 제공할지 확정한다. React 동등 컴포넌트가 있다면 variant/interface뿐 아니라 docs Usage import, registry 존재 여부, package export, example surface를 함께 비교한다.
What ships with it
17 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/AGENTS.md 1.3 KB
- references/api-design.md 16 KB
- references/architecture-decisions.md 11 KB
- references/brainstorming.md 12 KB
- references/external-references.md 9.5 KB
- references/guide.md 8.1 KB
- references/implementation-steps.md 13 KB
- references/lynx-patterns.md 9.7 KB
- references/pattern-catalog.md 8.0 KB
- references/platform-gate.md 3.9 KB
- references/react-patterns.md 9.5 KB
- references/recipe-patterns.md 9.6 KB
- references/review-prompts.md 2.2 KB
- references/sticking-policy.md 2.7 KB
- references/storybook.md 5.3 KB
- references/verification-checklist.md 7.1 KB
- references/visual-testing.md 2.7 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 189 lines · 88 tokens per session scan A 1d974b68a9bf
create-component is a skill published in the GitHub repository daangn/seed-design (1,074 stars, last pushed 2d ago), licensed Apache-2.0. It adds 88 tokens to every session and 2,608 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-to-code
Lanhu to Code workflow for Claude Code. Convert Lanhu design URLs into Vue/React frontend code with component reuse, design token mapping, TODO-safe business logic, and optional code review.
component-doc-gen
Scan frontend src directories and generate docs/components.md so Claude Code can reuse existing Vue/React components during design-to-code generation.
material-ui-nextjs
Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
material-ui-styling
Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.
material-ui-tailwind
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
material-ui-theming
Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.