show-before-after について
2つの視覚状態を並べ、番号付き注釈を該当箇所に結び付けた、単一ページの比較画面を作るデザインスキルです。
主な機能
- 01状態の横並び・縦積み表示
- 02ソースに基づく内容の描画
- 03番号付き注釈のピン留め
- 04注釈とピンの連動ハイライト
- 05スクロールと表示範囲の調整
活用シーン
- 01インターフェース改修前後の比較
- 02チャートやモデル出力の差分表示
- 03端末テキストやログの比較
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/show-before-afterを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
変更前／変更後を表示
変更前／変更後ページは、視覚的な対象の2つの状態を並べて表示し、読者が目にする内容に基づいて理由を説明する、単独で完結したHTMLページです。変更前は通常、現在の状態です。変更後は、計画、完成したブランチ、または別の案です。
ソース
各ペインのタイトルの下にラベルを付け、利用できる中で最も忠実なソースからそれぞれの状態を描画します（「現在のapp.css」「main上のlocalhost:5173」「matplotlib、seed 0」「スクリーンショット、macOS」など）。
- 両方の状態がウェブページとして動作する場合：各
<iframe>をそれぞれのサーバーに向けます。 - 再現するHTML、CSS、またはSVG（ウェブUI、図、メール、レンダリング済みドキュメントなど）：実際のソースを
<iframe srcdoc>に入れ、2つのスタイルシートを分離します。 - レンダリング済みの出力（グラフ、モデル予測、ネイティブUIまたはモバイルUI）：各リビジョンの実際のコードで生成した画像を左右に配置します。
- テキスト出力（ターミナル、ログ、コピー）：実際のテキストを左右それぞれの等幅フォントのブロックに表示します。
変更点以外が唯一の違いとなるよう、両方に同じ入力、データ、シードを与えます。
ページ
- タイトルと、何が変わり、何が固定されるかを説明する1～2文。
- この比較に必要なコントロールだけを1行に配置します：注釈の切り替え、レイアウト（左右／上下）、ビューポート、長いフレームでの連動スクロール、変更点を試せる入力バリエーション。
- 2つのペイン：「変更前 · <ソース>」と「変更後 · <1行の要約>」。
- 各ペインの下に番号付きの注記を配置します。変更前の注記では問題点を、変更後の注記では修正点を示します。各注記は太字の主張と、その理由を説明する1文で構成し、該当する場合は具体的な数値（px、件数、価格、指標）を記載します。
- 各注記が説明する要素または領域のフレーム上に番号付きピンを置きます。注記にカーソルを合わせると対応するピンを強調表示し、ピンにカーソルを合わせると対応する注記を強調表示します。
出力
ページを$TMPDIR/<topic>/before-after.htmlに保存し、そのfile:// URLをバックグラウンドのブラウザーウィンドウで開き、絶対パスを返答します。srcdocのiframe、実行中のサーバーを参照するiframe、ページと同じ場所にある画像はすべてfile://から読み込めるため、サーバーは不要です。ブラウザーがfile://上でブロックする機能（fetch、ESモジュールのスクリプト、ローカルフォントファイル）がページに必要な場合にのみ、python3 -m http.serverでディレクトリを配信します。
すべての注記に説明対象のピンがあり、各状態がラベル付けされたソースと一致すれば、ページは完成です。