スクショ1枚でバグ修正、執筆エージェント9体で教材づくり — レッスンサイトにClaude Codeスキル作成講座を追加した日

今日やったこと

レッスンサイトのExcel基本関数レッスンで、チャプター表示が崩れるバグをスクショ付きで報告し、修正からコミットまで任せた
「ゼロから作る実務スキル」レッスン群に、Claude Codeのスキル作成を学ぶ新レッスンを追加する作業を進めた（113セクション・解説SVG 34枚まで完成）
セッションリミットで中断したが、解除後にエージェントを中断地点から再開させた
キリのいいところで切り上げて、進捗ドキュメントと再開用プロンプトを残させた

チャプター表示が崩れていた — スクショ1枚で報告

自分が運営する学習レッスンサイトのExcel基本関数レッスンを開いたら、チャプター一覧の表示が崩れていた。各チャプターの下に、同じページ群が何度も繰り返しぶら下がっている。本来はチャプターごとに配下のページだけが並ぶはずの場所だ。

崩れた画面のスクショを貼って「バグ取っておいて」とだけ伝えた。devサーバーは起動しっぱなしだったので、Claude Codeにagent-browserで実画面を確認させながら直させた。バグは2件見つかり、MillerViewer.vue（チャプター列の重複表示）と VideoSubtitlePlayer.vue の修正で、ローカルの実画面上で崩れが消えた。

コミットも任せたが、このとき手元にはmemo配下のCSV変更や未追跡ファイルなど、無関係な変更が転がっていた。修正した2ファイルだけを含むコミット（abcb54b9）に絞らせて、残りはワーキングツリーに置いたままにした。バグ修正のコミットに「ついで」を混ぜないのは、あとで履歴を追うときの自分のためでもある。

スキル作成を学ぶレッスンを新規追加する

続けて、レッスンサイトの「ゼロから作る実務スキル」群に新しいレッスンを足す作業に入った。題材は「Claude Codeのスキルを作る」。普段自分が使っているsvg-diagramスキル（SVG図解のデザインルール集）を実例に、スキルのファイル構成・指示の書き方・ルールがなぜ必要なのかを、実際にスキルを使いながら学べる構成にしたい。

要件として伝えたのは次の3点だけ。

インデックスに画像＋講座名＋概要のカードを追加する
中身はExcel基礎講座と同じミラーカラムレイアウト（セクション／チャプターの2カラム、矢印キーでページ移動）
スキルのファイル一式をダウンロードできるようにして、中身を1ファイルずつ「なぜこのルールが必要か」まで解説する

実装前の調査は、調査エージェント3体を並列で派遣した。lessonsインデックスの構造、Excel基礎講座の実装詳細、svg-diagramスキルの実体の3方面。結果は上々で、カード追加は app/data/topics.ts への1エントリ追記＋SVG画像の配置で済むデータ駆動構造だと分かり、svg-diagramスキル側もSKILL.md＋references 5本（計6ファイル・約77KB）が§0〜§16の番号体系＋「なぜ必要か」節付きで書かれていて、そのまま教材の骨格に使えると判明した。コンテンツidは1〜5万台が使用済みで、新講座には60000番台を割り当てた。

セッションリミットで中断、解除後に再開

設計を任せたPlanエージェントが動いている途中で、画面に「You've hit your session limit · resets 4:10pm」の一文が出て、進行中の作業ごと止まった。リミット解除を待って「続きお願いします」と伝えたら、Planエージェントはコンテキストを保持したまま中断地点から再開した。中断→再開でやり直しが発生しなかったのは正直助かった。

再開後、設計が完成した。既存の配布前例（ib-format.md）を掘り当ててくるなど、調査の使い方がよかった。計画はCodexにレビューさせて「致命的な指摘なし」の承認を得てから実装に入った。

実装 — 執筆9体と画像制作エージェントの並列

実装フェーズはほぼ並列で回した。

配布物の準備: スキルのファイル一式をダウンロード配布するため、固有情報のsanitize対象7箇所を特定させ、配布用コピーを作ってzipにまとめる流れを整えた
ガワの整備: カード画像・toc・topics・パンくずの4点を作成
本文の執筆: 章ごとに執筆エージェント9体を並列で派遣した。待ち時間にページ側のLoader型9本を先に作らせておき、各エージェントの完了通知が届くたびに、章とスキル原文の対応表（mappings）へ逐次記録していった
成果物: 全9章で113セクション・126スライド。計画時の見積もり約104セクションとほぼ一致した
解説SVG: 続けてSVG画像の制作エージェントを並列起動し、NG/OKペアの図解など34枚をすべて完成させた（機械チェック＋Playwrightでの目視確認込み）

このワークフロー自体も再利用したくなったので、途中で「skill-to-lesson」というスキル（スキルをレッスン教材に変換する手順書）のSKILL.mdを作らせた。次に別のスキルを教材化するときは、これを呼ぶだけで済むはずだ。

終盤、検証用にESLintを走らせる許可を求められたが、許可を出さずに止めた。画像制作の完了通知だけ受け取りつつ、今日は検証まで踏み込まないと決めた。

今日はここまで — 進捗をドキュメントに残させた

「今日はもうおしまいにしたいんで、進捗残しておいて」と伝えて、進捗ドキュメントを memo/2026-07-02/claude-skill-lesson-progress.md に保存させた。実装はほぼ完了していて、残りは検証フェーズ（lint／test／ブラウザでの実表示確認／出典表記の最終チェック）だけ。次セッション再開用のプロンプトもターミナルに出させたので、明日はコピペ1発で続きから始められる。

学び

スクショ1枚＋「直しておいて」で、実画面の確認からピンポイントのコミットまで通る。バグ報告に長文の説明は要らなかった
セッションリミットで止まっても、エージェントはコンテキストを保持したまま中断地点から再開できた。リミットを恐れて作業を小さく刻む必要はなさそう
執筆9体＋画像制作の並列で、113セクション・SVG 34枚の教材が1日でほぼ形になった。人間の仕事は要件3点と途中の判断だけだった
切り上げるときは進捗ドキュメント＋再開プロンプトを残させる。「どこまでやったか」を思い出すコストが翌朝ゼロになる

明日やること

進捗ドキュメントの再開プロンプトから検証フェーズ（lint／test）を回す
新レッスンをブラウザで実表示確認し、矢印キーのページ移動とチャプター表示を確かめる
配布zipの中身と出典表記を最終チェックしてから公開判断をする