00:00:00GitHubで5万以上のスターを獲得しているエージェント用スキル・フレームワーク、「Superpowers」をご紹介します。
00:00:05これはコーディングエージェントが焦ってミスをするのを防ぐため、構造化された
00:00:10ブレインストーミング、実装、レッド・グリーン テスト駆動開発、
00:00:15さらにはサブエージェントによる並列タスク実行やコードレビューといったワークフローを強制します。
00:00:19しかし、単なる「プラン・モード」や「スペック駆動開発」と何が違うのでしょうか？
00:00:24チャンネル登録して、詳しく見ていきましょう。
00:00:27さて、ここに「XDL」というプロジェクトがあります。Twitterから動画をダウンロードするCLIツールです。
00:00:32このツールのWeb UIを作りたいと思います。URLから動画をダウンロードするだけでなく、
00:00:38その動画から記事を作成する機能も持たせます。まずは、Claude Codeのプラン・モードでOpus 4.6を使い、
00:00:46UIの作成を試みました。その結果がこちらです。
00:00:50残念ながら、最初にコードを実行した際にはいくつか問題がありました。
00:00:53そこでコードを修正し、なんとか解決できたはずです。
00:00:58これで、すべてが正常に動作しているようです。
00:01:00Twitterへ行き、このツイートのリンクをコピーします。
00:01:03ケビンさん、ごめんなさい。ここに貼り付けて、動画をダウンロードできるか見てみましょう。
00:01:06抽出が始まり、ダウンロードできました。
00:01:09ここをクリックすると、別タブで開きました。期待とは違いますが、一応機能はしています。
00:01:15次に、そのツイートから記事を作成してみます。ここに貼り付けて生成すると、
00:01:20実行ステップが表示されます。まず動画を抽出し、
00:01:24次にオーディオを処理します。完了すると、完璧にフォーマットされたMarkdown形式の記事が出来上がりました。
00:01:29実に素晴らしいですね。では、全く同じタスクをOpus 4.6と
00:01:35Superpowersの組み合わせで実行してみましょう。ダウンロードと記事生成のオプションがあり、デザインも格段に向上しています。
00:01:39同じTwitterのURLを貼り付けてダウンロードを押すと、
00:01:45今回も動画を抽出しますが、ブラウザに直接ダウンロードされ、クリックで動画を視聴できます。
00:01:51ここで同じツイートを使って記事を生成してみると、進行ステップが表示されます。
00:01:56すべてのステップが終了すると、記事がブラウザにストリーミングされます。
00:02:01これをコピーして好きな場所に貼り付けることができます。すでに
00:02:06Superpowersを使ったバージョンの方が優れているのがわかりますね。コードについては後ほど詳しく見ますが、
00:02:10まずはどのように作成したかを解説します。Superpowersプラグインをインストールすると、
00:02:15「brainstorm（ブレインストーミング）」「execute plan（プラン実行）」、そしてブレインストーミングからプランを作成する
00:02:20「write the plan（プラン作成）」などの新しいスラッシュコマンドが使えるようになります。
00:02:25実際にはこのコマンドだけで十分です。Superpowersが前の段階が終わるたびに次の段階へと誘導してくれるからです。
00:02:31では、これを実行してプロンプトを入力し、エンターを押します。
00:02:35ブレインストーミングのスキルが読み込まれ、現在のプロジェクトの理解が始まります。そして、
00:02:39プランを改善するための質問をいくつか投げかけてきます。「React + Vite」で、記事生成は「ステップバイステップ」でと答えます。
00:02:44次にアーキテクチャの構成を確認するよう求められます。良さそうですね。レイアウトについても聞かれ、
00:02:49さらにはエンドポイントやサーバーロジックについても質問されます。
00:02:54すべての質問に答えるとプランの作成に進み、
00:02:58指定したディレクトリに保存されます。プランを見ると、非常に詳細で、
00:03:03概要、スタック、構造、デザイン、レイアウト、APIエンドポイントなどが網羅されています。
00:03:09実際、これはClaude Codeが自身でプランを書く場合と非常によく似ています。
00:03:15しかし、次のステップからが面白いところです。プランを確認し、実装の準備ができたと伝えると、
00:03:19さらに別の「実装プラン」が作成されます。これはまず、
00:03:25最初に作成した設計プランを参照し、それを並列に動作するサブエージェントが完了できるような、
00:03:31より小さく管理しやすいタスクの塊に分解します。こうして新しいプランが書き込まれ、
00:03:36再びplansディレクトリに保存されます。そちらを確認してみると、
00:03:41プロジェクトやアーキテクチャの概要ではなく、タスクごとに分割されているのがわかります。
00:03:46プロジェクトの雛形を作るタスクがあり、その中にいくつかのステップが含まれています。
00:03:52ViteとReactのクライアント・スケルトンを作成する別のタスクもあり、そこにもステップがあります。
00:03:57プロジェクト完了に必要なすべてのタスクに対して、これが繰り返されます。ここでSuperpowersから、
00:04:03「サブエージェント駆動型」か「並列セッション型」か、アプローチを選択するよう求められます。
00:04:08前者のアプローチでは、人間の確認なしに各タスクに個別のサブエージェントを割り当てます。
00:04:14後者は、プラン・セッションから別のセッションを作成し、タスクをバッチごとに完了させ、
00:04:18続行する前に人間である私が内容に満足しているかチェックします。
00:04:24今回はスピードを重視して「サブエージェント駆動型」を選びます。すると、
00:04:28このプロジェクトを完了するために必要なタスクが生成されました。
00:04:32あいにく、最初に録画するのを忘れてしまったため、このタスクリストは前回のものとは少し違って見えますが、
00:04:36全く同じプロンプトを使ってやり直しています。現在行われているのは、
00:04:41各サブエージェントがまずテストを作成することです。失敗するテストを書き、
00:04:47そのテストをパスさせるための最小限のコードを書きます。機能の実装が終わると、
00:04:52その機能がプランで規定された要件を満たしているかを検証し、次に
00:04:57コードの品質をチェックします。クリーンで構成が良く、保守可能かを確認するのです。
00:05:02ほとんどのタスクが終了しました。これから、これまでに行ったすべてのテストを行います。
00:05:06これで完了です。すべてのタスクが終わり、途中で見つかったバグも修正されました。
00:05:11コードを見ると、serverとsourceに分かれています。sourceはフロントエンド、つまりクライアントでしょう。
00:05:16コンポーネントにはArticleTabやDownloadTabなどがあります。さらに、
00:05:21pipeline progress（パイプラインの進捗）を見ると、TypeScriptのインターフェースでステージが定義されています。
00:05:27スタイリングにはCSS-in-JSのようなものが使われているようです。今思えばTailwindを使うよう
00:05:32指定すべきでしたが、これでも問題ありません。そしてこれを見てください。Opusのプラン・モードがデフォルトではやらないことです。
00:05:37プロジェクトの雛形作成からCLIラッパーの追加、Honoの導入まで、
00:05:43Superpowersは各ステップでGitコミットを自動で行っています。「git status」を確認しても、
00:05:48ブランチはクリーンなので自分でコミットする必要がありません。私の手間が大幅に省けました。
00:05:53テストファイルはどこにあるのか、と疑問に思うかもしれません。それについては後で話します。
00:05:57正直なところ、Superpowersは印象的なプロジェクトだと思います。「スキル」に焦点を当てている点が気に入っています。
00:06:0214種類ほどのスキルがあり、ブレインストーミングからプランニング、実装、
00:06:08さらにはその後のコードレビューまで、多岐にわたるタスクをこなします。特にTDD（テスト駆動開発）、
00:06:12中でもまずテストを書いて失敗させる（レッド）、それからパスさせるコードを書く（グリーン）という「レッド・グリーンTDD」へのこだわりが良いですね。
00:06:18ただ、エージェントがそれをやらないことを選択する場合もあり、常にうまくいくとは限りません。
00:06:24これを見てください。「プラン作成」スキルで明示的にTDDを指定したのですが、
00:06:31なぜかClaudeはやりませんでした。確認すると、「はい、私の責任です。スキルにはTDDとありますが、
00:06:36それでもやりませんでした」と認めました。理由を聞くと、
00:06:42「プロセスに従うことよりも、迅速なリリースを優先した」と言いました。最先端のモデルでなぜ
00:06:47このようなことが起きたのかは不明ですが、モデルの挙動を盲信してはいけないという教訓になります。
00:06:53プランを読み込み、期待通りの動作をしているか確認することが重要です。
00:06:57これが、私がすべてのプロジェクトや機能追加でSuperpowersを使おうとは思わない理由の一つです。
00:07:03要件が非常に小さい場合、単純にClaudeとやり取りして計画を立て、
00:07:08プラン文書を書き、コンテキストをクリアしてから実行する方が楽だからです。
00:07:13しかし、
00:07:19複数の機能を一度に実装しなければならない状況なら、Superpowersは強力なツールになります。
00:07:24複雑な要件を、サブエージェントが完了できる塊に分解するのが非常に得意だからです。
00:07:31Claude Codeのタスク機能でも似たようなことはできますが、
00:07:37いきなり実装に入るのではなく、そのためのプランをしっかり作成してくれる点が気に入っています。
00:07:43では、SuperpowersをBeadsやSpecKit、あるいはスペック駆動開発のフレームワークと比較するとどうでしょうか？
00:07:48私にとっては、実行前のプランニングをよりシンプルにしたバージョンのように見えます。
00:07:53もちろん、Ralphほど単純ではありませんが、RalphとBeadsの中間くらいでしょうか。
00:07:58AIエージェントを使ってより良いコードを書くためのツールが、どんどん増えているように感じます。
00:08:02これは良いことですが、人それぞれ好みは異なります。
00:08:06あちこちのツールから良いとこ取りをして、
00:08:10自分にとって完璧な独自のワークフローを構築するのが一番でしょう。私も将来、そうするかもしれません。
00:08:16運が良ければ、その方法を解説する動画を作るつもりです。