mcpField
S
seed-design

seed-design

github.com/daangnデザイン・UI1.2k772 回インストール1 日前に更新
リポジトリ

seed-design について

seed-design は、SEED Design の公式ドキュメントと CLI を参照するスキルです。デザインシステムの調査や React・Lynx プロジェクト向けに、依頼内容とプラットフォームに応じて実装、移行、診断の手順を案内します。

主な機能

  1. 01仕様と実装依頼の分類
  2. 02プロジェクト情報による React・Lynx 判定
  3. 03公式ドキュメント索引へのルーティング
  4. 04コンポーネント・移行・Doctor の手順案内
  5. 05読み取り診断と変更範囲の区別

活用シーン

  1. 01共通コンポーネントや Foundations の仕様確認
  2. 02プラットフォーム別実装ガイドの検索
  3. 03プロジェクト設定や非推奨利用の診断
  4. 04プラットフォーム別移行の計画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/daangn/seed-design --skill seed-design

インストール後、Claude Code で/seed-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

assets/
doctor-report.schema.json
report-template.html
references/
doctor-lynx.md
doctor-react.md
doctor.md
migration.md
upgrade.md
rules/
component-guidelines.md
foundation-contract.md
library-authors.md
no-deprecated-component.md
outdated-version.md
package-compatibility.md
project-config.md
project-setup.md
snippet-compatibility.md
snippet-generation.md

詳細

SEED Design

SEED Designの公式ドキュメントとCLIを単一の情報源として使用します。このスキルにはドキュメントの内容を複製せず、共通デザイン知識 → プラットフォーム実装 → プラットフォーム別Doctorへと進む探索・判定手順のみを記載します。

1. まずリクエストを分類する

プロジェクトを調査する前に、リクエストを次のいずれかに分類します。

分類例プラットフォームの判定
共通コンポーネント仕様・FoundationsAnatomy、Properties、Guidelines、色、タイポグラフィ、スペーシング不要
プラットフォーム実装使い方、Props、インストール、セットアップ、スニペット、コード作成、CLI実行必要
Doctor・マイグレーション使用状況の診断、deprecated、互換性、アップグレード必要

共通仕様やFoundationsについてのみ尋ねられた場合は、プロジェクトがなくても共通ドキュメントをすぐに読みます。実装コードも合わせて尋ねられた場合は、まず共通ドキュメントを読んでからプラットフォームを判定し、該当するプラットフォームのドキュメントを組み合わせます。

SEEDリポジトリ作業のルーティング

現在のリポジトリのpackage.jsonの名前が@seed-design/projectで、リクエストが利用者向けの案内ではなくリポジトリ作業の場合は、以下の専用スキルを先に読みます。この表は入口のみを示し、各手順をこのドキュメントに複製するものではありません。

リクエスト使用するスキル
コンポーネントのパス・APIの比較・カラー トークンの調査、実装・ドキュメントの作成seed-component
変更の影響・検証・基準ブランチの計画、changeset、明示的に依頼された提出seed-change
deprecatedの表示・マイグレーション・削除seed-deprecation
PR snapshotの生成と結果の確認seed-snapshot-release

調査や計画の結果だけをもとに、ファイルの作成や提出を開始してはいけません。seed-changeのブランチ結果がunknownの場合は、提出しません。

2. プラットフォームを判定する

プラットフォームによって結果が異なるリクエストにのみ、以下の順序を適用します。

  1. ユーザーが明示したプラットフォーム:ReactまたはLynx
  2. 対象ワークスペースの設定:seed-design.json.framework
  3. 対象ワークスペースの直接依存関係
    • React:@seed-design/react、@seed-design/css
    • Lynx:@seed-design/lynx-react、@seed-design/lynx-css、または@lynx-js/react

優先順位の高い明確な手がかりを、優先順位の低い手がかりで上書きしてはいけません。ただし、同じ対象内で設定と依存関係が矛盾する場合は、設定が古い可能性があるため、ユーザーに確認します。

