[{"data":1,"prerenderedAt":423},["ShallowReactive",2],{"content-/feature-slides-skill":3,"all-pages-for-dir":421,"og-image-/feature-slides-skill":422},{"id":4,"title":5,"body":6,"category":403,"description":404,"extension":405,"meta":406,"navigation":372,"ogImage":407,"path":408,"project_name":409,"published":410,"publishedAt":411,"seo":412,"stem":413,"tags":414,"todo":407,"unpublished":410,"updatedAt":407,"__hash__":420},"pages/2026-04/2026-04-28/feature-slides-skill.md","コードと画面の対応をスライドで追える feature-slides スキルを作った",{"type":7,"value":8,"toc":385},"minimark",[9,22,26,29,32,35,38,41,44,47,50,66,69,72,80,84,87,90,93,96,100,103,106,109,112,115,118,185,188,192,195,198,311,314,317,321,335,338,341,344,358,361,381],[10,11,12,13,17,18,21],"p",{},"別リポジトリのCFWS v2が複雑すぎて全体像が掴めない、という相談から始まった一日。スライド化を試したら作り方ごと固まってきたので、最終的に再利用可能なスキル ",[14,15,16],"code",{},"feature-slides"," として ",[14,19,20],{},".claude/skills/"," に切り出した。",[23,24,25],"h2",{"id":25},"発端",[10,27,28],{},"「コードベースが複雑すぎて理解できない。スライドで1ステップずつ刻んで、動画みたいに説明してほしい」というリクエスト。",[10,30,31],{},"最初は reveal.js でCFWS v2の構造解説スライドを書いた。",[10,33,34],{},"ところが文字とテーブルがスライド枠からはみ出る。CSSと reveal.js の設定を3回書き直してようやく収まった。reveal.js のフォント初期値が大きく、テーブルを置くと簡単に枠を超える。",[23,36,37],{"id":37},"説明形式の方針転換",[10,39,40],{},"「CFWSの仕組みを丁寧に解説する」アプローチを途中で捨てた。",[10,42,43],{},"代わりに、Excel理解を前提にして「画面のこの行 ← このcomputed ← このストア値 ← この型のこのプロパティ」を追跡する形に作り直す。サンプル章として「資金調達_v2 → 借入 → まとめ」シートを取り上げ、数字1つを起点にコードを遡るスライドを並べた。",[10,45,46],{},"最初は Pinia / composable / Vue Component の3層で説明していたが、ユーザーから「7層に拡張してほしい。裏で支える脇役も入れて」と要望が来て層を増やした。脇役を可視化したことでコード追跡の解像度が上がった。",[10,48,49],{},"Vue 2/Vuex経験者向けに「Vue 2 でいうところのこの層」と例えるスライドも追加。Vuex → Pinia の差分は4点に絞った：",[51,52,53,57,60,63],"ul",{},[54,55,56],"li",{},"mutations が要らなくなった",[54,58,59],{},"TypeScriptの型推論が効くようになった",[54,61,62],{},"setup syntax で書ける",[54,64,65],{},"Composition API と同じ書き方で統一された",[23,67,68],{"id":68},"スキル化",[10,70,71],{},"ここまで作った時点でユーザーから「これスキル化しといてくれませんかね。何か機能を追加したらスラッシュコマンドでスライドで説明してくれる感じで」と要望が出た。",[10,73,74,76,77,79],{},[14,75,16],{}," スキルを ",[14,78,20],{}," 配下に作成。スライド構成のテンプレート、層の定義、追跡型スライドの書き方、reveal.js の設定をまとめた。",[23,81,83],{"id":82},"excel忠実再現グリッドへの進化","Excel忠実再現グリッドへの進化",[10,85,86],{},"ここからスキルが二段階目に入った。",[10,88,89],{},"「Excelを HTML で表示するスキルがある。あれと同じ要領で、画面の中身を Excel のセル番地に合わせて忠実に再現してほしい。Excelを貼り付けたように」",[10,91,92],{},"スライド10ページ目（資本政策タイムライン）を Excel忠実再現グリッドに差し替えた。行番号と列レター（A, B, C...）を入れて、本物のExcelに見えるようにする。",[10,94,95],{},"これが伝わりやすかったので全11スライドのテーブルを Excel忠実再現に置き換えた。同時に「タイトル → ワンメッセージ → チャート」の3要素にスライド構成を統一して、Excel領域を画面いっぱいに広げた。",[97,98,99],"h3",{"id":99},"シート単位表示",[10,101,102],{},"「Excel はシート単位で説明してほしい。同じシートで違う注目領域を見せたいときはスライドを分けて」という要望。",[10,104,105],{},"共通描画関数を1つ用意し、ハイライト指定だけで切り替える形に変更。同じシートを描画しつつ、注目セルだけが切り替わる。",[97,107,108],{"id":108},"スペーサー列",[10,110,111],{},"A, B, E, L, N, P を極細にして余白を作る運用を確立。スキルにルールとして書き込んだ。",[97,113,114],{"id":114},"範囲外枠ハイライト",[10,116,117],{},"3つ以上のセルを選択する場合、塗りつぶしではなく外枠だけにオレンジ色をつける方式に変更した。",[119,120,125],"pre",{"className":121,"code":122,"language":123,"meta":124,"style":124},"language-js shiki shiki-themes vitesse-light vitesse-light","// セル単位ではなく範囲のborderだけを描画\nconst drawRangeBorder = (range, color) => {\n  // top/right/bottom/left を範囲の外側にだけ引く\n}\n","js","",[14,126,127,136,173,179],{"__ignoreMap":124},[128,129,132],"span",{"class":130,"line":131},"line",1,[128,133,135],{"class":134},"sxvE3","// セル単位ではなく範囲のborderだけを描画\n",[128,137,139,143,147,151,154,158,161,164,167,170],{"class":130,"line":138},2,[128,140,142],{"class":141},"stQ0i","const",[128,144,146],{"class":145},"senZ8"," drawRangeBorder",[128,148,150],{"class":149},"shFtX"," =",[128,152,153],{"class":149}," (",[128,155,157],{"class":156},"s4oTP","range",[128,159,160],{"class":149},",",[128,162,163],{"class":156}," color",[128,165,166],{"class":149},")",[128,168,169],{"class":149}," =>",[128,171,172],{"class":149}," {\n",[128,174,176],{"class":130,"line":175},3,[128,177,178],{"class":134},"  // top/right/bottom/left を範囲の外側にだけ引く\n",[128,180,182],{"class":130,"line":181},4,[128,183,184],{"class":149},"}\n",[10,186,187],{},"塗りつぶし方式だと「セル1つ1つに色がついた表」に見えるが、外枠方式だと「ここに注目してください」という意図が静的に伝わる。",[97,189,191],{"id":190},"行列ヘッダーの配色","行・列ヘッダーの配色",[10,193,194],{},"Excel風に範囲選択したとき、行・列ヘッダーをグレー濃淡に統一。本物のExcelの再現に寄せた。",[23,196,197],{"id":197},"試行錯誤の記録",[199,200,201,223],"table",{},[202,203,204],"thead",{},[205,206,207,211,214,217,220],"tr",{},[208,209,210],"th",{},"#",[208,212,213],{},"テーマ",[208,215,216],{},"試したこと",[208,218,219],{},"結果",[208,221,222],{},"気づき",[224,225,226,244,261,277,294],"tbody",{},[205,227,228,232,235,238,241],{},[229,230,231],"td",{},"1",[229,233,234],{},"最初のスライド",[229,236,237],{},"文字・テーブルがはみ出る",[229,239,240],{},"CSS調整で収まった",[229,242,243],{},"reveal.js のフォント初期値が大きい",[205,245,246,249,252,255,258],{},[229,247,248],{},"2",[229,250,251],{},"スライド数が13で止まる",[229,253,254],{},"HTMLコメントの書き換え",[229,256,257],{},"全枚数を認識した",[229,259,260],{},"コードブロック内のHTMLコメントは要エスケープ",[205,262,263,266,268,271,274],{},[229,264,265],{},"3",[229,267,114],{},[229,269,270],{},"ボーダー方式に変更",[229,272,273],{},"意図が伝わるようになった",[229,275,276],{},"塗りつぶしより外枠のほうがExcelらしい",[205,278,279,282,285,288,291],{},[229,280,281],{},"4",[229,283,284],{},"座標エラー I→J",[229,286,287],{},"実Excelで再確認",[229,289,290],{},"修正できた",[229,292,293],{},"LibreOffice で再計算 + openpyxl で確認",[205,295,296,299,302,305,308],{},[229,297,298],{},"5",[229,300,301],{},"スペーサー列の opacity",[229,303,304],{},"範囲内では opacity を外す",[229,306,307],{},"解決",[229,309,310],{},"スペーサーが見えなくなる問題",[97,312,313],{"id":313},"座標エラー検出",[10,315,316],{},"ユーザーから「14行目の列が今 I 列に入っちゃってますけど、これ J 列じゃないですかね」と指摘が来た。実 Excel を LibreOffice で開き直し、openpyxl でセル番地を確認して修正。AIが想像で番地を打つと1列ズレる事故が起きる、という教訓を得た。",[97,318,320],{"id":319},"htmlコメント問題","HTMLコメント問題",[10,322,323,326,327,330,331,334],{},[14,324,325],{},"\u003Cpre>\u003Ccode>"," 内に書いた ",[14,328,329],{},"\u003C!-- ... -->"," がHTMLパーサにコメントとして拾われ、スライドが13枚しか認識されなかった。コードブロック内のHTMLコメントは ",[14,332,333],{},"<!--"," などにエスケープする、というルールをスキルに追記した。",[23,336,337],{"id":337},"短縮プロンプト化",[10,339,340],{},"「プロンプトが長すぎる。2〜3行で発動できるようにしてほしい」という要望に応じて、スキルに「短縮プロンプト」セクションと「Claude が自動的に行うこと」を追加。次回からは「このシートをスライドで」程度の指示で全工程が動くようにした。",[23,342,343],{"id":343},"学び",[51,345,346,349,352,355],{},[54,347,348],{},"「コードを動画みたいに説明」要望から1日でスキルまで成立した",[54,350,351],{},"Excel理解者向けには「Excel忠実再現グリッド」が圧倒的に伝わる、ではなく、本物と区別がつかない見た目になった瞬間に質問が止まった",[54,353,354],{},"範囲外枠ハイライトに切り替えたら「どこを見ればいいか」を口頭で補足する必要が消えた",[54,356,357],{},"ユーザー操作の流れをそのままスキル化することで、次回から2〜3行プロンプトで再現できる状態になった",[23,359,360],{"id":360},"明日やること",[51,362,365,375],{"className":363},[364],"contains-task-list",[54,366,369,374],{"className":367},[368],"task-list-item",[370,371],"input",{"disabled":372,"type":373},true,"checkbox"," feature-slides スキルを別シート（CFWS本体）に適用して再現性を確認する",[54,376,378,380],{"className":377},[368],[370,379],{"disabled":372,"type":373}," 座標エラー検出を自動化するため、openpyxl で番地を取得してスライドに埋め込む補助スクリプトを書く",[382,383,384],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":124,"searchDepth":138,"depth":138,"links":386},[387,388,389,390,396,400,401,402],{"id":25,"depth":138,"text":25},{"id":37,"depth":138,"text":37},{"id":68,"depth":138,"text":68},{"id":82,"depth":138,"text":83,"children":391},[392,393,394,395],{"id":99,"depth":175,"text":99},{"id":108,"depth":175,"text":108},{"id":114,"depth":175,"text":114},{"id":190,"depth":175,"text":191},{"id":197,"depth":138,"text":197,"children":397},[398,399],{"id":313,"depth":175,"text":313},{"id":319,"depth":175,"text":320},{"id":337,"depth":138,"text":337},{"id":343,"depth":138,"text":343},{"id":360,"depth":138,"text":360},"dev","別リポジトリの複雑な構造解説をスライド化する過程で、画面・コード・型の対応を追跡する形式に到達。Excel忠実再現グリッドや範囲外枠ハイライトを組み込んで、汎用スキルとして固めた。","md",{},null,"/feature-slides-skill","eurekapu-nuxt4",false,"2026-04-28T00:00:00.000Z",{"title":5,"description":404},"2026-04/2026-04-28/feature-slides-skill",[415,416,417,418,419],"claude-code","skill","slide","reveal-js","excel","-VZ55xa2r8LnBDfMgjAOGGzWf-4VEVbk6M-4nH6r37o",[],"https://log.eurekapu.com/og/blog/feature-slides-skill.png?v=2026-04-28T00%3A00%3A00.000Z&title=%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A8%E7%94%BB%E9%9D%A2%E3%81%AE%E5%AF%BE%E5%BF%9C%E3%82%92%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%A7%E8%BF%BD%E3%81%88%E3%82%8B%20feature-slides%20%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F&author=Kei%20Komatsu&sig=8bc9c4d91aefbf5f",1782528830362]