Skip to content
Design
Skill

/seed-component-docs

SEED 컴포넌트의 가이드·React·Lynx 문서를 쓰거나 고칠 때, Figma SEED Docs 페이지를 만들 때, Figma 문서 페이지에서 가이드 MDX로 이관할 때 사용한다.

From plugin
seed-design
1.2k11 skills4 agents6 commands4 MCP

Claude Code

$ npx -y skills add daangn/seed-design --skill seed-component-docs --agent claude-code

SKILL.md

seed-component-docs.SKILL.md
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`「검증」을 따른다.
Read more
@daangn
Ships withseed-design

SEED는 당근 제품을 위한 통합된 디자인 언어입니다. 하나의 토큰 소스에서 React, iOS, Android, Lynx까지 여러 플랫폼에 일관된 디자인을 전달하고, Figma와 연동됩니다.

1.2k11 skills4 agents4 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
1.2k
Star history of daangn/seed-design on GitHub, a chart by star-history.com

Other skills on seed-design.

chromatic-diff

chromatic-diff

Chromatic snapshot 변경의 원인, 실제 회귀 또는 flaky 여부를 조사할 때 사용한다.

@daangn@daangnInstall Skill
seed-change

seed-change

SEED 변경의 영향·검증·기준 브랜치를 판단하거나, 공개 패키지 changeset을 작성하거나, 명시적으로 요청받은 rebase·commit·push·PR 제출을 할 때 사용한다.

@daangn@daangnInstall Skill
seed-component

seed-component

SEED 컴포넌트의 경로 조회·React·Lynx API 비교, 신규·포팅·기존 구현 변경, React·Lynx 예제 작성, 또는 컴포넌트와 무관한 색상 토큰의 지도·WCAG 대비 조사를 할 때 사용한다.

@daangn@daangnInstall Skill
seed-deprecation

seed-deprecation

SEED 컴포넌트·API·토큰의 사용 중단 선언, 마이그레이션 안내 또는 예정된 제거를 처리할 때 사용한다.

@daangn@daangnInstall Skill
seed-design

seed-design

SEED Design을 사용하는 프로젝트의 공식 문서·CLI 안내나 설치·업그레이드 진단이 필요할 때 사용한다.

@daangn@daangnInstall Skill

More skills from other plugins.

impeccable

impeccable

Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…

@pbakaus@pbakausInstall Skill

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.