ConardLi garden-skills徹底解説｜4実戦SKILL.md搭載のマルチエージェント対応Skillsカタログ

ConardLi氏が2026年4月に公開した ConardLi/garden-skills は、Claude Code・Cursor・Codex・Gemini CLI・OpenCodeなどの主要AIコーディングエージェントで横断動作する本番運用級SKILL.mdのカタログだ。web-video-presentation・web-design-engineer・gpt-image-2・kb-retrieverという4つの専門特化スキルを収録し、それぞれが個別バージョン管理・SHA-256検証付き.zip配布・公式プラグインマーケットプレース対応という体裁で揃っている。GitHub Starは2026年5月時点で4,800超、forks 700超を達成している。

Claude Code全体の使い方は Claude Code完全ガイド2026：インストールから本番運用まで をご覧ください。

garden-skillsとは何か—4スキルを「本番運用級」で束ねたSKILL.mdカタログ

ConardLi氏はフロントエンド分野で著名なOSS開発者で、CSS Inspector等の人気拡張を公開してきた人物だ。そのConardLi氏が2026年4月21日にgarden-skillsの初版を公開し、5月12日のpushed_atまでの3週間でStar 4,846を集めている。

garden-skillsの位置づけを一言で表すなら「4スキルそれぞれが厚みのある専門書」というカタログだ。Anthropic公式skillsがPDF/Excel等のOffice文書処理を広く浅くカバーするのに対し、garden-skillsは個別ドメインを深掘りする。各SKILL.mdは数百行規模で、references/配下に参照ドキュメント、scripts/配下に決定論的な実行ヘルパー、assets/配下にテンプレートを揃える構造になっている。

設計思想—「個別ドメインを深く、本番運用の体裁で」

garden-skillsの設計思想は3点に集約できる。

この体裁は社内向けに使うSKILL.mdを設計する際の参考実装として価値が高い。「リリースタグの切り方」「.zip配布の自動化」「マニフェストとプラグインマーケットプレースの両立」という運用面の課題に対する具体回答が、リポジトリ全体に組み込まれているからだ。

Anthropic公式skills・Addy Osmani agent-skillsとの位置関係

3つのSkillsカタログを並べると棲み分けが明確になる。

agent-skillsの徹底分析は Addy Osmani agent-skills徹底解剖 を、Skillsそのものの全体像は Claude Code Skills徹底解説 を併せて参照してほしい。

収録スキル4本の詳細—それぞれが「個別の専門書」

garden-skillsに収録されている4つのスキルを、用途・コア発明・成果物の観点で分解する。

web-video-presentation—スクリプトを「画面録画可能なプレゼン」に変える

web-video-presentationはカテゴリがWeb Video / Presentation Engineeringで、記事・脚本・授業資料・製品デモ・講演をクリック駆動の16:9 Webプレゼンテーションに変換するSkillだ。画面録画してそのままシネマティック動画にできる形で出力する点が他のスライド系Skillとの最大の違いになる。

特徴は5つある。

• 1920×1080固定ステージがビューポートに合わせて伸縮し、画面録画時のずれを防ぐ
• (chapter, step)カーソルがクリック・キーボード操作で進行し、視覚ステップごとに1ナレーション
• 脚本・テーマ・アウトライン・実装モード・音声合成（オプション）にハード協調チェックポイントを設置
• ホバー時のみ表示される進行コントロールで録画時の画面ノイズを排除
• paper-pressからterminal-greenまで複数の視覚言語を選べるテーマトークン構成

実装はVite + React + TypeScriptで、リポジトリ内にステージ用プリミティブと録画ガイダンスが揃っている。「note記事をプレゼン動画化したい」「LTスライドを録画してYouTubeに上げたい」というユースケースで、エージェントに「ナレーション台本→ステージ実装→録画指示」までを一気通貫させたい場合に効く。

web-design-engineer—AIが量産する「凡庸なUI」を脱却する

web-design-engineerはDesign / Frontendカテゴリで、AIが生成しがちなテンプレ的UIを脱却し、意図のある洗練されたフロントエンド成果物を作るためのSkillだ。エージェントを「機能実装者」から「デザインエンジニア」に位置づけ直すアプローチを取る。

ワークフローは6ステップで構成される。

注目すべきは「Anti-Cliché Blocklist」と「Brand Asset Protocol」だ。前者はAIが量産しがちなUIパターン（中央寄せヒーロー＋3カラム特徴＋紫グラデCTA）を明示的に禁止し、後者は「色のhex値より先に、ロゴ・製品画像・UI実機スクショ」をアセットとして優先する規律を強制する。

