Garden Skills

Claude Code、Cursor、Codex、その他の AI コーディングエージェント向けに、本番環境ですぐに使える Agent Skills を厳選したコレクション。

web-video-presentation _{Web 動画 / プレゼンテーション}	web-design-engineer _{デザイン / フロントエンド}
gpt-image-2 _{画像生成 / プロンプト}	beautiful-article _{あらゆる素材 → 美しい記事}

English · 中文文档 · 日本語

インストール	使い方	コントリビュート
インストール `skills` CLI（npx） Claude Code プラグインマーケットプレイス Releases のバージョン固定 `.zip` 手動コピー Git submodule	互換性 Skill とは？	コントリビュート謝辞ライセンス

カテゴリ: Web 動画 / プレゼンテーションエンジニアリング
用途: スクリプト、記事、レッスン、製品デモ、トークを、シネマティックな動画として画面録画できるクリック駆動の 16:9 Web プレゼンテーションに変換します。

web-video-presentation は、動画制作環境のように振る舞う録画対応の Vite + React + TypeScript プレゼンテーションを構築します。このワークフローでは、生の記事をナレーションスクリプトに変換し、スクリプトの各ビートをフルスクリーンシーンにマッピングし、必要なチェックポイントで一時停止し、ビジュアルアウトラインの承認後にオプションでナレーション音声を合成できます。

主な特徴:

安定した画面録画のため、ビューポートに合わせてスケールする固定 1920×1080 ステージ
クリック / キーボード駆動の (chapter, step) カーソル、ビジュアルステップごとに 1 つのナレーションビート
スクリプト、テーマ、アウトライン、実装モード、オプションの音声に対する厳格なコラボレーションチェックポイント
録画中もステージをクリーンに保つ、ホバー時のみ表示される進捗コントロール
23 種類のビルトインテーマ（midnight-press から swiss-ikb まで）を備えたテーマトークンアーキテクチャ。エディトリアル、ターミナル、エンジニアリング、スイス国際主義など、各テーマが独自のデザインシグネチャを持つ
プラガブル TTS：プロバイダー非依存の音声ランナー。2 つのビルトインプロバイダー（MiniMax mmx-cli + curl 経由の OpenAI TTS）を同梱し、ElevenLabs / edge-tts / Azure / Google Cloud / macOS say 用のコピペ可能なスニペットも付属
再利用可能なステージプリミティブと録画ガイダンスを備えた Vite + React + TypeScript プロジェクトのスキャフォールド

_{creative-voltage
クリエイティブトーク} _{blueprint
技術アーキテクチャ} _{swiss-ikb
データレポート} _{chalk-garden
科学解説}

_{↑ 23 種類のテーマを一望 — 完全なギャラリーを開くと、ライブ 16:9 プレビュー、デザインシグネチャ、用途タグ付きで閲覧できます。}

リンク: README · SKILL.md · Download v1.2.2 .zip

`web-design-engineer`

カテゴリ: デザイン / フロントエンド
用途: Web ページ、ランディングページ、ダッシュボード、インタラクティブプロトタイプ、HTML スライドデッキ、アニメーション、UI モックアップ、データビジュアライゼーション、デザインシステムの探求。

web-design-engineer は、AI が生成する Web 成果物を単に機能するだけのものから、洗練され、意図的で、視覚的に印象に残るフロントエンド作品へと変えます。エージェントをデザインエンジニアとして扱い、まず製品コンテキストを理解し、次にデザインシステムを宣言し、初期 v0 を示し、フルエクスペリエンスを構築し、結果を検証します。

主な特徴:

