mcpField
I
ingest-github

ingest-github

github.com/bluzirデザイン・UI10747 回インストール27 週間前に更新
リポジトリ

ingest-github について

GitHub CLIでリポジトリを取得し、デザイントークンを抽出するデザインワークフロースキルです。トークンを構造化データとして保存し、後続のデザイン作業に使えます。

主な機能

  1. 01GitHubリポジトリURLの解析
  2. 02ghによる浅いクローン
  3. 03トークン・テーマファイルの検索
  4. 04色、フォント、間隔、角丸の抽出
  5. 05構造化トークンJSONの保存

活用シーン

  1. 01リポジトリからのデザイントークン取り込み
  2. 02ビジュアルスタイルガイド用のトークン準備
  3. 03リポジトリのスタイルをデッキやプロトタイプで利用

インストール

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

$npx skills add https://github.com/bluzir/claude-code-design --skill ingest-github

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

詳細

GitHub を取り込む

リポジトリを一時的な場所に取得し、デザイントークンを抽出します。ユーザーが手動で git clone する必要はありません。gh CLI を使用します。

事前確認

  1. Bash(which gh) — 見つからない場合は、ユーザーに brew install gh && gh auth login と伝えます
  2. $ARGUMENTS が github.com/owner/repo[/(tree|blob)/ref/path] に一致することを確認します

手順

  1. URL を {owner, repo, ref, subpath} に解析します。

    • リポジトリ URL のみの場合:github.com/foo/bar → {owner:foo, repo:bar, ref:default, subpath:''}
    • ツリーの場合:github.com/foo/bar/tree/main/src → {owner:foo, repo:bar, ref:main, subpath:'src'}
  2. /tmp/cd-ingest-<slug>-<timestamp> 配下の一時ディレクトリに浅くクローンします:

    Bash(mkdir -p /tmp/cd-ingest-<slug>)
    Bash(gh repo clone <owner>/<repo> /tmp/cd-ingest-<slug>/<repo> -- --depth 1 --branch <ref>)
    
  3. クローン先で Glob を使ってトークンファイルを検索します:

    • **/theme.{ts,tsx,js,jsx,json}
    • **/tokens.{css,scss,json}
    • **/tailwind.config.{js,ts,cjs,mjs}
    • **/_variables.{css,scss}
    • **/colors.{ts,js,json}
    • **/*.tokens.json(W3C DTCG 形式)
    • **/design-tokens.*
    • **/palette.*
  4. 候補ファイルを読み込み(サイズの大きいものから最大20件)、以下を抽出します:

    • 色:正規表現 #[0-9a-fA-F]{3,8}、rgb\(...\)、oklch\(...\)、hsl\(...\) と、それらが割り当てられている変数名/キー
    • フォント:font-family: の値、名前付きフォントスタック
    • スペーシング:Tailwind 設定の数値スケール、--space-* / --spacing-* / --gap-* を使った CSS 変数
    • 角丸:--radius-* / --rounded-* を使った CSS 変数、Tailwind の borderRadius 設定
  5. 構造化された出力を書き込みます:

    artifacts/ingested/<repo>-tokens.json
    

    スキーマ:

    {
      "source": { "url": "...", "ref": "...", "ingested_at": "2026-04-20T..." },
      "colors": { "primary": "#...", "accent": "#...", "bg": "#...", "text": "#...", "semantic": {...}, "all": {...} },
      "fonts": { "display": "...", "body": "...", "mono": "...", "stacks": [...] },
      "spacing": [...],
      "radii": { "sm": 4, "md": 8, "lg": 16 },
      "shadows": [...],
      "components": { "Button": { "found_at": "src/.../Button.tsx" }, ... }
    }
    
  6. ユーザーに概要を伝えます:

    • 「色がN個、フォントがM個、スペーシングスケールが [...]、角丸がK個見つかりました。artifacts/ingested/<repo>-tokens.json に保存しました。」
    • /create-design-system でビジュアルスタイルガイドを作成するか、これらのトークンを読み込んだ状態で /make-deck / /interactive-prototype を開始することを提案します。
  7. クリーンアップ:必要に応じて Bash(rm -rf /tmp/cd-ingest-<slug>) を実行します。または、さらに調査できるように残しておきます。

失敗時の対応

  • gh がない → 明確なエラーとインストール手順を伝えます
  • リポジトリが非公開で認証されていない → gh auth login を促します
  • トークンが見つからない → 「リポジトリに明確なデザイントークンがありません。手動の AskUserQuestion による代替手段を提案するか、特定のサブパスを試してください」と報告します
  • リポジトリが大きすぎる(>500MB) → ユーザーに警告し、絞り込みに --subpath を使うことを提案します

コメント