カバー範囲はWebページ・ランディングページ・ダッシュボード・インタラクティブプロトタイプ・HTMLスライド・アニメーション・UIモックアップ・データ可視化・デザインシステム探索。HTML/CSS/JavaScript/Reactのいずれの形式でも、最終成果物の体裁を「stunning」基準まで引き上げる方針が一貫している。

gpt-image-2—GPT Image 2を「3モード」で使い分ける画像生成Skill

gpt-image-2はImage Generation / Prompt Engineeringカテゴリで、GPT Image 2およびOpenAI互換画像APIに特化した画像生成Skillだ。ポスター・UIモック・製品ビジュアル・インフォグラフィック・学術図版・技術図解・コミック・アバター・ストーリーボード・ブランドボード・画像編集ワークフローまでをカバーする。

最大の特徴は3モード分岐を最初に判定するワークフロー設計にある。

エージェントが「どのモードで動くべきか」を最初に明示判定するため、サイレントに誤った実行パスを選ぶ事故が起きにくい。references/配下には18種類の視覚カテゴリ×80以上の構造化プロンプトテンプレートが揃っており、「学術論文の図」「コーポレートのインフォグラフィック」「製品マーケのキービジュアル」といった用途別に当てはめられる。

Mode A実行時はgarden-gpt-image-2/配下にプロンプトと生成画像を保存し、再利用・レビュー・バージョン管理が可能。プロンプトエンジニアリングを「使い捨て」にしない設計だ。

kb-retriever—RAGではなく「段階的検索」でローカル知識ベースを扱う

kb-retrieverはRetrieval / Local Knowledge Baseカテゴリで、ローカルknowledge/ディレクトリ・Markdown・テキスト・PDF・Excelからエージェントコンテキストを膨張させずに証拠を引き出すSkillだ。

最大の特徴はベクトル検索ではなく、階層インデックスをナビゲートする段階的検索を採用している点だ。

grep、pdftotext、pdfplumber、pandasのワークフローと、ソース付きの回答フォーマット手順までSKILL.md内に明文化されている。RAGエンジンのインフラ（ベクトルDB・embedding計算・インデックス作成）が不要なため、社内ナレッジベース・規程集・製品マニュアル・契約書ドキュメントなど数百〜数千ファイル規模のフォルダに対して、初日から動かせる点が実務的だ。

ベクトル検索を組むほどの規模・継続更新がない知識ベースで、「LLMにファイルを丸ごと食わせると毎回トークンが爆発する」問題を回避したいケースでフィットする。

SKILL.mdの構造と仕様—なぜマルチエージェント横断が成り立つか

garden-skillsが全主要ハーネスで動く根拠は、SKILL.mdのフォーマット仕様に厳密準拠している点にある。SKILL.mdは以下の構造を持つ。

<skill-name>/
├── SKILL.md      ← 必須: 起動条件 + 実行手順
├── README.md     ← 人間向けドキュメント
├── references/   ← 任意: エージェントがオンデマンドで読む参照ドキュメント
├── scripts/      ← 任意: 決定論的な実行ヘルパー
└── assets/       ← 任意: テンプレート・フォント・アイコン

エージェントはSKILL.mdのフロントマター（YAML）のdescription行を見て「このスキルを今のタスクに起動すべきか」を判定する。descriptionがエージェントとSkill作者の契約になっており、ここがあいまいだと意図しないタイミングで起動したり、必要なときに起動しなかったりする。

---
name: web-design-engineer
description: |
  Build high-quality visual Web artifacts using HTML/CSS/JavaScript/React —
  web pages, landing pages, dashboards, interactive prototypes, ...
  Use this skill whenever the user's request involves a visual, interactive,
  or front-end deliverable, ...
---

garden-skillsの各SKILL.mdはdescriptionが具体例リスト＋反例（「Not applicable: pure back-end logic, CLI tools」）まで明示する厚みを持つ。これがマルチエージェント横断時に起動精度を担保する設計だ。

仕様の正式版はagentskills.ioとAnthropic公式のanthropics/skillsリファレンスリポジトリで定義されている。

5つのインストール方法と用途別の選び方

garden-skillsは5通りのインストール方法を用意している。それぞれの用途と特徴を整理する。

Option A: npx skillsが事実上の標準

npx skillsはSkillsのエコシステム標準CLIで、エージェントを自動判別して適切なディレクトリにSkillを配置する。最短ルートは以下だ。

# 4スキル全部（最新）
npx skills add ConardLi/garden-skills

# 1スキルだけ
npx skills add ConardLi/garden-skills -s web-design-engineer

# グローバル（~/.skills）にインストール
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

# エージェント指定
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code

CIや本番運用ではtagスコープURLでピンする。

npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer

Option B: Claude Codeプラグインマーケットプレース

Claude Code利用者はプラグインマーケットプレース経由で、複数Skillをまとめたプラグインパックを購読できる。

/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills

プラグインパックは.claude-plugin/marketplace.jsonで宣言されており、1スキル1パックの構成だ。Claude Code側で更新通知・有効化管理ができる利点がある。

Option C: SHA-256検証付き.zipが本番運用の正解

GitHub Releasesには不変の.zipと.sha256が対で公開される。CI・Dockerfile・エアギャップインストーラーで「バイト単位で固定したい」ケースは必ずこちらを使う。

SKILL=web-design-engineer
VERSION=1.0.0

curl -fsSL -o "${SKILL}.zip" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"

curl -fsSL -o "${SKILL}.zip.sha256" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"

unzip -q "${SKILL}.zip" -d .claude/skills/

「always-latest」のフローティングURLも用意されているが、本番ではタグ固定を強く推奨する。

対応エージェントマトリクス—どこに置けば動くか

garden-skillsが想定している配置先を整理する。

「SKILL.mdフォーマットがポータブル」というのが基本思想だ。エージェントがSkillsをサポートしているなら、スキャンする配置先にフォルダをコピーすれば動く。対応マトリクスはPR受け入れ可能で、新規ハーネス（Kiro・Windsurf等）への拡張が継続している。

garden-skillsのアーキテクチャ概観

garden-skillsがどのように4スキルを並列管理し、配布まで自動化しているかを図示する。

スキル本体・リリース自動化スクリプト・プラグインマーケットプレース定義の3経路が、5つの配布チャネルに分岐していく構造になっている。README中のダウンロードリンクはscripts/release/update-readme.mjsが自動書き換えするため、常に最新タグに連動する。

導入時の注意点と運用上の落とし穴

garden-skillsを導入する際に踏みやすいポイントを整理する。

1. SKILL.mdのdescriptionが長く、起動条件を正確に読む必要がある

各SKILL.mdのdescriptionは具体例・反例・「Not applicable」リストまで含み、数十行に及ぶ。これは起動精度のための設計だが、エージェントが自プロジェクトの文脈で本当に起動すべきかを判断するには、descriptionを一度通読しておくことが重要だ。「webデザイン」と聞いてweb-design-engineerが常に起動するわけではなく、「ピュアロジック・CLIツール・データ処理スクリプト」は明示的に対象外になっている。

2. gpt-image-2のモード判定をスキップしない

Mode判定をスキップして「動くと思ったら動かない」事故が起きやすい。OPENAI_API_KEYがあればMode A、ホスト側に画像ツールがあればMode B、何もなければMode Cというフローを最初に明示判定するルールを必ず守ること。

3. kb-retrieverは「事前準備」が前提

knowledge/配下にdata_structure.md形式の階層インデックスを置いていないと、kb-retrieverの段階的検索が機能しない。導入前にナレッジベースの整備が必要で、これは「RAGエンジン不要」のトレードオフでもある。

4. プラグインパックの.zipサイズに注意

web-video-presentationはVite + React + TypeScriptのプロジェクト雛形を含むため、.zipサイズが他スキルより大きい。Dockerfileで複数スキルを一気に展開する場合、レイヤーサイズに影響することがある。

5. Skill同士のオーケストレーションは未組み込み

garden-skillsは4スキルが並列で配布され、Addy Osmaniのagent-skillsのような「メタスキル（using-agent-skills）でルーター」「SDLCフェーズで横断結合」といったオーケストレーション層は持たない。複数スキルをワークフロー化したい場合は、自プロジェクトのAGENTS.md/CLAUDE.md側でルーティングを書く必要がある。

まとめと使い方の勘所

garden-skillsは「Skillsの本番運用」を1リポジトリで実演する参考実装として価値が高い。個別バージョン管理・SHA-256検証付き.zip・プラグインマーケットプレース・5通りの配布チャネル・マルチエージェント対応マトリクス——どれも自社向けSKILL.mdカタログを作る際に直面する課題への具体回答が揃っている。

4スキル単体の即戦力としては以下の判断軸が使いやすい。

Skills全般の運用設計は Claude Code Skills徹底解説 を、Skillsカタログ各社の比較観点は Addy Osmani agent-skills徹底解剖 と Prismatic Skills徹底解説 を参照してほしい。

参照ソース

• ConardLi/garden-skills（公式リポジトリ）
• garden-skills README（4スキル詳細・インストール5方式・対応マトリクス）
• agentskills.io（SKILL.md公式仕様）
• anthropics/skills（Anthropic公式リファレンス）
• npm skills CLI（npx skills add）