要件 → コンテキスト → デザインシステム → v0 → フルビルド → 検証という 6 ステップのデザインワークフローを定義
アンチクリシェのブロックリストとより強いビジュアル判断力で、一般的な AI UI パターンを超える
デザインディレクション・アドバイザー（6 学派の差別化された 3 択推薦）と、anchor 付きスタイルレシピ 25 種類（Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century など）を内蔵。各レシピにはコピー可能なパレット、タイポグラフィ、シグネチャムーブ、アンチパターンが揃っており、デザインシステム宣言にそのまま貼り込める
HTML / CSS / JavaScript / React プロトタイプをカバーし、レスポンシブレイアウト、モーション、インタラクションの仕上げに関するガイダンスを提供
インライン React + Babel、CSS トークン、oklch() カラー処理、コンテナクエリ、reduced-motion 対応の実装ルールを含む
デバイスフレーム、スライドエンジン、アニメーションタイムライン、ダッシュボード、その他の再利用可能な Web 成果物のための高度なパターンリファレンスを同梱

_{aesop アポセカリー}	_{muji-kenya-hara 器物カタログ}	_{monocle-magazine 雑誌目次}	_{stripe-press 書籍詳細}
_{bloomberg-terminal 取引ダッシュボード}	_{linear 開発者 LP}	_{vercel-mesh デプロイ Hero}	_{tufte-dataink データナラティブ}
_{mid-century-modern ポスターオマージュ}	_{y2k-retrofuturism Y2K ポータル}	_{businessweek-turley 編集カバー}	_{active-theory 没入型ローンチ}

_{↑ 25 種類の anchor 付きレシピから代表的な 12 種類を抜粋 — 完全なギャラリーを開くと、25 種類すべての実作品（アポセカリーページ、取引ワークステーション、雑誌カバー、Y2K ポータル、ミッドセンチュリーポスター…）がシグネチャムーブと用途タグ付きで閲覧できます。}

リンク: README · SKILL.md · Website · Demo · Download v1.2.2 .zip

`gpt-image-2`

カテゴリ: 画像生成 / プロンプトエンジニアリング
用途: ポスター、UI モックアップ、製品ビジュアル、インフォグラフィック、学術図、技術図、コミック、アバター、ストーリーボード、ブランディングボード、画像編集ワークフロー。

gpt-image-2 は、GPT Image 2 および OpenAI 互換の画像 API に特化した画像生成スキルです。完全にローカルな Garden での生成、ホストネイティブの画像ツールへの委譲、画像ツールがない場合のプロンプトのみのアドバイザーモードなど、異なるエージェント環境で動作するように設計されています。

主な特徴:

3 つのランタイムモードをサポート: モード A: Garden ローカル、モード B: ホストネイティブ委譲、モード C: アドバイザー専用プロンプト作成
すべてのタスクをモード検出から開始し、スキルが間違った実行パスを暗黙的に選択しないようにする
references/ 配下に 18 のビジュアルカテゴリと 79 の構造化プロンプトテンプレートを提供
専用のワークフローとスクリプトを通じて、画像生成と画像編集の両方をカバー
Garden モードでは、再利用、レビュー、バージョン管理のためにプロンプトと生成画像を garden-gpt-image-2/ 配下に保存

Selected Live Cases

`background-replacement` _{人物写真の背景差し替えとネオン再ライティング。}	`chat-interface-scene` _{Claude 風 AI アシスタントの製品スクリーン。}	`live-commerce-ui` _{有名人ライブコマース画面。}	`product-card-overlay` _{スキンケア LP の Hero ビジュアル。}
`bento-grid-infographic` _{iPhone 16 Pro の高密度な一枚解説。}	`system-architecture` _{マルチテナント AI SaaS の本番構成図。}	`dense-explainer-slides` _{AI Agent の仕組みを一枚で説明。}	`food-map` _{街歩き向けの編集型フードマップ。}
`exploded-view-poster` _{Vision Pro 2 の光学系と演算モジュール分解図。}	`neural-network-architecture` _{論文向け ViT-B/16 アーキテクチャ図。}	`cosmetic-packaging` _{高級スキンケアのギフトボックス構成。}	`anime-key-visual` _{ゲームローンチ向けのトリミング安全な KV。}

_{↑ 160+ 件の公開ケースライブラリから代表的な 12 件を抜粋 — スキルギャラリーを開くか、ライブサイトで閲覧できます。}

リンク: README · SKILL.md · Website · Download v1.0.4 .zip

`kb-retriever`

