コード実装において、Claude CodeなどAIエージェント向けのAgent Skillsエコシステムが急成長し、数千ものスキルが公開されるようになりました。
しかし、日々世界中の人が作成する様々なスキルを目にするたび、こんなことを思っている人も多いのではないでしょうか。
- 「似たようなスキルが多すぎて、どれを使えばいいかわからない」
- 「単発のスキルは使えるけど、プロジェクト全体をどう回せばいいか見えない」
- 「AIに任せると、最初は順調でも途中からテストを書かなくなりコードが破綻する」
この記事では、新規アプリ開発をするにあたり、無数にあるスキルの中から
「全体管理（オーケストレーション）」「開発規律（品質管理）」「記憶の継続」
という役割ごとにベストなスキルを選定し、それらをシームレスに連携させて堅牢なアプリを開発した実践手法を公開します。
今回採用した5つのコアスキルと類似スキルとの比較
アプリ開発を成功させるため、明確に役割を分けた5つのスキルを組み合わせました。
① GSD (Get Shit Done)
-
概要:
大規模・複雑な開発タスクを、要件定義・計画・実装・検証まで一気通貫で進めるための 実行統制スキル - 解決する課題: AIエージェントが途中で文脈を失う、設計方針がブレる、実装が場当たり的になる、検証が漏れる、といった問題を防ぐ
-
中核機能:
仕様整理、タスク分解、ロードマップ作成、状態管理、コンテキスト管理、実装計画の作成 -
導入効果:
「なんとなくAIに作らせる」状態から、「要件→計画→実装→検証」の開発プロセスに変換できる。特に、複雑な開発を途中で破綻させずに進めやすくなる -
注意点:
小さな修正や単発のコード生成にはやや重い。効果を出すには、最初に実現したい仕様や制約をある程度明確にする必要がある -
類似ツールと比較した強み:
仕様・計画・状態・文脈をまとめて管理できる
② Superpowers
-
概要:
AIエージェントに、熟練エンジニアの開発作法を強制的に組み込む開発ワークフロー型スキル群 -
解決する課題:
「AIがいきなりコードを書き始める、設計確認を飛ばす、テストを書かない、レビューせずに完了宣言する、といった“雑な自律開発”を防ぐ -
中核機能:
ブレスト、設計確認、Git worktreeによる分離作業、詳細な実装計画、サブエージェントによる開発、TDD、コードレビュー、ブランチ完了処理などを段階的に実行する -
導入効果:
AIを「速い作業者」ではなく、「設計・実装・テスト・レビューを踏む開発パートナー」として使いやすくなる -
解決する課題:
「AIがいきなりコードを書き始める、設計確認を飛ばす、テストを書かない、レビューせずに完了宣言する、といった“雑な自律開発”を防ぐ -
注意点:
GSDと同様に、単純な修正ではプロセスが重く感じる場合もある。また、TDDやレビューを前提とするため、スピードより品質を優先したい場面向き -
類似ツールと比較した強み:
TDD・レビュー・設計確認など開発工程の規律付けに強い
③ UI UX Pro Max
-
概要:
AIコーディングエージェントに、業界・用途に応じたUI/UXデザイン判断を付与するデザイン支援スキル -
解決する課題:
AIの作るUIが「動くが安っぽい」「配色が合わない」「業界感に合わない」「UX上の配慮が弱い」といった問題を解消する -
中核機能:
161の業界別ルール、67のUIスタイル、161のカラーパレット、57のフォントペアリング、LPパターン、アクセシビリティチェックなどをもとに、プロジェクト要件に合うデザインシステムを生成する -
導入効果:
「とりあえず動くUI」から、「用途・業界・ターゲットに合った見栄えの良いUI」へ引き上げやすくなる -
注意点:
デザイン案はあくまでルールベース・推奨ベースのため、ブランドガイドラインや既存デザインシステムがある場合は、それを優先して調整する必要がある -
類似ツールと比較した強み:
業界別・用途別に見た目と体験設計を底上げできる
④ Claude-Mem
-
概要:
Claude Codeに“長期記憶”を持たせ、過去セッションの文脈を次回以降に引き継ぐためのメモリ拡張スキル -
解決する課題:
セッション終了後にAIが過去の作業内容、設計判断、実装方針、既知のバグ、過去に読んだファイルを忘れてしまう問題を解決する -
中核機能:
セッション中の作業・ツール使用・判断内容を自動記録し、要約・圧縮して保存する。ツール利用の観察記録を自動取得し、意味的な要約を生成し、将来のセッションで使えるようにする -
導入効果:
毎回同じ説明を繰り返す必要が減り、AIがプロジェクトの経緯を踏まえた提案・実装をしやすくなる -
注意点:
機密情報を記憶させない管理が重要。Claude-Memには タグで保存除外するプライバシー制御があるとされていますが、実務利用では保存対象の確認が必要 -
類似ツールと比較した強み:
完全自動化（手動編集不要）、セマンティック検索対応、Endless Modeによる大幅な実行回数拡張
⑤ Context7
-
概要:
AIエージェントに最新かつバージョン固有の公式ドキュメントを参照させるためのドキュメント連携スキル -
解決する課題:
AIが古いAPI、存在しないメソッド、非推奨の書き方を使ってしまう問題を防ぐ -
中核機能:
ライブラリやフレームワークの最新ドキュメント、コード例、API仕様を取得し、AIのコンテキストに直接渡す。LLMが古い学習データに依存して時代遅れのコード例や存在しないAPIを出す問題に対し、最新・バージョン固有のドキュメントをプロンプトへ入れる -
導入効果:
ハルシネーションや古い実装パターンを減らし、公式仕様に沿ったコード生成がしやすくなる -
注意点:
参照ドキュメントがすべてのライブラリで完全とは限らない。特にマイナーライブラリや独自仕様では、公式ドキュメントの確認と併用するのが望ましい -
類似ツールと比較した強み:
古いAPI・ハルシネーション対策に強い
【中核概念】GSD（全体管理）とSuperpowers（開発規律）の美しい分業
今回のアーキテクチャの最大の肝は、GSDとSuperpowersの役割の違いを明確にし、組み合わせたことです。
-
GSDの役割（プロダクトマネージャー 兼 アーキテクト）:
プロジェクトを管理可能な「粒度」に分割し、並列エージェントにタスクを割り振ります。 -
Superpowersの役割（テックリード）:
GSDからタスクを割り振られた個別のエージェントに対し、「テストを書かずに実装を始めてはいけない」といった**How to build（開発規律）**を強制します。
GSDが大局的な地図（Plan）を描き、そのPlanを実行するサブエージェントの脳内にSuperpowersの規律を注入する。これがAI開発を破綻させない最強の布陣です。
実践ワークフロー：5つのスキルを統合した開発プロセス
ここからは、実際にアプリを構築したプロセスの全貌と、各フェーズで生まれる「成果物」、そしてツール同士を連携させるための設定コードを解説します。
Phase 1: 企画と技術スタックの定義 (GSD × Context7)
まずは GSDのコマンド/gsd:new-project を実行し、AIとの対話を通してビジョン、要件、ロードマップを定義します。
ここで重要なのは、GSDが「リサーチ」を行う際、古い知識に頼らないよう Context7 を参照させることです。
⚙️ 連携設定:
GSDのプロジェクト設定ファイル .planning/config.json を編集し、researcher（リサーチ担当エージェント）にContext7スキルを注入します。
{
"agent_skills": {
"gsd-researcher": ["~/.claude/skills/context7"]
}
}
- プロセス: AIが最新のNext.jsや各種ライブラリの仕様をContext7経由で取得し、それを踏まえた計画を立てます
-
生み出される主な成果物:
-
PROJECT.md(プロジェクト概要) -
REQUIREMENTS.md(要求仕様) -
ROADMAP.md(フェーズごとのロードマップ)
-
Phase 2: デザインシステムの構築 (UI UX Pro Max)
実装に入る前に、UI UX Pro Max を呼び出し、アプリのカテゴリに応じたデザインシステムを自動生成させます。
- プロセス: 生成されたデザインルールをGSD側が参照できるようにドキュメントとして保存します
-
生み出される主な成果物:
-
UI-SPEC.md(カラースキーム、タイポグラフィ、コンポーネントルールを定義したデザイン仕様書)
-
Phase 3: 仕様の深掘りとタスク分解 (GSD × Context7 × UI-SPEC.md)
次に /gsd:discuss-phase と /gsd:plan-phase を実行します。ここでもContext7で最新仕様を確認しつつ、Phase 2で作った UI-SPEC.md をインプットとして読み込ませます。
⚙️ 連携設定:
.planning/config.json を編集し、planner（計画担当エージェント）にContext7スキルを注入します。
{
"agent_skills": {
"gsd-researcher": ["~/.claude/skills/context7"],
"gsd-planner": ["~/.claude/skills/context7"]
}
}
planフェーズで、UI-SPEC.mdを作成します。
ここで、UI UX Pro Maxの成果物を使わせるために以下をプロンプトで指示すると良いでしょう。
UIデザインは @.planning/DESIGN_SYSTEM.md と @design-system/ を参照して、これらをもとにUI-SPEC.mdを作って
discussionフェーズでは、要件・仕様をより詳細に決めるための議論をします。
エージェントが議論すべき論点を上げてくれるので、それに則して深めていきます。
[深めるべき論点を洗い出してくれている様子↓]
- プロセス: 「このUIデザイン仕様に基づいて、具体的にどんなコンポーネントとAPIが必要か」をAIが極小のタスクに分解していきます
-
生み出される成果物:
-
01-CONTEXT.md(実装方針の決定事項) -
01-01-PLAN.md,01-02-PLAN.md(アトミックな実装計画書。XML形式で厳密に定義される)
-
Phase 4: 規律ある実装の強制 (GSD × Superpowers)
いよいよ /gsd:execute-phase でコードを書かせます。ここで、GSDが生成する各実装エージェントに対し、SuperpowersのTDD（テスト駆動開発）スキルを強制適用します。
⚙️ 連携設定:
再度 .planning/config.json を編集し、executor（実装担当エージェント）にSuperpowersを組み込みます。
{
"agent_skills": {
...,
"gsd-executor": [
"~/.claude/skills/test-driven-development"
]
}
}
また、Claude CodeのHook機能を使い、AIがファイルを修正した直後に必ず品質チェックが走る仕組みを作ります。
⚙️ 連携設定:
settings.json（またはプラグイン設定）に以下を記述します。
"hooks": {
"PostToolUse": [
{
"matcher": "Write|Edit|MultiEdit",
"hooks": [
{
"type": "command",
"command": "npm run lint && npm run typecheck && npm run test"
}
]
}
]
}
これにより、AIがコードを修正するたびにLint、型チェック、テストが実行され、エラーがあればAIが即座に自己修復ループを開始します。
- プロセス: AIはタスクを与えられた瞬間、RED-GREEN-REFACTORサイクル（テストを先に書き、失敗を確認してから実装する）を厳守しなければならず、テストなしの実装を物理的に不可能にします
[RED-GREEN-REFACTORサイクルをやっている様子↓]
-
生み出される成果物:
- 実装されたソースコードとテストコード
-
01-01-SUMMARY.md(実行結果とコミットログのサマリー)
裏で開発を支え続ける「Claude-Mem」の記憶
上記のPhase 1〜5を何度も繰り返して開発を進めると、通常ならAIのコンテキストが溢れ、「なぜこのDBスキーマにしたのか」を忘れてしまいます。
しかし、このプロセスの裏では常に Claude-Mem が常駐しています。ツールの実行履歴やGSDが生成したアーティファクト（各種 .md ファイル）の変更を自動的にベクトル化してSQLiteに保存します。新しいセッションを立ち上げた際も、Claude-Memが現在の作業に関連する過去の文脈を自動で抽出・注入してくれるため、人間がいちいち前提を説明する手間が完全に省けました。
まとめ：最強の「AI開発チーム」を設計しよう
数あるAgent Skillsですが、適材適所で組み合わせることによりその効果は何倍にも跳ね上がります。
- Claude-Memで過去のセッションの記憶を思い出し、
- Context7で最新の仕様を担保しつつ、GSDでプロジェクトの地図を描き、
- UI UX Pro Maxでデザイン基盤を固め、
- SuperpowersとHooksで開発規律（TDD・Lint）を強制し、
- Claude-Memで記憶を繋ぐ
AIに「良いコードを書いて」と祈るのではなく、「サボれず、間違えられず、最高のパフォーマンスを発揮できる環境」をコードベース（config.jsonやHook）で構築することこそが、次世代のAIエンジニアリングの鍵です。
ぜひ皆さんも、自分なりの最強スキルスタックを探してみてください。