Zola 2026-05-29T18:12:00+09:00 https://blog.y4suyuki.com/atom.xml 2026-05-29T18:12:00+09:00 2026-05-29T18:12:00+09:00 Unknown https://blog.y4suyuki.com/blog/superpowers/ <p>superpowers を使えば coding agent のカスタマイズで 90 点くらい取れるということでしばらく試してみている</p> <p><a rel="external" href="https://github.com/obra/superpowers">https://github.com/obra/superpowers</a></p> <p>しばらく使ってみて手放せなくなっているので使用感を紹介したい</p> <p>チームメンバーにも徐々に使っていってもらっている</p> <h2 id="superpowers">superpowers</h2> <p><a rel="external" href="https://github.com/obra/superpowers?tab=readme-ov-file#superpowers">https://github.com/obra/superpowers?tab=readme-ov-file#superpowers</a></p> <blockquote> <p>Superpowers is a complete software development workflow for your coding agents, built on top of a set of composable "skills" and some initial instructions that make sure your agent uses them.</p> </blockquote> <p>改めてこれを読むと、例えば claude code などはコーディングに特化しているかというと必ずしもそうではなく、API や MCP を使って分析や作業をさせたりできる汎用的な AI Agent interface であって、コーディングにおいてのプラクティスを強化する余地は大きい</p> <p>super powers を使うと開発における coding agent としてのカスタマイズを一気にインストールすることができる</p> <p>ハーネスの方向性として２種類あって</p> <ul> <li>一般的なソフトウェア開発の進め方におけるベストプラクティス</li> <li>AI agentを使った開発におけるベストプラクティス</li> </ul> <p>このそれぞれにおいて世に出回っている tips 的なものは大抵抑えられていると思う</p> <h2 id="インストール">インストール</h2> <p>インストールは github にあるインストール方法を参照して各自のツールでのインストール方法を参照すれば良い</p> <p>インストールすると様々な SKILL などがインストールされる</p> <p>これらを必要に応じて呼び出すわけだが、superpowers としてインストールしておけば明示的に呼び出すことは普段の開発ではめったに無いと思う</p> <h2 id="実装タスク">実装タスク</h2> <p>例えば新しいタスクに着手したい場合、最近は会社で Linear というタスク管理ツールを使っているので、 Linear で管理している issue （チケット）を指定して「 <code>${linear_issue_id}</code> に着手します」という感じで claude code とのチャットをスタートする</p> <p>coding agent が issue の情報を取得するとだいたい brainstorm skill を使用して planning するための brainstorming を開始する</p> <h3 id="brainstorming">brainstorming</h3> <p>skill file はこれ</p> <p><a rel="external" href="https://github.com/obra/superpowers/blob/main/skills/brainstorming/SKILL.md">https://github.com/obra/superpowers/blob/main/skills/brainstorming/SKILL.md</a></p> <p>brainstorming では planning でやることのスコープを絞る前に issue から読み取れる情報やそれ以上の情報を踏まえ実装時に考慮すべき可能性を広げるために想像力を膨らませながら、必要なときは適宜質問しながら planning に必要な情報を足していく</p> <p>これをskill がやってくれるので、こっちはどちらかというと受け身で必要な情報を補足したり、前提など違ってそうなところあれば指摘して直す</p> <p>このプロセスの気が利いてるところは、要件について整理しながら「こういうケースはどうしますか？」とかを聞いてくれて、チケット作成時に見落としているようなケースについて確認をしてくれたりするので重宝している</p> <p>UIとして気が利いているのは design 上のオプションをいくつか提示してくれてどっちが良いか、足したいコメントがあるかなど聞いてくれるので、大抵いちいちプロンプト入れなくても選択肢を選ぶだけで良い</p> <p><img src="/ox-hugo/blog-image1.png" alt="img" /></p> <p>あともう一つ気に入っているのが visual comparison でUIの実装について特に細かい指示を与えてない場合、UIのイメージを実際にHTMLに書き出してどれが良いか聞いてくれる</p> <p><img src="/ox-hugo/blog-image2.png" alt="img" /></p> <p><img src="/ox-hugo/blog-image3.png" alt="img" /></p> <p>質問が一通りできて、 design が固まってきたら design doc を作成する</p> <p>細かいけど coding にしろ design doc にしろ、基本的にまず self review が入っているのも良い</p> <h3 id="実装プラン">実装プラン</h3> <p>design doc ができたら review して問題なければ writing plan skill を使って実装プランを作成していく</p> <p>writing-plan の skill file はこれ</p> <p><a rel="external" href="https://github.com/obra/superpowers/blob/main/skills/writing-plans/SKILL.md">https://github.com/obra/superpowers/blob/main/skills/writing-plans/SKILL.md</a></p> <p>実装プランは design doc から実際の実装タスクを書き起こす</p> <p>あまりここで質問されることはないので出来上がった plan を見て問題なければ次へ進む</p> <p>こんな感じで基本的にはこのあとの実装フェーズの agent への指示書となっているのであまりレビューしたい観点はない</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="markdown"><span class="giallo-l"><span style="color: #F5C2E7;">&gt;</span><span style="color: #9399B2;"> **</span><span style="color: #F38BA8;font-weight: bold;">For agentic workers:</span><span style="color: #9399B2;">**</span><span style="color: #F5C2E7;"> REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (</span><span style="color: #A6E3A1;">`- [ ]`</span><span style="color: #F5C2E7;">) syntax for tracking.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Goal:</span><span style="color: #9399B2;">**</span><span> Add a slash-command-driven resume review feature (</span><span style="color: #A6E3A1;">`/review advisor`</span><span> and </span><span style="color: #A6E3A1;">`/review interviewer`</span><span>) that streams Japanese critique into the chat and persists it to history.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Architecture:</span><span style="color: #9399B2;">**</span><span> Client-side slash-command parser. Custom </span><span style="color: #A6E3A1;">`prepareSendMessagesRequest`</span><span> on </span><span style="color: #A6E3A1;">`DefaultChatTransport`</span><span> routes </span><span style="color: #A6E3A1;">`/review *`</span><span> to a new </span><span style="color: #A6E3A1;">`POST /api/review`</span><span> endpoint while non-slash messages keep going to </span><span style="color: #A6E3A1;">`/api/chat`</span><span>. The endpoint loads the resume, builds a reviewer system prompt for the requested mode, and streams Claude Sonnet 4.5 with no tools. Result is persisted as a normal assistant chat message.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Tech Stack:</span><span style="color: #9399B2;">**</span><span> Next.js 16 (App Router), Vercel AI SDK v6 (</span><span style="color: #A6E3A1;">`ai`</span><span>, </span><span style="color: #A6E3A1;">`@ai-sdk/react`</span><span>, </span><span style="color: #A6E3A1;">`@ai-sdk/anthropic`</span><span>), Drizzle/SQLite, Zod v4, Vitest.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Spec:</span><span style="color: #9399B2;">**</span><span style="color: #A6E3A1;"> `docs/superpowers/specs/2026-05-22-review-feature-design.md`</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #FAB387;">## File Structure</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">New files</span><span style="color: #9399B2;">**</span><span>:</span></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span style="color: #A6E3A1;"> `src/lib/ai/review-prompts.ts`</span><span> — exports two Japanese reviewer system prompts (</span><span style="color: #A6E3A1;">`advisorPrompt`</span><span>, </span><span style="color: #A6E3A1;">`interviewerPrompt`</span><span>).</span></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span style="color: #A6E3A1;"> `src/lib/chat/slash-command.ts`</span><span> — pure </span><span style="color: #A6E3A1;">`parseSlashCommand(text)`</span><span> function.</span></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span style="color: #A6E3A1;"> `src/lib/chat/__tests__/slash-command.test.ts`</span><span> — unit tests for the parser.</span></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span style="color: #A6E3A1;"> `src/app/api/review/route.ts`</span><span> — POST handler.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Modified files</span><span style="color: #9399B2;">**</span><span>:</span></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span style="color: #A6E3A1;"> `src/components/chat/chat-interface.tsx`</span><span> — replace </span><span style="color: #A6E3A1;">`DefaultChatTransport`</span><span> config with one that uses </span><span style="color: #A6E3A1;">`prepareSendMessagesRequest`</span><span> to switch endpoints.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Unchanged</span><span style="color: #9399B2;">**</span><span>: DB schema, types, </span><span style="color: #A6E3A1;">`/api/chat`</span><span>, main chat system prompt, resume UI components.</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #94E2D5;">---</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #FAB387;">## Task 1: Reviewer prompts</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Files:</span><span style="color: #9399B2;">**</span></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span> Create: </span><span style="color: #A6E3A1;">`src/lib/ai/review-prompts.ts`</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span style="color: #94E2D5;">-</span><span> [ ] </span><span style="color: #9399B2;">**</span><span style="color: #F38BA8;font-weight: bold;">Step 1: Create review-prompts.ts</span><span style="color: #9399B2;">**</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span>Create </span><span style="color: #A6E3A1;">`src/lib/ai/review-prompts.ts`</span><span> with:</span></span> <span class="giallo-l"><span>...</span></span></code></pre><h3 id="実装">実装</h3> <p>実装フェーズでは基本的にスタートしたら完了するまで待ち</p> <p>最初に sub agent で並列で実装するかどうか聞いてくれるが、基本 sub agent で並列でやるで問題ない</p> <p>実装フェーズは特に言うことはなくてまあ design 通りのものができる</p> <p>実装のクオリティに関しては superpowers で担保する領域ではないので code architecture とか別の仕組みで強制させるか、既存のコードの質によると思うのでそこに問題があるならリファクタとかする</p> <h2 id="まとめ">まとめ</h2> <p>superpowers を使うことのメリットは planning の質が上がることと、 design doc がきちんと書ける事が大きいと思う</p> <p>これまでも agent coding で実装がうまくいくかどうかは planning の質によると言われていたし、実際日々仕事で実装していて superpowers 使うようになってうまく plan できて実装もスムーズに終わることが大半なので非常に満足している</p> <p>チーム開発においては AI-DLC では spec のレビューを同期でやると良いとされているが、実際に先日チームメイトと話していて planning のやり取りで選択肢を選ぶのに困る時があると聞いたので、そういうときはその領域に詳しいメンバーと一緒に同期で planning するのが良いかもしれない</p> <p>またこの分野はかなり変遷激しいので半年もしないうちに superpowers よりよいプラクティスが出るかもしれないが、開発における本質的なところを抑えていると思うので人間のエンジニアが作業してるうちは結構使うのではと思っている</p> 2026-05-29T01:02:00+09:00 2026-05-29T01:02:00+09:00 Unknown https://blog.y4suyuki.com/blog/zola-blogging/ <p>zola は rust 製の静的サイトエンジン</p> <p><a rel="external" href="https://www.getzola.org/">https://www.getzola.org/</a></p> <blockquote> <p>Your one-stop static site engine Forget dependencies. Everything you need in one binary.</p> </blockquote> <p>zola で blog を作ったときのメモ</p> <h2 id="why-zola">Why zola</h2> <ul> <li>仕事で toC 向けのメディアをやっているので自分でサイトをホストしてみたかった</li> <li>Next + vercel とかが慣れてるので速攻で始めやすいが、blog には too much だし、セキュリティとかの問題とかも考えると依存管理がシンプルなものが良い</li> <li>emacs org mode で書いたものをそのまま公開できる</li> </ul> <h2 id="basics">Basics</h2> <p><a rel="external" href="https://www.getzola.org/documentation/getting-started/overview/">https://www.getzola.org/documentation/getting-started/overview/</a></p> <p>この overview を一通りなぞればだいたい分かる contents 以下に markdown を加えて build すれば静的サイトが作成されるので適当なところにホストすれば良い</p> <h2 id="extra-features">Extra features</h2> <h3 id="rss-feed">RSS feed</h3> <p>会社の技術ブログのキュレーションに RSS feed を使っているので必要</p> <p><a rel="external" href="https://www.getzola.org/documentation/templates/feeds/">https://www.getzola.org/documentation/templates/feeds/</a></p> <p>config に以下の変更を加えるだけで <code>/atom.xml</code> が生成される</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="toml"><span class="giallo-l"><span>generate_feeds</span><span style="color: #94E2D5;"> =</span><span style="color: #FAB387;"> true</span></span></code></pre> <p>blog をホストする理由は会社とは関係なく個人のブログサイトとして運営したい意図もあるので、会社用の feed を生成したい</p> <p>taxonomy を定義すると contents を特定の group にまとめ、それぞれに feed を作成することができる</p> <p>会社名を taxonomy に定義し、会社で書いたブログに taxonomy をセットする</p> <p>config に taxonomies を定義</p> <pre class="giallo" style="color: #CDD6F4; background-color: #1E1E2E;"><code data-lang="toml"><span class="giallo-l"><span>taxonomies</span><span style="color: #94E2D5;"> =</span><span style="color: #9399B2;"> [</span></span> <span class="giallo-l"><span style="color: #9399B2;"> {</span><span> name</span><span style="color: #94E2D5;"> =</span><span style="color: #A6E3A1;"> &quot;company&quot;</span><span style="color: #9399B2;">,</span><span> feed</span><span style="color: #94E2D5;"> =</span><span style="color: #FAB387;"> true</span><span style="color: #9399B2;">},</span></span> <span class="giallo-l"><span style="color: #9399B2;">]</span></span></code></pre> <p>company を定義したので <code>/company</code> で taxonomy の一覧と term を表示するための template を作成</p> <p><code>/templates/taxonomy_list.html</code> と <code>/templates/single.html</code> を作成する</p> <p>こうすることで <code>/company</code> で taxonomy 一覧と <code>/company/HERP</code> で <code>company=["HERP"]</code> で定義した post 一覧が確認でき、 <code>/company/herp/atom.xml</code> で <code>company=["HERP"]</code> の post の RSS feed が作成され会社用のブログの feed を会社のキュレーションシステムに渡せる</p> <h3 id="design">design</h3> <p>デザインは最低限でよいが、とりあえず読みやすくしたい</p> <p>適当に opencode で指示して sass 調整してもらった</p>