html-visual

HTML ビジュアライゼーション

入力

$ARGUMENTS

指示

ユーザーのリクエストをインタラクティブな単一の HTML ファイルとしてビジュアライズします。 まず、references/common-rules.md を読み、共通ルールを確認してください。

タイプの判定

$ARGUMENTS の最初の単語からタイプを判定します。

引数	タイプ	ファイル名のパターン
mockup	UI モックアップ（高忠実度）	mockup-{name}.html
wireframe	ワイヤーフレーム（低忠実度、手描き風）	wireframe-{name}.html
erd	ERD	erd-{name}.html
flow	フローチャート／シーケンス図	flow-{name}.html
chart	データチャート	chart-{name}.html
slides	プレゼンテーション	slides-{name}.html
arch	アーキテクチャ図	arch-{name}.html
dashboard	複合ダッシュボード	dashboard-{name}.html
timeline	タイムライン／ガントチャート	timeline-{name}.html
mindmap	マインドマップ	mindmap-{name}.html
kanban	カンバンボード	kanban-{name}.html
table	インタラクティブなデータテーブル	table-{name}.html

該当なし：リクエストの内容からタイプを推測します。推測できない場合は、ユーザーに確認してください。 推測した場合は、ファイル名に visual-{name}.html を使用します。

{name} のルール：リクエストの中核となる名詞を抽出し、ケバブケースに変換します。例：「user login form」→ login-form、「payment flow」→ payment-flow。

入力の処理

• ファイルパスが指定されている場合：ファイルを読み込んで分析し、ビジュアライズします。 例：/html-visual erd schema.prisma → Prisma スキーマを分析して ERD を自動生成
• 既存の HTML の変更：既存ファイルを読み込んで変更します。最初から作り直さないでください。
• 自然言語のみの場合：タイプを推測してから生成します。

コンテキストの収集

• 説明だけで十分な場合：すぐに生成します（例：「シンプルなログインフォームのモックアップ」）
• プロジェクトコードの参照が必要な場合：先にコード／スキーマ／API を読み込みます（例：「当プロジェクトの ERD」、「現在の決済フロー」）
• 判断基準：リクエストに「当社の」「現在の」「プロジェクトの」といったプロジェクトコンテキストへの言及がある場合、先にコードを読み込みます。

タイプ別ガイド

mockup

• デバイスフレーム：モバイル／タブレット UI には実際のデバイスフレーム形状を使用します
• 複数画面：横並びのレイアウト＋画面ラベル
• プレースホルダーデータ：プロジェクトのコンテキストに合った現実的なデータ
• 画面遷移にはタブ／スワイプを使用します

wireframe

• 手描き風（スケッチ）スタイル：線にわずかな揺らぎを加え、手描きの雰囲気を出します
• 白黒またはグレースケール。色は最小限にします
• テキスト領域はグレーのブロックで表現します（「Lorem ipsum」は使用しません）
• レイアウトと情報構造に重点を置き、視覚的な細部は省きます

erd

• 属性リスト付きのエンティティボックス。PK／FK を区別します
• リレーションシップ線：1:1、1:N、N:M の表記。ノードのドラッグに自動追従します
• リレーションシップタイプの凡例を含めます

flow

• ノードタイプ：開始／終了（円）、処理（長方形）、分岐（ひし形）
• 方向付き矢印を使用します。ノードのドラッグに自動追従します
• 接続線上に分岐条件を表示します

chart

• データに適したチャートタイプ（棒、折れ線、円、散布図など）を自動選択します
• 軸ラベル＋単位、ホバーツールチップ、凡例を含めます
• Chart.js または D3.js を使用します

slides

• Reveal.js を CDN 経由で使用します
• スライドの切り替えアニメーションを含めます
• コードブロックのハイライト（highlight.js）を含めます
• 発表者ノートに対応します（S キーで切り替え）

arch

• システムコンポーネントをレイヤー／ゾーン（フロントエンド／バックエンド／DB／外部）ごとに分けます
• 通信線にプロトコル（HTTP、gRPC、pub/sub など）のラベルを付けます
• ズーム／パンに対応します
• D3.js の力学モデルによるレイアウト、または SVG を直接生成します

dashboard

• 複数のチャート／指標をグリッドレイアウトに配置します
• 上部に KPI カード（数値＋変化率）を配置します
• チャート間の連動操作：一つをクリックすると、ほかのチャートがフィルタリングされます

timeline

• 横方向または縦方向のタイムライン
• イベントノード＋日付ラベル
• 期間の移動にはズーム／スクロールを使用します
• Mermaid のガントチャートまたは D3.js を使用します

mindmap

• 中央ノードから放射状に展開します
• ノードの折りたたみ／展開に対応します
• Mermaid のマインドマップ、または SVG を直接生成します

kanban

• 列：TODO／進行中／完了（カスタマイズ可能）
• カードを列間でドラッグ＆ドロップできます
• カードにラベル／タグを表示します

表

• 列ヘッダーをクリックして並べ替え（昇順／降順）
• 上部で検索／フィルタリング
• ページネーションまたは仮想スクロール
• セルのハイライト、行の選択

手順

1. 種類と対象を特定する。曖昧な場合は確認します。パスが指定されている場合は、ファイルを読み込みます。
2. コンテキストの収集が必要か判断する。プロジェクトのコンテキストが必要かを判断します。必要な場合は、関連するコード／ドキュメントを読み込みます。
3. references/common-rules.md を読む。共通の原則、美観、CDN、エラー防止のルールを確認します。
4. references/html-boilerplate.md を読む。ベースとなる HTML テンプレートから始めます。
5. 種類別のガイドに従って HTML を生成する。
6. 検証する：生成した HTML を確認します。
   • HTML 属性にスマートクォート（曲線引用符）が使われていないこと
   • 閉じられていないタグがないこと
   • ノード／要素が重なっていないこと
   • 問題が見つかった場合は修正して、再検証します
7. open {filename} を実行するよう指示する。