Claude Codeスキルを講座化する第3弾——「Excel風HTMLモック」レッスンを計画から本番公開まで一日で作った

結論

自分の書いたClaude Codeスキルを、読者向けの「講座（レッスン）」に変えていくシリーズの第3弾を、一日で本番まで出した。題材は「Excel風HTMLモック」——Excelの見た目をHTMLで再現するためのデザインルール集スキルを、解説と演習のあるページに仕立てたもの。

朝は前日の積み残しを棚卸しするところから始めて、次の題材を選び、実装計画を立て、10ステップを流し、公開前レビューを通して本番デプロイした。詰まったのは2箇所だけ（8列のデモ表が横スクロールしない／コード表示の二重エスケープ）で、どちらも実画面を見て気づいた。

積み残しの棚卸しから始めた

朝いちばんに「積み残しって何でしたっけ」と聞くところからスタートした。 memoを確認させたら、残っていたのは2件。大きいほうが「スキル講座シリーズの次の題材決定」で、自分の確認待ちで止まっていた。もう1件は数日前に計画だけ固めた「コンテンツ品質チェックスクリプト」で、こちらは未着手のまま。

前日までに第1弾（SVG図解の講座）と第2弾（IBフォーマットの講座）は本番に出し終えていたので、この日は素直に「次の題材選び」に進むことにした。

次の題材は「Excel風HTMLモック」に決めた

候補を並べた検討資料をブラウザで開き直して眺めた。上位に来ていたのが「Excel風HTMLモック」で、第2弾のIBフォーマット講座（Excelに投資銀行の書式を当てるやつ）と親和性が高い。片方はExcelに書式を当てる方向、こちらはExcelの見た目をHTMLで作る方向——ちょうど裏表の関係になっていて、シリーズとして並べる意味がある。

正直、自分でも元スキルの中身をどう書いたか覚えていなかったので、まず「中を見て実装計画を作って」と投げた。中身を確認させたら、面白い発見があった。このスキルは SKILL.md 1ファイルだけ（18KB） で、referencesもPythonスクリプトも持たない、純粋な「デザインルール集」型だった。実行するコードを一切持たず、その都度HTMLを生成させる方式。

実装計画を作らせて、Codexでレビューした

計画はHTMLの進捗管理ファイルにまとめさせた（第1弾・第2弾と同じ雛形）。仕上がった計画書をCodex（gpt-5.5）にレビューさせたら、致命的な指摘が2件返ってきたので、それを反映してから確定。ここまでで「承認したらStep 1から着手できる」状態になった。

計画が固まったところで一度セッションを切り替えた。このとき引き継ぎプロンプトを出させたが、次のセッションでは「計画書を見れば進められる」ことがわかったので、実際にはプロンプトなしで実装を開始した。計画書を自己完結させておくと、こういうとき身軽でいい。

Step 1〜10を一気に流した

実装は10ステップに割ってあって、ほぼ止まらずに流れた。おおまかな流れはこう。

Step 1: 元のSKILL.mdを実態に合わせて直し、配布用のスナップショットを固定。禁止ワード（サイト固有の内部語）が残っていないかを機械チェックして、対応表の骨組みまで作った
Step 2〜3: パンくずに分岐を足し、目次ファイルとカードを追加。カード画像のSVGはsvg-diagramスキルで、第1弾・第2弾の前例に合わせて作らせた
Step 4: 講座の各ページ（7ファイル）を用意して、全16 URLが200で返ることを確認
Step 5: 本文の執筆（後述）
Step 6〜8: 概念図のSVGを2枚起こし、既存講座からの導線を追加。既存側は「追加だけ」で壊していないことを差分で確認

途中、配布用zipを作る小さなコマンドがクォートの解釈で1回こけたが、シングルクォートに変えて即通した。

本文はSonnet 5で6章を並列執筆

本文の執筆がいちばん量があるので、ここは Sonnet 5のサブエージェント6体を並列で派遣 して6章を同時に書かせた。書き上がった章から順に「執筆中」のプレースホルダーが消えているか・ESLintがゼロかを確認していき、最後まで残ったのは関数パターンの章だった。ここには数式のコードをそのまま見せる箇所があって、二重エスケープが2件残っていた。

全部そろったところでJSONを再生成し、テストを回したら 2,631件が全PASS。

詰まったところ（試行錯誤）

流れ自体は速かったが、実画面を見て初めて気づいた不具合が2つあった。どちらも「〜のはず」で済ませずスクリーンショットを目視したから拾えた。

8列のデモ表が横スクロールしない

スクショを見ていて、8列あるデモの表がモバイル幅でぎゅっと圧縮されていることに気づいた。本来は横スクロールで全列を見せたいのに、セルが折り返して詰まってしまう。原因はモバイル側のテーブルCSSだった。該当のデモ表の行だけを一意に特定して white-space: nowrap を足したら、狙いどおり横スクロールが出て実挙動が一致した。

同じ知見（nowrapを1項目足す）は元のスキル本体にも反映して、スナップショットと配布物を再同期した。講座で見つけた不具合を元スキルに戻しておかないと、次に生成したとき同じ症状が再発する。

コード表示の二重エスケープ

公開前レビューでも同じ系統の指摘が出た。IF関数を説明する章で、コード表示部分の記号が二重にエスケープされて崩れて見えていた。ソースの該当箇所を確認して直し、コード表示として正しく出るようにした。

デプロイ前の確認と本番公開

本番に出す前に、まず「この変更が既存を壊していないか」を差分で確認した。やったのは講座ページの新規追加と導線の追記だけで、既存ページに対しては足し算しかしていない——つまり静的コンテンツの追加だけであることを差分で押さえた。

そのうえで 公開前レビューをSonnet 5のサブエージェント2体 に並列でやらせた（片方は元スキルとの整合、もう片方はサイトの執筆規約との整合）。出てきた致命的指摘は前述の二重エスケープ1件だけで、それを直せば残りは問題なし。デプロイ封鎖のガード（下書き状態のページが本番に漏れるのを止める仕組み）も、有効モードで起動して直URLが403になること・カードが出ないことまで確認した。

準備が済んだので、講座のSVG2枚とカード画像1枚を画像ストレージにアップロードし、下書きフラグを外してコミット、本番デプロイ。デプロイはガードを通過して成功し、本番の全URLが200で返ることを確認した。最後に計画書のステータスと選定資料を更新して締め。Step 1〜10まで、この日のうちに公開まで届いた。

気づき：スキルはSKILL.md 1枚、でも生成コードは反復だらけ

公開したあと、「このスキル、本体のMarkdownしか入ってなくてPythonスクリプトはないんだっけ？」と気になって実物を確認させた。やはりSKILL.md 1ファイルだけで、実行コードは持たない。生成のたびにHTMLをその場で書き起こす方式だった。

ここで一つ引っかかった。Excelのセルの構造はある程度決まっているのだから、毎回ゼロから書かせるより、共通部分はコード化しておけるはずだ。実データを測らせたら、生成物のなかに 同じ文字列が136回・144回・29回 と反復している箇所があった。やはり手で書くには重複が多い。

そこで、宣言的にシートを組み立てる excelSheet() のようなAPIを用意する——という次の計画をその場で起こしてもらった。ビルダー化する範囲・しない範囲、TSで実装する理由まで、実測値ごと計画書に残してある。講座を1本仕上げるたびに「次はここを楽にできる」が見えてくるのが、このシリーズを続けている理由だと思う。次はこの共通化に手を付ける。