【環境構築②】Stitch Agent Skills をインストールしてみた（Windows）

Stitch Agent Skills とは？

Stitch Agent Skills は、Google Labs が公開している AI コーディングエージェント向けの「拡張知識パック」です。

Claude Code・Cursor・Cline・Gemini CLI などの AI コーディングエージェントに対して、専門的なマニュアル・チェックリスト・サンプルコードを提供し、AIの出力品質を大幅に底上げします。

🔧 イメージとしては「AI に専門書を読ませる」感じ。
スキルなしだと「青いボタン作って」という曖昧な指示になりますが、スキルありだと Background:#1E7BA4, Height:56px, Border-radius:8px のようにデザイントークンを自動適用した高品質な出力が得られます。

利用可能な 6 つのスキル

まずは一覧を確認してみましょう。コマンドプロンプトで以下を実行します。

npx skills add google-labs-code/stitch-skills --list

以下の 6 つのスキルが表示されます。

スキルのインストール手順

インストール場所の確認

スキルは以下のパスに配置されます（Windows の場合）。

C:\Users\[ユーザー名]\.agents\skills\
├── design-md\
│   ├── SKILL.md          ← AI へのミッション指示書
│   ├── scripts\          ← 検証スクリプト
│   ├── resources\        ← 参照リソース・ガイドライン
│   └── examples\         ← サンプルコード（Few-shot 学習用）
└── find-skills\

AI エージェントはこのフォルダを自動的にスキャンし、タスクに応じて適切なスキルを参照します。

他のスキルも追加インストールするには

同じコマンドでスキル名を変えるだけです。

# プロンプト最適化スキル
npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global

# React コンポーネント変換スキル
npx skills add google-labs-code/stitch-skills --skill react:components --global

# マルチページサイト自動構築スキル
npx skills add google-labs-code/stitch-skills --skill stitch-loop --global

まとめ

1. npx skills add google-labs-code/stitch-skills --list  でスキル一覧確認
2. --skill [スキル名] --global  でインストール
3. エージェント選択画面で対象を確認
4. ~\.agents\skills\ にインストールされれば完了

インストール自体は非常にシンプルで、コマンド 1 本で完了します。
肝心なのは「スキルが何をしてくれるのか」を理解したうえで使うこと。

次の記事では、インストールした design-md スキルを使って Claude Code に LP の構成案を読み込ませ、デザインシステム（DESIGN.md）を自動生成した話をご紹介します 👉

関連リンク

• Node.js 公式サイト
• Stitch Agent Skills GitHub
• skills.sh（スキルセキュリティ情報）