カテゴリ: 検索 / ローカル知識ベース
用途: ローカルの knowledge/ ディレクトリから質問に答え、構造化されたドキュメントを検索し、エージェントのコンテキストを溢れさせることなく Markdown、テキスト、PDF、Excel ファイルから根拠を抽出します。

kb-retriever は、慎重で段階的な検索を中心に構築されたローカル知識ベースのリトリーバです。ファイル全体を読み込むのではなく、階層的なインデックスファイルをたどり、候補集合を絞り込み、複雑なファイルタイプを正しく処理し、出典付きで回答します。

主な特徴:

階層化された data_structure.md ファイルを使用して、コンテンツを検索する前に知識ベース内を移動
PDF および Excel ファイルに対してlearn-before-processルールを強制し、抽出や分析の前に同梱のリファレンスドキュメントを使用
正確なキーワード検索、ローカルウィンドウ読み込み、同義語、反復的なリファインメントを組み合わせる
検索を最大 5 ラウンドに制限し、探索を制御された範囲に保つ
grep、pdftotext、pdfplumber、pandas のワークフローと、出典を意識した回答フォーマットを含む

リンク: README · SKILL.md · Download v1.0.1 .zip

`beautiful-article`

カテゴリ: 編集 · あらゆる素材 → 美しい記事
用途: URL / PDF / DOCX / Markdown / プレーンテキスト / スクリーンショット / 貼り付けたメモを、洗練された共有しやすい記事に変換します — ロングフォーム、ブリーフィング、解説記事、チュートリアル、レビュー、ビジュアルエッセイ、対話・インタビューの書き起こし。

beautiful-article は編集型の harness Skill です — 単に「Web ページを作る」のではなく、素材を編集・デザインして、原文より読みやすく、共有しやすく、保存しやすい記事に仕上げます。Skill は source → plan → ダブル確認 → 生成 → 最終レビュー → 修復 という小さなループで進み、3 つのハードチェックポイントで一時停止して、記事タイプ・テーマ・レイアウト・画像戦略・カバー・配信形式の編集権をユーザーに保ちます。

主な特徴:

まずは記事ありき — 焦点は常に「記事」そのもの：より良い読書体験、より良いリズム、より良い美学。配信物は自己完結したファイル（HTML、オプションで PDF）ですが、それは配信ディテールであって目的ではありません
Reacticle コンポーネントプロトコル — prose-first の意味的コンポーネント（Hero / Lead / Section / Quote / Callout / Image / Formula / CodeBlock / Table…）と、テーマトークンのみ許可される Raw 自由層。基盤の React ライブラリは ConardLi/reacticle にあります
10 種類の記事タイプ + 推奨保留率パッケージ — longform · ~100% / tutorial · ~90% / full-report · ~80% / explainer · ~80% / dialogue · ~80% / review · ~70% / essay · ~70% / briefing · ~50% / visual-essay · ~40% / interactive-explainer · ~25% 抜粋 + 75% AI 再構成
11 種類のテーマ authoring profile（tufte、press、bayer、bodoni、vignelli、sottsass、freddie、andy、fuller、knuth、shannon）— 各々が CSS ではなく Agent 向けの Markdown コントラクト
ハードコラボレーションチェックポイント、項目ごとに独立確認（サイレントデフォルト禁止）、3:4 ブックカバー、TOC デフォルト ON、目標言語へのネイティブ翻訳ステップ
ノードごとの品質プロトコル — Plan は主 Agent インラインチェック、First Spread / Section / Final は sub-agent reviewer、修復は最小スライス

テーマギャラリー

_tufte	_press	_bayer	_bodoni
_vignelli	_sottsass	_freddie	_andy

リンク: README · SKILL.md · Download v0.1.0 .zip

インストール

サポートされているインストール方法は 5 つあります。自分のスタックに合うものを選んでください:

