この記事について
普段、Claude Code でいろいろと skill を作りながら、業務を効率化できないかと試しています。ただ、skill の共有において、大きく 2 つの課題があるように感じています。
- 共有された skill が増えても「どういう時に使うか」がパッと掴めない。使いどころは作った本人の頭には入っているので本人は困らないが、第三者には伝わりにくく、数が増えるほど全体像が見えなくなる。
- テキストの説明だけだと、中身を直感的に掴みにくい。SKILL.md を開いても説明文が並ぶだけで、込み入った skill ほどパッと理解するのが難しい。=認知負荷の問題
上記課題を解決するために、skill を一覧化するカタログがあればいいのでは、とふと思って、skill を手書きグラレコで一覧化するページを作ってみました。
アーキテクチャ
SKILL.md ファイルが同一のフォーマット（frontmatter に name・description・tags）であることを活かして、こんな構成にしてみました。
本筋から逸れますが、Draw.ioスキルが作図には便利です
https://github.com/jgraph/drawio-mcp/tree/main/skill-cli#drawio-skill-for-claude-code
行っていることはシンプルです。
- skill を集約用のリポジトリに置く（
SKILL.mdが skill 本体） - 公開ページがビルド時に各
SKILL.mdの frontmatter を gray-matter でパースして、グラレコ付きの一覧をつくる - 静的サイトとして Cloudflare Workersで公開する
skill を足して push すれば一覧が更新されるようになっています。
Cloudflare Workers へのデプロイには、Cloudflare 公式の Claude Code skill（cloudflare/skills）が公開されていたので活用しました。
各 skill のグラレコは、次に挙げる grarec という自作 skill で生成しています。
skill の中身
一覧では、各 skill の description（SKILL.md の frontmatter）をそのまま出しています。Claude Code の skill は description を「〜したいときに使う」の形で書くのが定石なので、並べるだけで「いつ使うか」が伝わる、というのが今回の肝です。グラレコで視覚の当たりをつけ、description で用途を掴み、気になればカードから SKILL.md に飛んで中身を読む、という流れです。
ここでは、その一覧のグラレコを生成している grarec を例に中身を紹介します。
grarec スキル
任意の concept から手書きグラレコ風の画像を 1 枚つくる skill。一覧のグラレコもこれで生成しています。サムネ（文字なしのアイコン）と詳細（日本語ラベル入りの工程図）の 2 モードで生成できるような仕組みです。
画像生成には、2026-05-29 に正式 GA された Gemini の Nano Banana Pro（Gemini 3 Pro Image）を使っています。
プロンプト
スタイル定義は skill の中に一元化しています。スタイル句は固定し、skill ごとに差し替えるのは {concept} だけです。
サムネ（文字なし）のプロンプト
A hand-drawn sketchnote (graphic recording / グラレコ) style icon for: {concept}.
Style: marker on white paper, minimal lines, monochrome with one accent color ({accent}). Square aspect ratio.
Important: NO text or letters in the image — visual icon only.
最後の行で、サムネには文字を入れないよう指定しています。
詳細（工程図）のプロンプト
A detailed graphic recording (グラレコ) infographic for: {concept}
可視化したい工程: {sections}
- marker on white paper, hand-drawn sketchnote
- 工程を icon + 矢印で 4〜7 要素にする
- 画像内の手書きラベルは日本語
- 文字の説明より visual metaphor を優先
詳細モードは日本語ラベルを許可し、工程を 4〜7 要素に絞ります。{sections} には工程ラベル（--sections "入力" "生成" "保存" のように渡す）、{concept} に skill の説明、{accent} にアクセント色（sky blue #38bdf8）が入ります。
スクリプトの全文は grarec.py を参照してください。
まとめ
チーム内での skill 活用においては、Anthropic 公式が紹介しているような活用例の共有や、気軽にskillを試して、成功事例を積極的に共有する組織文化づくりも大切だと思います。
ただ、skill を増やすことと同じくらい、「どんな場面で使うか」が伝わることも重要だと感じています。今回のカタログ化は、そのギャップを埋めるための小さな試みです。
skill が増えるほど探しづらさも増していくので、必要な人が必要な skill を見つけやすくする仕組みのひとつとして、このカタログを育てていければと思っています。