自作のClaude Code SkillをPluginにしてみた

はじめに

以前、draw.ioの公式SkillにAWSアイコンのスタイル指定などを追記して、AWS構成図を描かせる記事を書きました。

https://dev.classmethod.jp/articles/claude-code-trying-out-drawio-skill-for-aws-architecture/

その後もこのSkillを複数のプロジェクトで使っていますが、Skillは .claude/skills/ に置くものなので、新しいプロジェクトのたびにフォルダーをコピーしていました。あちこちにコピーするのは効率が悪いと感じたので、Claude CodeのPluginとしてパッケージ化し、GitHubのリポジトリからインストールできるようにしてみました。

今回作ったリポジトリはこちらです: https://github.com/cm-obuchi-hugo/drawio-for-sa

検証環境

• macOS Tahoe 26.6.2
• Claude Code 2.1.281（モデルは Opus 5.5）
• draw.io Desktop 31.4.5（.drawio システム構成図レビュー用）

手順

公式ドキュメントの Convert existing configurations to plugins を参考に進めました。

ファイルを揃える

まず、Plugin専用のフォルダーを作ります。そして、配布したいSkillやAgent、Commandなどをそのフォルダー配下に配置します。

Skill・Agent・Command・Hookを全部入れる場合、フォルダー構成は次のようになります（公式ドキュメントの構成をもとにした例で、今回のPluginの構成ではありません）。

my-plugin/
├── .claude-plugin/
│   ├── marketplace.json    # marketplace catalog (used by /plugin marketplace add)
│   └── plugin.json         # plugin metadata
├── skills/
│   └── code-review/
│       └── SKILL.md
├── agents/
│   └── reviewer.md
├── commands/
│   └── deploy.md
└── hooks/
    └── hooks.json

注意点として、.claude-plugin/ の中に置くのは plugin.json（と marketplace.json）だけです。skills/ や agents/ などは .claude-plugin/ の中ではなく、Pluginのルート直下に置きます。

今回のPluginはSkillが1つだけなので、.claude/skills/drawio/ をそのまま skills/drawio/ にコピーしました。SKILL.md の中身は変えていません。

marketplace.json と plugin.json は次で説明します。

marketplace.jsonファイルの作成

Marketplaceは、Pluginのカタログのようなものです。ユーザーは /plugin marketplace add でMarketplaceを登録してから、その中のPluginをインストールします。

GitHubのリポジトリから /plugin コマンドでインストールしてもらうには、リポジトリに .claude-plugin/marketplace.json を置く必要があります。今回はリポジトリ自体を「Pluginが1つだけ入ったMarketplace」にしました。

今回使った marketplace.json です（作者情報は一般化しています）。

{
  "$schema": "https://json.schemastore.org/claude-code-plugin-marketplace.json",
  "name": "drawio-for-sa",
  "owner": { "name": "<your-name>" },
  "description": "draw.io diagram generation skill tuned for AWS solution-architecture diagrams",
  "plugins": [
    {
      "name": "drawio-for-sa",
      "source": "./",
      "description": "draw.io diagram generation skill tuned for AWS solution-architecture diagrams",
      "license": "Apache-2.0"
    }
  ]
}

• name: Marketplaceの名前。インストール時の plugin名@marketplace名 の @ 以降になります
• owner: Marketplaceの管理者
• plugins: このMarketplaceに載せるPluginの一覧
  • name: Pluginの名前。インストール時の @ の前の部分です。plugin.json の name と揃えておきます
  • source: Pluginの置き場所。Marketplaceのルート（.claude-plugin/ があるフォルダー）からの相対パスで書きます。今回はリポジトリのルートがそのままPluginなので "./" にしました

公式ドキュメント によると、必須なのは name・owner・plugins と、各Pluginの name・source です。

今回はMarketplace名とPlugin名がどちらも drawio-for-sa なので、インストールIDは drawio-for-sa@drawio-for-sa になります。少し冗長ですが、動作には問題ありません。

plugin.jsonファイルの作成

plugin.json はPlugin自体の情報を書くファイルです。今回使った内容です（作者情報とURLは一般化しています）。

{
  "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
  "name": "drawio-for-sa",
  "version": "0.1.0",
  "description": "draw.io diagram generation skill tuned for AWS solution-architecture diagrams",
  "author": { "name": "<your-name>" },
  "homepage": "https://github.com/<owner>/<repo>",
  "repository": "https://github.com/<owner>/<repo>",
  "license": "Apache-2.0",
  "keywords": ["drawio", "diagram", "aws", "architecture", "solution-architecture", "skill"]
}

• name: Pluginの識別子で、唯一の必須項目です。Skillはこの名前で名前空間が付き、今回のSkillは /drawio-for-sa:drawio で呼び出します
• version: 任意です。ただし設定した場合、ユーザーはこの値が上がったときだけ更新を受け取ります。中身を変えたら version も上げる必要があります
• それ以外（description、author、homepage など）は任意項目です

各項目の詳細は Plugins reference にあります。

README・LICENSE・NOTICE（任意）

README.md、LICENSE、NOTICE はPluginの動作には必要ありません。

今回はインストール手順や使い方を README.md に書きました。また、元のSkillは jgraph/drawio-mcp（Apache-2.0）の skill-cli をforkしたものなので、LICENSE と、元のSkillへのリンクや変更点を書いた NOTICE も入れています。

検証してGitHubにpushする

pushする前に、claude plugin validate でmanifestをチェックしました。

claude plugin validate .

問題がなかったので、GitHubのリポジトリにcommitしてpushしました。

他の人がインストールするには、リポジトリにアクセスできる必要があります。今回はpublicリポジトリにしました。

インストールして使ってみる

インストール手順はリポジトリの README.md にも書いてあります。別のフォルダーで新しくClaude Codeのセッションを開いて試しました。

1) Marketplaceを登録する

/plugin marketplace add cm-obuchi-hugo/drawio-for-sa

Successfully added marketplace: drawio-for-sa

ここで一度ハマりました。Marketplaceを登録しただけではPluginはインストールされません。この時点で /reload-plugins しても、Pluginは0件のままです。

❯ /reload-plugins
  ⎿  Reloaded: 0 plugins · 0 skills · 6 agents · 0 hooks · 0 plugin MCP servers · 0 plugin LSP servers

2) Pluginをインストールする

/plugin install drawio-for-sa@drawio-for-sa

インストール時にはスコープを選びます。

今回はLocal scopeでインストールしました。インストール後、プロジェクト側に作られたのは .claude/settings.local.json だけで、中身は有効化のフラグ1行でした。

{
  "enabledPlugins": {
    "drawio-for-sa@drawio-for-sa": true
  }
}

SKILL.md などのファイル自体はプロジェクトにはコピーされていません。Plugin本体は、（MacOSの場合）~/.claude/plugins/ 配下に置かれていました。

3) Skillを使う

/drawio-for-sa:drawio で呼び出すか、普通にAWS構成図を頼めばSkillが使われます。

生成されたシステム構成図はこちらです。

おわりに

Pluginにする作業自体は、plugin.json と marketplace.json を書いてSkillのフォルダーをコピーするだけでした。

Marketplaceの登録とPluginのインストールは別のステップなので、READMEでは2ステップであることを明記しました。

SkillをPluginにしておくと、次からのプロジェクトで使うのがかなり楽になりますし、チームメンバーに共有するのも手軽です。少しずつアップデートしていけば、自分のセットアップをどこでも使える形にできて、チームのセットアップも管理しやすくなりそうです。ぜひ試してみてください。