#	方法	用途	バージョン固定？
A	`skills` CLI（`npx skills add`）	あらゆるエージェント、ワンラインインストール、スキルをピンポイントで選択	✅ タグ URL 経由
B	Claude Code プラグインマーケットプレイス	プラグインパックを購読したい Claude Code ユーザー	✅ マーケットプレイスのバージョン経由
C	GitHub Releases のバージョン固定 `.zip`	CI / エアギャップ環境 / 再現可能なインストール	✅ ✅（不変）
D	`git clone` 後の手動コピー	スキル自体のローカルでのハック	❌（`main` を追跡）
E	Git submodule	より大きなプロジェクトにベンダリングし、アップストリームの更新を取り込みたい	✅ submodule の SHA 経由

上記の各スキルセクションには「Links:」行に Download v<version> .zip リンクがあり、現在のバージョン固定リリースアーティファクトを指しています。これらの URL はリリースごとに scripts/release/update-readme.mjs によって自動的に書き換えられるため、常に最新の不変バージョンを示します。

方法 A · `skills` CLI（npx）

最速のエージェント非依存のパスです。エージェント（Claude Code、Cursor、Codex など）を自動検出し、スキルを適切なディレクトリにドロップする標準的な npx skills CLI を使用します。

# 4 つのスキルすべてをインストール（最新）
npx skills add ConardLi/garden-skills

# 1 つのスキルだけをインストール（最新）
npx skills add ConardLi/garden-skills -s web-design-engineer

# プロジェクト単位（./.skills）ではなくグローバル（~/.skills）にインストール
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

# 特定のエージェントをターゲットにする
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code

デフォルトは main の最新コミット。 これが 95% の場合に求められるものです。 CLI は各スキルの最新の公開済み SKILL.md をソースツリーから直接追跡します。

バージョンを固定したい？（CI / 本番） タグスコープの tree/ URL を使用します。これはリリースが切られた正確なコミットを指します:

# 1 つのスキルを特定のリリースに固定
npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer

各スキルについて、現在のバージョン固定 .zip URL は上記の「Links:」行にもインラインで表示されています（Download v<version> .zip リンク）。

便利なサブコマンド:

npx skills list                 # インストール済みのスキル
npx skills find web-design      # レジストリを検索
npx skills update               # すべてを更新
npx skills remove kb-retriever  # アンインストール

方法 B · Claude Code プラグインマーケットプレイス

Claude Code を使用している場合、マーケットプレイスを購読して、1 つ以上のスキルをバンドルしたプラグインパックをインストールできます:

/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 で宣言されています:

プラグインパック	含まれるスキル
`presentation-skills`	`web-video-presentation`
`web-design-skills`	`web-design-engineer`
`knowledge-base-skills`	`kb-retriever`
`image-generation-skills`	`gpt-image-2`

方法 C · Releases のバージョン固定 `.zip`

正式なリリースごとに、不変の .zip（SHA-256 チェックサム付き）が GitHub Releases に公開されます。正確なバイト列が後から変わらないことを保証する必要がある場合は、CI、Dockerfile、エアギャップインストーラからこれにピン留めしてください。

# <skill> と <version> を希望するバージョンに置き換えてください。
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/   # または .agents/skills/、.codex/skills/ ...

フローティング「常に最新」の URL も利用可能で、ワンオフのインストールに便利です:

https://github.com/ConardLi/garden-skills/releases/latest/download/<skill>-<version>.zip

すべてのスキルのバージョン固定 URL は、この README にインラインでリストされています - 上記の各スキルの「Links」エントリの下にある「Download」行を参照してください。これらはリリースパイプラインによって自動的に同期されます。

方法 D · プロジェクトへ手動コピー

リポジトリをクローンし、必要なスキルフォルダをコピーします。スキル自体をフォークまたはハックしたい場合に便利です。

git clone https://github.com/ConardLi/garden-skills.git
cp -r garden-skills/skills/web-design-engineer  your-project/.claude/skills/
# Cursor / 汎用エージェント:
cp -r garden-skills/skills/web-design-engineer  your-project/.agents/skills/

次回エージェントがワークスペースをスキャンしたときに、スキルが検出されます。

方法 E · Git submodule

アップストリームの更新を追跡したい、より大きなプロジェクトへのベンダリング用:

git submodule add https://github.com/ConardLi/garden-skills.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer

再現性のためにリリースタグに固定:

cd vendor/garden-skills
git checkout web-design-engineer-v1.0.0

互換性

エージェント / ランタイム	スキルの場所	ステータス
Claude Code	`.claude/skills/<name>/` またはプラグインマーケットプレイス経由	✅ テスト済み
Claude.ai（Web）	Settings → Capabilities → Skills	✅ テスト済み
Cursor	`.agents/skills/<name>/`	✅ テスト済み
Codex CLI	`.codex/skills/<name>/`	✅ テスト済み
Gemini CLI	extension manifest	✅ テスト済み
OpenCode	`.opencode/skills/<name>/`	✅ テスト済み

SKILL.md フォーマットは設計上ポータブルです。エージェントがスキルをサポートしていれば、フォルダをスキャンするディレクトリにコピーするだけで動作するはずです。このマトリクスを拡張する PR を歓迎します。

Skill とは？

Skill は、エージェントがオンデマンドで読み込める自己完結型のフォルダです。これは SKILL.md（YAML フロントマター + 指示）と、オプションでリファレンスドキュメント、スクリプト、アセットで構成されます:

<skill-name>/
├── SKILL.md      ← 必須: いつ使うか + どのように使うか
├── README.md     ← 人間向けドキュメント
├── references/   ← オプション: エージェントがオンデマンドで読み込む拡張ドキュメント
├── scripts/      ← オプション: 決定論的な実行可能ヘルパー
└── assets/       ← オプション: テンプレート、フォント、アイコン

エージェントは、フロントマターの description 行からスキルを有効化するかどうかを決定します。したがって、description はあなたとエージェントの間の契約です。詳細な仕様については、agentskills.io および Anthropic のリファレンスリポジトリを参照してください。

コントリビュート

バグレポート、新しいスキル、ツールの改善など、すべてを歓迎します。

メンテナー向けのドキュメント（リポジトリ構成、リリースプロセス、バージョンルール、CI ワークフロー、トラブルシューティング）は CONTRIBUTING.md (中文) にあります。スキルを追加したりリリースを切ったりしたい場合は、まずそちらを読んでください。

クイックオリエンテーション:

git clone https://github.com/ConardLi/garden-skills.git
cd garden-skills
npm run list      # すべてのスキル + マニフェストステータスを表示
npm run validate  # CI がすべての PR で実行するのと同じチェック

謝辞

このコレクションは、以下の肩の上に成り立っています:

Anthropic - Agent Skills 仕様および anthropics/skills リファレンスリポジトリの提供。
Claude Design - web-design-engineer のインスピレーションとなったシステムプロンプト。オリジナルは参考のため dist/prompt/claude-design-system-prompt.md に保存されています。
より広い OSS スキルコミュニティ - さらなる発見のために travisvn/awesome-claude-skills と obra/superpowers を参照してください。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Garden Skills

目次

`web-video-presentation`

`web-design-engineer`

`gpt-image-2`

Selected Live Cases

`kb-retriever`

`beautiful-article`

テーマギャラリー

インストール

方法 A · `skills` CLI（npx）

方法 B · Claude Code プラグインマーケットプレイス

方法 C · Releases のバージョン固定 `.zip`

方法 D · プロジェクトへ手動コピー

方法 E · Git submodule

互換性

Skill とは？

コントリビュート

謝辞

ライセンス

FilesExpand file tree

README.ja-JP.md

Latest commit

History

README.ja-JP.md

File metadata and controls

Garden Skills

目次

web-video-presentation

web-design-engineer

gpt-image-2

Selected Live Cases

kb-retriever

beautiful-article

テーマギャラリー

インストール

方法 A · skills CLI（npx）

方法 B · Claude Code プラグインマーケットプレイス

方法 C · Releases のバージョン固定 .zip

方法 D · プロジェクトへ手動コピー

方法 E · Git submodule

互換性

Skill とは？

コントリビュート

謝辞

ライセンス

`web-video-presentation`

`web-design-engineer`

`gpt-image-2`

`kb-retriever`

`beautiful-article`

方法 A · `skills` CLI（npx）

方法 C · Releases のバージョン固定 `.zip`