デザインシステムを MCP サーバーではなくスキルにする: package.json の版のリポジトリを手元に取り、README を順にたどらせる

解決する問題

• エージェントがデザインシステムのコンポーネントを知らず、似た部品を自作したり、古い API で書いたりする
• MCP サーバーを作ると、運用・配布・版の追従が手間になる
• ドキュメントを全部コンテキストに入れると重い

SKILL.md の中身（流れ）

1. プロジェクトの package.json から、使っているデザインシステムの版を読む
2. その版のタグで、リポジトリをキャッシュに取る（なければ clone、あれば checkout）
   bash

   CACHE="${XDG_CACHE_HOME:-$HOME/.cache}/design-system"
   if [ ! -d "$CACHE/.git" ]; then
     gh repo clone <org>/<design-system-repo> "$CACHE"
   fi
   git -C "$CACHE" fetch --tags
   git -C "$CACHE" checkout "v${VERSION}"

3. トップの README.mdx から始め、目的のコンポーネントのディレクトリの README.mdx をたどる
4. 使い方の具体例は stories/*.stories.tsx、設計の考え方は docs/*.mdx を読む
5. 読んだ内容に沿ってコードを書く

なぜスキルがよいか

• スキルは「必要になったら本文を読む」仕組みなので、ドキュメントを最初から全部入れずに済む（段階的に読ませる）
• 版を package.json に合わせるので、プロジェクトが使っている版の API で書かせられる
• 中身はリポジトリにある既存のドキュメントそのもの。スキル用に二重管理しない
• スキルの雛形は skill-creator で作れる

注意点

• 非公開リポジトリなら gh の認証が要る。CI やクラウドのエージェントで使うときはトークンの扱いを決める
• タグ名の付け方（v1.2.3 か 1.2.3 か）はリポジトリに合わせる
• README が古いと、エージェントも古い書き方をする。ドキュメントの質がそのまま出る

関連

• スキルは9つの型で棚卸しし、Gotchas 節を育てる（Anthropic 社内の運用から）

出典

• @mugi_uno · 2026-04-08
• Zenn（サイボウズ フロントエンド）: zenn.dev