AIに「入力画面を作って」と頼んだのに、想像と違う画面が出来上がる。そんな行き違いは、実装の速度よりも、前提と完成条件を共有するところから見直せるで。
mattpocock/skillsは、仕様整理、調査、テスト、コードレビューなど、開発の小さな作業に使うエージェントスキル集やで。この記事は公式README、導入案内、LICENSEを確認した紹介やで。実機での実行・性能比較は行ってへんで。
スキルの選び方
AIと一緒にアプリを作る開発者が対象やで。READMEは小さく組み合わせられるスキルを用意し、利用者が呼び出すものと、状況に合わせてモデルが使うものを区別してるで。質問による要件の整理、会話からの仕様化、計画の作業分割などを使い分けられるで。
今回のゴールと環境
小さなフォームの仕様を質問で整理し、ローカルの文書に残す。
確認した範囲：2026年10月24日に公式READMEや導入資料を読み直して、以下の手順を具体化したで。この改訂でアプリのインストールから最終結果までを実機で通したわけやない。成功の目安は、手元で試すときのチェックとして使ってな。
準備
ここではWindows 11 x64とPowerShellで進めるで。スタートで「PowerShell」を検索して開いてな。Node.js公式ダウンロードで24系LTS・Windows・x64のInstaller（.msi）を選び、ダウンロードしたファイルを開いて画面に沿って入れてな。入れ終わったらPowerShellを開き直すんや。
node --version
npm.cmd --version両方にバージョンが出たら準備OKや。以下ではWindowsのスクリプト実行ポリシーで止まりにくいnpm.cmdとnpx.cmdを使うで。インストール済みなら入れ直す必要はないで。
Git公式のWindows用ページからx64 Setupをダウンロードし、インストーラーの案内に沿って入れてな。PowerShellを開き直し、git --versionでバージョンが出ることを確認するんや。
今回はClaude Codeを使うで。使えるプランやAPIの支払いは別に必要やから、公式の準備・ログイン案内を先に確認してな。PowerShellで次を実行し、インストール後は新しいPowerShellを開いてな。
winget install Anthropic.ClaudeCodeWinGetがないときは、WindowsのMicrosoft Storeで「アプリ インストーラー」を入れるか更新してからやり直してな。次の確認でバージョンが出たら準備OKや。実際にclaudeを起動するんは、下の練習フォルダーを作ってからやで。初回起動は画面の案内でブラウザーにログインし、戻って入力欄が使えることを確かめてな。
claude --versionPowerShell用のコマンドと、Claude Codeの入力欄へ送る文は別やで。「Claude Codeで入力」と書いたブロックをPowerShellへ貼らんようにしてな。AIにファイルを読ませると、その内容が利用するサービスへ送られることがあるで。最初は以下の架空例だけで試そか。
New-Item -ItemType Directory -Force "$env:USERPROFILE\github-practice\mattpocock-skills" | Out-Null
Set-Location "$env:USERPROFILE\github-practice\mattpocock-skills"使い方
@'
<!doctype html><html lang="ja"><meta charset="utf-8"><title>練習フォーム</title><form><label>名前 <input name="name"></label><button>確認</button></form></html>
'@ | Set-Content index.html -Encoding UTF8練習用のindex.htmlを作ったで。プラグインの導入場所は次の案内を守ってな。
PowerShellで入力：
claude plugin install mattpocock-skills@claude-plugins-officialこの例は公式マーケットプレイスのプラグイン方式や。npx skillsのコピー方式は重ねて入れんといてな。
Claude Codeが開いてるときは/exitで閉じ、PowerShellで同じフォルダーからclaudeを起動し直すで。フォルダーを信頼するか聞かれたら、今作った練習用の場所か確認してな。
Claude Codeで入力：
/setup-matt-pocock-skills
課題はローカルファイルで管理し、文書はこの練習フォルダーのdocsに保存したい。外部のIssueやPRは作らない。成功の目安：セットアップ後に /grill-with-docs を選び、「index.htmlのフォームに必須入力を加えたい。まず入力項目と空欄時の動作を質問して。決まった内容をdocsに保存して」と依頼してな。docsに仕様が残り、空欄と入力済みの確認方法が書かれていたら今回のゴールや。
仕組みとデータの流れ
トラブルシューティング
| 困ったこと | 確認すること |
|---|---|
| 導入した機能が出ない | Claude Codeを再起動し、導入時に選んだ対象と保存先を確認してな。/pluginで使うプラグインの状態も確認するんや。 |
| 想定外のファイルを変えようとする | 実行前の提案を読み、練習フォルダーだけに対象を絞ってな。既存の仕事用ファイルにはそのまま適用せんといてな。 |
終了と再開
Claude Codeは入力中ならEscで作業を止め、/exitで終了できるで。続けるときは同じ練習フォルダーでclaudeを実行するんや。保存したHTMLはエクスプローラーからダブルクリックして表示を確認してな。
公式READMEと最新の導入案内も確認してな。配布版や外部サービスの変更で、手順が変わることがあるで。
使い方の流れ
作業のビフォーアフター
| これまでの作業 | 導入後に目指す進め方 |
|---|---|
| 曖昧な依頼のまま実装し、出来上がってから前提の違いに気付く。 | 質問、仕様、確認条件を残してから、小さな変更に取りかかる。 |
導入方式と保存先
READMEは同じエージェントにプラグイン方式とファイルコピー方式を重ねると、スキルが二重になると説明してるで。また仕様やチケットを実際の課題管理サービスに作る機能もあるため、保存先と実行する操作を先に確認してな。
すべてのスキルを一度に使う必要はないで。まず一つの仕様を作り、利用者、入力、正常時、例外時、未決事項が読み取れるかを確認してな。記事の図は架空例で、品質や工数の改善を測定したものやないで。
公式資料と利用条件
本体のLICENSEはMITやで。利用するAIサービスや外部の課題管理サービスの条件は別やで。
確認日：2026年10月24日。掲載対象はHysen Labsの30日間スター純増CSV（2026年9月23日〜10月23日）の上位20件から、過去掲載を除いて選定したで。Hysen Labsが追跡するリポジトリ内の順位であり、GitHub全体を網羅するランキングやないで。集計は期間末と期間初のスター数の差分。データ提供：Hysen Labs（CC BY 4.0）。機能や条件は公式資料に基づく話やけど、実際の動作や生成結果を本記事で検証したものやないで。