html-prototype-build

HTML プロトタイプの構築

クイックスタート

1. ユーザーの資料からプロトタイプの種類とビジネス上の事実を確認します。情報が不足している場合は推測せず、先に質問してください。
2. UI を生成または大幅に変更する場合は、node <skill-root>/scripts/resolve-pack.mjs --list を実行し、続けて node <skill-root>/scripts/resolve-pack.mjs --pack=<pack-id> --select=<preset, pattern, or component id> を実行して、出力された最小限のファイル一式だけを読みます。
3. 共通生成規約 §7 に従って、完全な <prototype-name>/ 納品ディレクトリを生成します。ビジネス上の状態はすべて PrototypeViewers を経由させ、正式な Client Runtime には Runtime のコピーをそのまま使用します。
4. 完了したら、リポジトリのルートで npm test を実行します。作業に必要な場合にのみ、オーサリングサーバーを起動するか、シナリオのスクリーンショットを撮影してください。

まずタスクを振り分ける

現在のタスクに合致する項目だけを読みます。すべてのリファレンスを一度に読まないでください。

ユーザーの目的	必読項目	主な出力またはツール
UI の生成、再構築、大幅な変更	UI 生成	HTML プロトタイプと必要に応じた UI コンポーネント
不足している UI パックのインストールまたはダウンロード	パックのインストール	scripts/install-pack.mjs
Viewer、ノートカード、SVG コネクター、またはインタラクションの稲妻アイコンについて理解する	プロダクト注釈	スナップショット + Client Runtime
オーサリング環境の起動、直接編集、ノートの編集、またはソースへの移動	ローカルオーサリング	runtime/server/index.mjs + Author Tools
スケッチボードコンポーネントの追加または変更	スケッチボードコンポーネント	パックの manifest.json atoms + data-pack-atom
ページへのレビューピンの追加、AI 向けエクスポート	レビューマーク	runtime/author/tools/mark/
ページの状態ごとのスクリーンショットの一括撮影	シナリオスクリーンショット	runtime/cli/screenshot.mjs
最終ファイルの準備	納品と反復	最終納品ファイル
納品前の最終確認	納品チェックリスト	項目ごとのチェックボックス

UI を生成または大幅に変更する場合は、まず共通生成規約を読みます。それ以外のタスクでは、上記の該当する項目だけを読み、規約全体は読みません。

ビジュアル関連のタスクでは、UI パックカタログからパックを確認し、基盤とプロバイダーを選択して、最小限のファイル一式を解決し、利用側パックのルールに従います。パックがインストールされていない場合は、パックのインストールに従ってください。

scripts/ には、エージェントが使用する決定論的なツールが含まれています。runtime/ は実行境界ごとに分かれています。client/ は正式なブラウザーランタイム、author/ はブラウザー上のオーサリングツール（スケッチボードを含む）、server/ はローカルの Node オーサリングサービス、cli/ は単独で使用できるコマンドラインツールです。プロトタイプにコピーするのは runtime/client/ だけです。runtime/author/、runtime/server/、runtime/cli/ はスキル内に保持します。

用語

• ponytail: — プロトタイプで意図的に省略した箇所や、未収集の状態を示すインプレースコメントです。実際のスクリーンショット、計算済みスタイル、またはインタラクションの証拠を入手したら、置き換えてください。
• プロジェクト資料 — 現在のタスクに関するスクリーンショット、要件、確認済みの事実です（一般的なフレームワークのデフォルト設定ではありません）。

コアの境界

• すべてのプロトタイプでは、配布された runtime/client/core/display-mode.js、runtime/client/core/state.js、runtime/client/notes/model.js、runtime/client/notes/viewer.js を順番どおりに使用する必要があります。state.js は単一の PrototypeViewers 状態ソースを提供し、model.js はノートのシナリオメタデータと純粋な when の照合のみを担当し、Notes Viewer は DOM とコネクターの描画のみを担当します。これらの責務を Viewer に戻してはいけません。
• 正式なノートは、runtime/server/index.mjs と Notes editor を通じてのみ prototype/notes.snapshot.js に書き戻します。prototype.html にノートエディターをインラインで記述したり、正式なノートを localStorage に保存したりしてはいけません。
• Mark は、Direct edit と並んで Author Tools パネルに配置される一時的なレビュー用ツールです。そのデータはページパスごとにスコープされた localStorage に保存し、スナップショットには書き込まず、ソース HTML にも挿入しません。
• Direct edit はオーサリングセッション内でのみプレビューし、サーバーを介してソース HTML に安全に書き戻します。
• オーサリングサービスが扱うのは、ローカル編集とプロトタイプ内のソース検索のみです。ソース HTML に含めたり、最終成果物に含めたりしてはいけません。
• runtime/author/sketch/ のスケッチボードはオーサリングセッション用のページです。これを <prototype-name>/ にコピーしてはいけません。
• スクリーンショットが使用するのは URL のシーンと正式な注釈データのみです。業務状態は生成しません。
• システム名、メニュー、フィールド、状態、業務データは、ユーザーの資料に基づいて設定する必要があります。情報が不明確な場合は確認し、推測してはいけません。