/seed-component-docs
SEED 컴포넌트의 가이드·React·Lynx 문서를 쓰거나 고칠 때, Figma SEED Docs 페이지를 만들 때, Figma 문서 페이지에서 가이드 MDX로 이관할 때 사용한다.
Claude Code
$ npx -y skills add daangn/seed-design --skill seed-component-docs --agent claude-code
Codex
$ npx skills add daangn/seed-design --skill seed-component-docs -a codex -y
Cursor
$ npx skills add daangn/seed-design --skill seed-component-docs -a cursor -y
Gemini CLI
$ npx skills add daangn/seed-design --skill seed-component-docs -a gemini-cli -y
GitHub Copilot
$ npx skills add daangn/seed-design --skill seed-component-docs -a github-copilot -y
OpenCode
$ npx skills add daangn/seed-design --skill seed-component-docs -a opencode -y
Windsurf
$ npx skills add daangn/seed-design --skill seed-component-docs -a windsurf -y
SKILL.md
seed-component-docs.SKILL.mdname: seed-component-docs
description: SEED 컴포넌트의 가이드·React·Lynx 문서를 쓰거나 고칠 때, Figma SEED Docs 페이지를 만들 때, Figma 문서 페이지에서 가이드 MDX로 이관할 때 사용한다.
SEED 컴포넌트 문서
컴포넌트 하나를 설명하는 문서는 세 겹이다. 공통 가이드와 Figma 페이지는 같은 내용을 두 매체로 담고, 플랫폼 문서는 그 내용을 코드 계약으로 옮긴다. 요청이 어느 겹을 바꾸는지 고르고 그 reference만 읽는다.
| 결과물 | 읽을 reference | 입력 | | --- | --- | --- | | 공통 가이드 MDX `docs/content/components/<id>.mdx` | [guide-doc.md](references/guide-doc.md) | 컴포넌트 역할·부품·속성·사용 규칙의 근거(Figma 페이지, 구현, PRD, 사용자 설명) | | Figma SEED-Docs 페이지 | [figma-doc.md](references/figma-doc.md) | 가이드 MDX 또는 같은 내용의 초안, 대상 파일·페이지 | | 기존 Figma 페이지 → 가이드 MDX 이관 | [figma-migration.md](references/figma-migration.md) + [guide-doc.md](references/guide-doc.md) | Figma 노드 URL | | React·Lynx 문서 `docs/content/{react,lynx}/components/<name>.mdx` | [platform-doc.md](references/platform-doc.md) | 구현 소스, Registry snippet, 예제 파일 |
가이드와 Figma를 함께 요청받으면 가이드 MDX 본문을 먼저 확정하고 그 텍스트를 Figma에 옮긴다. 두 매체의 문장을 따로 쓰지 않는다.
경계
- 문서 작업은 컴포넌트 구현·Recipe·Registry를 바꾸지 않는다. 문서를 쓰다 API·동작 문제를 발견하면 문서용 우회를 쓰지 않고 [`seed-component`](../seed-component/SKILL.md)의 기존 구현 변경으로 분리한다.
- 예제 파일 작성·실행, Registry 배포 경로, Lynx 호환성 frontmatter와 기기 검증은 `seed-component`의 [lynx-docs.md](../seed-component/references/lynx-docs.md)·[lynx-docs-authoring.md](../seed-component/references/lynx-docs-authoring.md)·[implementation-steps.md](../seed-component/references/implementation-steps.md)가 맡는다. platform-doc.md는 문장과 구조만 정한다.
- Figma 원본 파일(SEED-Docs)의 기존 페이지는 사용자가 지정한 페이지·브랜치에서만 수정한다. `use_figma`를 부르기 전에 `figma-use` Skill을 읽는다.
- 문서 변경의 검증은 내용·링크·형식 검토다. `docs/` 빌드 검사는 `docs/AGENTS.md`「검증」을 따른다.
Read more
name: seed-component-docs description: SEED 컴포넌트의 가이드·React·Lynx 문서를 쓰거나 고칠 때, Figma SEED Docs 페이지를 만들 때, Figma 문서 페이지에서 가이드 MDX로 이관할 때 사용한다.
SEED 컴포넌트 문서
컴포넌트 하나를 설명하는 문서는 세 겹이다. 공통 가이드와 Figma 페이지는 같은 내용을 두 매체로 담고, 플랫폼 문서는 그 내용을 코드 계약으로 옮긴다. 요청이 어느 겹을 바꾸는지 고르고 그 reference만 읽는다.
| 결과물 | 읽을 reference | 입력 | | --- | --- | --- | | 공통 가이드 MDX `docs/content/components/<id>.mdx` | [guide-doc.md](references/guide-doc.md) | 컴포넌트 역할·부품·속성·사용 규칙의 근거(Figma 페이지, 구현, PRD, 사용자 설명) | | Figma SEED-Docs 페이지 | [figma-doc.md](references/figma-doc.md) | 가이드 MDX 또는 같은 내용의 초안, 대상 파일·페이지 | | 기존 Figma 페이지 → 가이드 MDX 이관 | [figma-migration.md](references/figma-migration.md) + [guide-doc.md](references/guide-doc.md) | Figma 노드 URL | | React·Lynx 문서 `docs/content/{react,lynx}/components/<name>.mdx` | [platform-doc.md](references/platform-doc.md) | 구현 소스, Registry snippet, 예제 파일 |
가이드와 Figma를 함께 요청받으면 가이드 MDX 본문을 먼저 확정하고 그 텍스트를 Figma에 옮긴다. 두 매체의 문장을 따로 쓰지 않는다.
경계
- 문서 작업은 컴포넌트 구현·Recipe·Registry를 바꾸지 않는다. 문서를 쓰다 API·동작 문제를 발견하면 문서용 우회를 쓰지 않고 [`seed-component`](../seed-component/SKILL.md)의 기존 구현 변경으로 분리한다.
- 예제 파일 작성·실행, Registry 배포 경로, Lynx 호환성 frontmatter와 기기 검증은 `seed-component`의 [lynx-docs.md](../seed-component/references/lynx-docs.md)·[lynx-docs-authoring.md](../seed-component/references/lynx-docs-authoring.md)·[implementation-steps.md](../seed-component/references/implementation-steps.md)가 맡는다. platform-doc.md는 문장과 구조만 정한다.
- Figma 원본 파일(SEED-Docs)의 기존 페이지는 사용자가 지정한 페이지·브랜치에서만 수정한다. `use_figma`를 부르기 전에 `figma-use` Skill을 읽는다.
- 문서 변경의 검증은 내용·링크·형식 검토다. `docs/` 빌드 검사는 `docs/AGENTS.md`「검증」을 따른다.
SEED는 당근 제품을 위한 통합된 디자인 언어입니다. 하나의 토큰 소스에서 React, iOS, Android, Lynx까지 여러 플랫폼에 일관된 디자인을 전달하고, Figma와 연동됩니다.
Other skills on seed-design.
seed-change
SEED 변경의 영향·검증·기준 브랜치를 판단하거나, 공개 패키지 changeset을 작성하거나, 명시적으로 요청받은 rebase·commit·push·PR 제출을 할 때 사용한다.
seed-component
SEED 컴포넌트의 경로 조회·React·Lynx API 비교, 신규·포팅·기존 구현 변경, React·Lynx 예제 작성, 또는 컴포넌트와 무관한 색상 토큰의 지도·WCAG 대비 조사를 할 때 사용한다.
More skills from other plugins.
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional…
impeccable
Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…
8-bit-orbit-video-temp…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene…
diagram-design
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline,…
Questions about seed-component-docs.
- Which coding agents can use seed-component-docs?
- seed-component-docs installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.