モノレポではルートのpackage.jsonだけを確認せず、まずリクエスト対象のワークスペースを探します。ルートへのリクエストでReactとLynxのワークスペースが両方見つかった場合、または対象パスが不明確な場合は、実装・インストール・Doctorを開始する前に、どのワークスペースまたはプラットフォームを対象とするかを尋ねます。

手がかりがない場合や、同じ段階で複数のプラットフォームが同時に見つかった場合も、ユーザーに尋ねます。**不確かな状況でReactをデフォルトとして使用してはいけません。**これはエージェントのドキュメントルーティング規則であり、既存のCLIの公開動作やseed-design.jsonのデフォルト値を変更する規則ではありません。

プラットフォームの判定後、必要な場合に限り、以下のプロジェクト情報も収集します。

  • seed-design.jsonのpathと、そのディレクトリにある@fileヘッダーファイル → スニペットのインストール状況
  • インストール済みの@seed-design/*バージョン
  • バンドラーの設定(vite.config、rsbuild.config、webpack.configなど)
  • ロックファイルから判定したパッケージマネージャー(bun → pnpm → yarn → npm)

3. 公式ドキュメントのルーティング

ドキュメント一覧や対応範囲をスキルに複製しません。リクエストごとに、まず以下のインデックスを読み、インデックスに記載されたリンクをそのままたどります。

  • 全ドキュメントのインデックス:https://seed-design.io/llms.txt
  • Reactドキュメントのインデックス:https://seed-design.io/react/llms.txt
  • Lynxドキュメントのインデックス:https://seed-design.io/lynx/llms.txt

1つのリクエストの実行中は、URLを正規化したドキュメントプールを維持します。全体インデックス、選択したプラットフォームのインデックス、各leafドキュメントは、URLごとに一度だけ読み、その後の手順やルールでは同じ内容を再利用します。レポートのreferencesに同じURLを繰り返し記載するのは出典を保持するためであり、再度読むことを意味しません。HTTPキャッシュは前提としません。

以下の順序を守ります。

  1. 全体インデックスから、共通のComponents・Foundations・Patterns、または選択したプラットフォームの現在のエントリーポイントを探します。
  2. プラットフォーム実装のリクエストでは、選択したプラットフォームのインデックスを読み、タイトル・category・説明から必要なドキュメントを探します。
  3. インデックスに記載されたleaf URLを開き、実際の仕様を読みます。記憶しているパスやURLの組み合わせからleafドキュメントを作成してはいけません。
  4. インデックスを正常に読んだうえで関連項目が見つからない場合は、現在の公式ドキュメントは存在しないと判断します。インデックス自体を読めなかった場合は、存在しないと断定してはいけません。

CLIのdocsコマンドを使用する場合も、まずインデックスでドキュメントとidを確認します。URLパスとCLIのidが同じだと仮定せず、idを確定できない場合は、インデックスに記載されたURLを直接読みます。

コンポーネントに関する回答の順序
  1. 仕様についての質問であれば、共通コンポーネントのドキュメントのみを読みます。
  2. 実装についての質問であれば、プラットフォームを判定し、該当するプラットフォームのドキュメントを読みます。
  3. 仕様と実装の両方について尋ねられた場合は、まず共通ドキュメントを読み、判定したプラットフォームのドキュメントを続けて読みます。
  4. 共通ドキュメントのidと実装ドキュメントのidが異なる場合は、共通ドキュメントのPlatform表と、選択したプラットフォームのインデックスから実際のidを探します。
  5. 選択したプラットフォームのドキュメントまたはregistry項目がない場合は、そのプラットフォームの実装・ドキュメントが存在しないことを伝えます。他のプラットフォームのドキュメントで代用してはいけません。

スニペットが必要な場合は、選択したプラットフォームのregistryのみを使用します。

https://seed-design.io/__registry__/{react|lynx}/{registryId}/index.json
https://seed-design.io/__registry__/{react|lynx}/{registryId}/{itemId}.json

個別スニペットのパスは{itemId}/index.jsonではなく、{itemId}.jsonです。

CLIドキュメント

全体・プラットフォームのインデックスから、CLI、Commands、Configurationに該当する現在のリンクを探し、内容を読みます。ドキュメントがどのプラットフォームのツリーにあるかだけを根拠に、対応プラットフォームやオプションを推測してはいけません。コマンド・フラグ・設定フィールドには、リンク先のドキュメントまたはインストール済みCLIのソースに明記された値のみを使用します。

4. 판단이 필요한 절차

요청읽을 참조
스니펫 버전 맞추기, 파일 충돌, 패키지 호환migration.md
changelog 해석과 업그레이드 경로upgrade.md
코드 사용 상태 진단doctor.md

마이그레이션과 업그레이드도 플랫폼을 먼저 판별합니다. 참조 파일의 React 전용 옵션이나 호환표를 Lynx에 적용하지 말고, 선택된 플랫폼의 패키지와 changelog만 대조합니다.

Doctor 요청은 doctor.md의 적응형 탐색 절차를 먼저 따릅니다.

  1. 사용자 지정 경로
  2. node_modules, .git, .claude/worktrees를 제외한 seed-design.json
  3. 설정 발견 여부와 관계없이 직접 @seed-design/* 의존성이 있는 workspace
  4. 두 후보를 package 경계로 중복 제거
  5. 사용자 명시 → framework → 직접 의존성 순의 플랫폼 확정
  6. 공개 진입점과 앱·라이브러리 빌드 증거에 따른 비배타적 역할 판정

플랫폼 프로필은 문서 지원 현황을 복제하지 않고 인덱스·패키지·registry 탐색의 시작점만 제공합니다. 일반 진단은 공통 룰 전체를 scope에 넣고, 현재 인덱스에서 발견한 공식 계약과 각 룰의 적용 조건으로 검사 여부를 정합니다. 사용자가 config·setup·foundations·components·compatibility·library 중 범주를 지정했다면 그 범주만 실행합니다. 여러 workspace의 전체 진단은 리포트를 workspace별로 따로 만듭니다.

Doctor는 문제를 찾는 진단이고, upgrade.md는 실제로 버전을 올리는 절차입니다. 진단이 버전 격차를 알려도 사용자가 수정을 요청하기 전에는 업그레이드를 실행하지 않습니다.

5. 코드 작성과 기존 코드 진단

rules/의 룰은 SEED 코드를 작성할 때 지키는 계약이자 Doctor의 판정 기준입니다. Doctor에서는 선택된 플랫폼 프로필과 각 룰의 적용 조건을 함께 사용합니다.

토큰은 문서·CSS·플랫폼 API에서 표기가 달라질 수 있습니다. 공통 Foundations 문서에서 의미와 토큰을 확인한 뒤, 코드 표기는 선택된 플랫폼 구현 문서에서 확인합니다. 한 플랫폼의 코드 표기를 다른 플랫폼에 복사하지 않습니다.

6. 응답과 실행 원칙

  • 공식 문서를 실제로 읽고 근거 링크와 함께 답합니다.
  • 설치·실행 명령은 대상 프로젝트의 패키지 매니저에 맞춥니다.
  • read-only 진단과 실제 수정 요청을 구분합니다.
  • Doctor 결과는 schema v2 YAML을 단일 원천으로 임시 디렉토리에 기록하고, 사용자가 "YAML만"을 명시하지 않으면 같은 디렉토리에 HTML 리포트도 함께 생성합니다. 대상 프로젝트에는 쓰지 않습니다.
  • 각 finding의 remediation에는 대상·문제·요구사항·제약·근거·검증을 포함한 복사 가능한 수정 프롬프트를 기록합니다. 프롬프트를 만드는 것은 진단이며, 사용자가 별도로 수정을 요청하기 전에는 실행하지 않습니다.
  • 없는 경로나 API를 추측하지 않습니다.
  • 작업이 끝나면 현재 맥락에 맞는 다음 단계만 짧게 제안합니다.

コメント