コードと画面の対応をスライドで追える feature-slides スキルを作った

別リポジトリのCFWS v2が複雑すぎて全体像が掴めない、という相談から始まった一日。スライド化を試したら作り方ごと固まってきたので、最終的に再利用可能なスキル feature-slides として .claude/skills/ に切り出した。

発端

「コードベースが複雑すぎて理解できない。スライドで1ステップずつ刻んで、動画みたいに説明してほしい」というリクエスト。

最初は reveal.js でCFWS v2の構造解説スライドを書いた。

ところが文字とテーブルがスライド枠からはみ出る。CSSと reveal.js の設定を3回書き直してようやく収まった。reveal.js のフォント初期値が大きく、テーブルを置くと簡単に枠を超える。

「CFWSの仕組みを丁寧に解説する」アプローチを途中で捨てた。

代わりに、Excel理解を前提にして「画面のこの行 ← このcomputed ← このストア値 ← この型のこのプロパティ」を追跡する形に作り直す。サンプル章として「資金調達_v2 → 借入 → まとめ」シートを取り上げ、数字1つを起点にコードを遡るスライドを並べた。

最初は Pinia / composable / Vue Component の3層で説明していたが、ユーザーから「7層に拡張してほしい。裏で支える脇役も入れて」と要望が来て層を増やした。脇役を可視化したことでコード追跡の解像度が上がった。

Vue 2/Vuex経験者向けに「Vue 2 でいうところのこの層」と例えるスライドも追加。Vuex → Pinia の差分は4点に絞った：

ここまで作った時点でユーザーから「これスキル化しといてくれませんかね。何か機能を追加したらスラッシュコマンドでスライドで説明してくれる感じで」と要望が出た。

feature-slides スキルを .claude/skills/ 配下に作成。スライド構成のテンプレート、層の定義、追跡型スライドの書き方、reveal.js の設定をまとめた。

ここからスキルが二段階目に入った。

「Excelを HTML で表示するスキルがある。あれと同じ要領で、画面の中身を Excel のセル番地に合わせて忠実に再現してほしい。Excelを貼り付けたように」

スライド10ページ目（資本政策タイムライン）を Excel忠実再現グリッドに差し替えた。行番号と列レター（A, B, C...）を入れて、本物のExcelに見えるようにする。

これが伝わりやすかったので全11スライドのテーブルを Excel忠実再現に置き換えた。同時に「タイトル → ワンメッセージ → チャート」の3要素にスライド構成を統一して、Excel領域を画面いっぱいに広げた。

「Excel はシート単位で説明してほしい。同じシートで違う注目領域を見せたいときはスライドを分けて」という要望。

共通描画関数を1つ用意し、ハイライト指定だけで切り替える形に変更。同じシートを描画しつつ、注目セルだけが切り替わる。

A, B, E, L, N, P を極細にして余白を作る運用を確立。スキルにルールとして書き込んだ。

3つ以上のセルを選択する場合、塗りつぶしではなく外枠だけにオレンジ色をつける方式に変更した。

// セル単位ではなく範囲のborderだけを描画
const drawRangeBorder = (range, color) => {
  // top/right/bottom/left を範囲の外側にだけ引く
}

塗りつぶし方式だと「セル1つ1つに色がついた表」に見えるが、外枠方式だと「ここに注目してください」という意図が静的に伝わる。

Excel風に範囲選択したとき、行・列ヘッダーをグレー濃淡に統一。本物のExcelの再現に寄せた。

#	テーマ	試したこと	結果	気づき
1	最初のスライド	文字・テーブルがはみ出る	CSS調整で収まった	reveal.js のフォント初期値が大きい
2	スライド数が13で止まる	HTMLコメントの書き換え	全枚数を認識した	コードブロック内のHTMLコメントは要エスケープ
3	範囲外枠ハイライト	ボーダー方式に変更	意図が伝わるようになった	塗りつぶしより外枠のほうがExcelらしい
4	座標エラー I→J	実Excelで再確認	修正できた	LibreOffice で再計算 + openpyxl で確認
5	スペーサー列の opacity	範囲内では opacity を外す	解決	スペーサーが見えなくなる問題