[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"content-/lessons-chapter-bug-and-skill-lesson":3,"all-pages-for-dir":237,"og-image-/lessons-chapter-bug-and-skill-lesson":238},{"id":4,"title":5,"body":6,"category":219,"description":220,"extension":221,"meta":222,"navigation":189,"ogImage":223,"path":224,"project_name":225,"published":226,"publishedAt":227,"seo":228,"stem":229,"tags":230,"todo":223,"unpublished":226,"updatedAt":223,"__hash__":236},"pages/2026-07/2026-07-02/lessons-chapter-bug-and-skill-lesson.md","スクショ1枚でバグ修正、執筆エージェント9体で教材づくり — レッスンサイトにClaude Codeスキル作成講座を追加した日",{"type":7,"value":8,"toc":204},"minimark",[9,13,17,33,37,41,53,60,63,66,69,80,84,91,95,98,101,105,108,141,144,147,151,158,161,175,178],[10,11,5],"h1",{"id":12},"スクショ1枚でバグ修正執筆エージェント9体で教材づくり-レッスンサイトにclaude-codeスキル作成講座を追加した日",[14,15,16],"h2",{"id":16},"今日やったこと",[18,19,20,24,27,30],"ul",{},[21,22,23],"li",{},"レッスンサイトのExcel基本関数レッスンで、チャプター表示が崩れるバグをスクショ付きで報告し、修正からコミットまで任せた",[21,25,26],{},"「ゼロから作る実務スキル」レッスン群に、Claude Codeのスキル作成を学ぶ新レッスンを追加する作業を進めた（113セクション・解説SVG 34枚まで完成）",[21,28,29],{},"セッションリミットで中断したが、解除後にエージェントを中断地点から再開させた",[21,31,32],{},"キリのいいところで切り上げて、進捗ドキュメントと再開用プロンプトを残させた",[14,34,36],{"id":35},"チャプター表示が崩れていた-スクショ1枚で報告","チャプター表示が崩れていた — スクショ1枚で報告",[38,39,40],"p",{},"自分が運営する学習レッスンサイトのExcel基本関数レッスンを開いたら、チャプター一覧の表示が崩れていた。各チャプターの下に、同じページ群が何度も繰り返しぶら下がっている。本来はチャプターごとに配下のページだけが並ぶはずの場所だ。",[38,42,43,44,48,49,52],{},"崩れた画面のスクショを貼って「バグ取っておいて」とだけ伝えた。devサーバーは起動しっぱなしだったので、Claude Codeにagent-browserで実画面を確認させながら直させた。バグは2件見つかり、",[45,46,47],"code",{},"MillerViewer.vue","（チャプター列の重複表示）と ",[45,50,51],{},"VideoSubtitlePlayer.vue"," の修正で、ローカルの実画面上で崩れが消えた。",[38,54,55,56,59],{},"コミットも任せたが、このとき手元にはmemo配下のCSV変更や未追跡ファイルなど、無関係な変更が転がっていた。修正した2ファイルだけを含むコミット（",[45,57,58],{},"abcb54b9","）に絞らせて、残りはワーキングツリーに置いたままにした。バグ修正のコミットに「ついで」を混ぜないのは、あとで履歴を追うときの自分のためでもある。",[14,61,62],{"id":62},"スキル作成を学ぶレッスンを新規追加する",[38,64,65],{},"続けて、レッスンサイトの「ゼロから作る実務スキル」群に新しいレッスンを足す作業に入った。題材は「Claude Codeのスキルを作る」。普段自分が使っているsvg-diagramスキル（SVG図解のデザインルール集）を実例に、スキルのファイル構成・指示の書き方・ルールがなぜ必要なのかを、実際にスキルを使いながら学べる構成にしたい。",[38,67,68],{},"要件として伝えたのは次の3点だけ。",[18,70,71,74,77],{},[21,72,73],{},"インデックスに画像＋講座名＋概要のカードを追加する",[21,75,76],{},"中身はExcel基礎講座と同じミラーカラムレイアウト（セクション／チャプターの2カラム、矢印キーでページ移動）",[21,78,79],{},"スキルのファイル一式をダウンロードできるようにして、中身を1ファイルずつ「なぜこのルールが必要か」まで解説する",[81,82,83],"h3",{"id":83},"調査は3体並列で",[38,85,86,87,90],{},"実装前の調査は、調査エージェント3体を並列で派遣した。lessonsインデックスの構造、Excel基礎講座の実装詳細、svg-diagramスキルの実体の3方面。結果は上々で、カード追加は ",[45,88,89],{},"app/data/topics.ts"," への1エントリ追記＋SVG画像の配置で済むデータ駆動構造だと分かり、svg-diagramスキル側もSKILL.md＋references 5本（計6ファイル・約77KB）が§0〜§16の番号体系＋「なぜ必要か」節付きで書かれていて、そのまま教材の骨格に使えると判明した。コンテンツidは1〜5万台が使用済みで、新講座には60000番台を割り当てた。",[14,92,94],{"id":93},"セッションリミットで中断解除後に再開","セッションリミットで中断、解除後に再開",[38,96,97],{},"設計を任せたPlanエージェントが動いている途中で、画面に「You've hit your session limit · resets 4:10pm」の一文が出て、進行中の作業ごと止まった。リミット解除を待って「続きお願いします」と伝えたら、Planエージェントはコンテキストを保持したまま中断地点から再開した。中断→再開でやり直しが発生しなかったのは正直助かった。",[38,99,100],{},"再開後、設計が完成した。既存の配布前例（ib-format.md）を掘り当ててくるなど、調査の使い方がよかった。計画はCodexにレビューさせて「致命的な指摘なし」の承認を得てから実装に入った。",[14,102,104],{"id":103},"実装-執筆9体と画像制作エージェントの並列","実装 — 執筆9体と画像制作エージェントの並列",[38,106,107],{},"実装フェーズはほぼ並列で回した。",[18,109,110,117,123,129,135],{},[21,111,112,116],{},[113,114,115],"strong",{},"配布物の準備",": スキルのファイル一式をダウンロード配布するため、固有情報のsanitize対象7箇所を特定させ、配布用コピーを作ってzipにまとめる流れを整えた",[21,118,119,122],{},[113,120,121],{},"ガワの整備",": カード画像・toc・topics・パンくずの4点を作成",[21,124,125,128],{},[113,126,127],{},"本文の執筆",": 章ごとに執筆エージェント9体を並列で派遣した。待ち時間にページ側のLoader型9本を先に作らせておき、各エージェントの完了通知が届くたびに、章とスキル原文の対応表（mappings）へ逐次記録していった",[21,130,131,134],{},[113,132,133],{},"成果物",": 全9章で113セクション・126スライド。計画時の見積もり約104セクションとほぼ一致した",[21,136,137,140],{},[113,138,139],{},"解説SVG",": 続けてSVG画像の制作エージェントを並列起動し、NG/OKペアの図解など34枚をすべて完成させた（機械チェック＋Playwrightでの目視確認込み）",[38,142,143],{},"このワークフロー自体も再利用したくなったので、途中で「skill-to-lesson」というスキル（スキルをレッスン教材に変換する手順書）のSKILL.mdを作らせた。次に別のスキルを教材化するときは、これを呼ぶだけで済むはずだ。",[38,145,146],{},"終盤、検証用にESLintを走らせる許可を求められたが、許可を出さずに止めた。画像制作の完了通知だけ受け取りつつ、今日は検証まで踏み込まないと決めた。",[14,148,150],{"id":149},"今日はここまで-進捗をドキュメントに残させた","今日はここまで — 進捗をドキュメントに残させた",[38,152,153,154,157],{},"「今日はもうおしまいにしたいんで、進捗残しておいて」と伝えて、進捗ドキュメントを ",[45,155,156],{},"memo/2026-07-02/claude-skill-lesson-progress.md"," に保存させた。実装はほぼ完了していて、残りは検証フェーズ（lint／test／ブラウザでの実表示確認／出典表記の最終チェック）だけ。次セッション再開用のプロンプトもターミナルに出させたので、明日はコピペ1発で続きから始められる。",[14,159,160],{"id":160},"学び",[18,162,163,166,169,172],{},[21,164,165],{},"スクショ1枚＋「直しておいて」で、実画面の確認からピンポイントのコミットまで通る。バグ報告に長文の説明は要らなかった",[21,167,168],{},"セッションリミットで止まっても、エージェントはコンテキストを保持したまま中断地点から再開できた。リミットを恐れて作業を小さく刻む必要はなさそう",[21,170,171],{},"執筆9体＋画像制作の並列で、113セクション・SVG 34枚の教材が1日でほぼ形になった。人間の仕事は要件3点と途中の判断だけだった",[21,173,174],{},"切り上げるときは進捗ドキュメント＋再開プロンプトを残させる。「どこまでやったか」を思い出すコストが翌朝ゼロになる",[14,176,177],{"id":177},"明日やること",[18,179,182,192,198],{"className":180},[181],"contains-task-list",[21,183,186,191],{"className":184},[185],"task-list-item",[187,188],"input",{"disabled":189,"type":190},true,"checkbox"," 進捗ドキュメントの再開プロンプトから検証フェーズ（lint／test）を回す",[21,193,195,197],{"className":194},[185],[187,196],{"disabled":189,"type":190}," 新レッスンをブラウザで実表示確認し、矢印キーのページ移動とチャプター表示を確かめる",[21,199,201,203],{"className":200},[185],[187,202],{"disabled":189,"type":190}," 配布zipの中身と出典表記を最終チェックしてから公開判断をする",{"title":205,"searchDepth":206,"depth":206,"links":207},"",2,[208,209,210,214,215,216,217,218],{"id":16,"depth":206,"text":16},{"id":35,"depth":206,"text":36},{"id":62,"depth":206,"text":62,"children":211},[212],{"id":83,"depth":213,"text":83},3,{"id":93,"depth":206,"text":94},{"id":103,"depth":206,"text":104},{"id":149,"depth":206,"text":150},{"id":160,"depth":206,"text":160},{"id":177,"depth":206,"text":177},"dev","運営する学習レッスンサイトのチャプター表示バグをスクショ1枚の報告で直してコミットさせた。続けて、Claude Codeのスキル作成を学ぶ新レッスンを執筆エージェント9体の並列で構築。セッションリミットでの中断・再開と、進捗ドキュメントを残しての切り上げまでの記録。","md",{},null,"/lessons-chapter-bug-and-skill-lesson","eurekapu-nuxt4",false,"2026-07-02T00:00:00.000Z",{"title":5,"description":220},"2026-07/2026-07-02/lessons-chapter-bug-and-skill-lesson",[231,232,233,234,235],"Claude Code","サブエージェント並列","バグ修正","教材作成","Nuxt","jLtAiwb5P-vTnJxPmkKVHSqXfo9nApK1iNObdGzEMmg",[],"https://log.eurekapu.com/og/blog/lessons-chapter-bug-and-skill-lesson.png?v=2026-07-02T00%3A00%3A00.000Z&title=%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A71%E6%9E%9A%E3%81%A7%E3%83%90%E3%82%B0%E4%BF%AE%E6%AD%A3%E3%80%81%E5%9F%B7%E7%AD%86%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%889%E4%BD%93%E3%81%A7%E6%95%99%E6%9D%90%E3%81%A5%E3%81%8F%E3%82%8A%20%E2%80%94%20%E3%83%AC%E3%83%83%E3%82%B9%E3%83%B3%E3%82%B5%E3%82%A4%E3%83%88%E3%81%ABClaude%20Code%E3%82%B9%E3%82%AD%E3%83%AB%E4%BD%9C%E6%88%90%E8%AC%9B%E5%BA%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E6%97%A5&author=Kei%20Komatsu&sig=29a36e644fee9cc1",1783124599137]