jamesonedge/interactive-mockup

インタラクティブモックアップ

実際の選択肢を探索し、ユーザーに選んでもらい、選択されたものをブラウザで動作させる — ただし、静かに再設計はしません。

使用するタイミング

• 「モックアップ」「プロトタイプ」「いくつかの方向性を見せて」「クリッカブルにして」と言われたとき。
• デザインレビューで仕様が決まり、ユーザーがそれを体感したいとき。
• 情報アーキテクチャがまだ確定していないグリーンフィールドの画面。

使用しないタイミング

• 構築を伴わない批評のみ — デザインレビューワークフローを使用してください。
• アプリの実際のフレームワークにおけるプロダクション実装。
• 単一のパディング、色、コピーの変更。
• 実際のユーザーデータやプロダクションデータが必要なもの。プロトタイプは合成データのみを使用します。

入力

• タスクと制約（プラットフォーム、ビューポート、利用可能なトークン）。
• 代表的な合成データ。UI上で合成データであることを明示してください。本番データや個人データは決して貼り付けないでください。
• オプション：尊重すべきデザインレビューや仕様。
• オプション：ユーザーがすでに選択した方向性。その場合は、分岐をスキップして、直接ステップ3に進んでください。

ワークフロー

1. 分岐：2〜3の方向性ブリーフ

templates/direction-brief.md を使用して、方向性ごとにブリーフを作成します。すべての方向性は、同じ制約、データ、タスクを共有します。それらは、単なる配色ではなく、情報アーキテクチャやインタラクションモデルが異なっていなければなりません — 例えば、リストファースト vs フォーカスモード vs ボードなど。

• ランタイムが真に独立したワーカー（サブエージェントや個別セッション）をサポートしている場合は、独立して方向性を生成し、その旨を明示してください。
• それ以外の場合は、逐次的に生成し、次のように明示します：「方向性は1つのエージェントによって逐次的に生成されました。」

各方向性を、templates/direction.html から自己完結型の静的HTMLファイルとして構築します。静的とは、代表的なレイアウトと状態を意味します。インタラクションはまだ必要ありません。

2. 比較とユーザーによる選択

templates/comparison.html から比較ページを作成し、各方向性へのリンクと、意味のあるトレードオフ（それぞれが何を最適化し、何を犠牲にし、誰に適しているか）を記載します。一旦停止し、ユーザーに選択を求めます。 ユーザーが明示的に選択を委任しない限り、選択前にインタラクティブバージョンを構築しないでください。

3. 厳密な移植：インタラクティブプロトタイプの構築

references/graft-rules.md に従います。簡単に説明すると：

1. 選択された方向性のHTMLソースを読み取ります。
2. そのマークアップ構造、CSS、および視覚的決定を保持します。
3. 競合する可能性のある新しいクラスやIDには名前空間を設定します。
4. バニラJavaScriptを使用して動作するインタラクションを追加します。
5. templates/change-ledger.md を使用して、すべての変更を台帳に記録します。純粋な追加でない変更には理由が必要です。

無言の再設計は禁止です。選択された方向性に欠陥がある場合は、台帳に記録し、変更する前に質問してください。

4. 品質ゲート

references/prototype-quality.md に照らしてプロトタイプをチェックします：オフライン動作、ビューポートメタ、レスポンシブ、キーボード対応、可視フォーカス、リデュースモーション、空/ローディング/エラー状態、主要アクションのデッドリンクなし、合成データのラベル表示。

デフォルト

• アーティファクトごとに1つの自己完結型 .html ファイル：CSSとJSはインライン、CDNなし、Webフォントなし、外部画像なし（インラインSVGまたはCSSを使用）。
• システムフォントスタック。
• file:// からサーバーなしで動作。
• 自動で公開、デプロイ、アップロードしないでください。

出力

<output-dir>/
├── directions/
│   ├── a-<name>.html
│   ├── b-<name>.html
│   └── c-<name>.html   (オプション)
├── comparison.html
├── prototype.html
└── change-ledger.md

正直さ

プロトタイプはインタラクションとレイアウトを示すものです。ネイティブでの実現可能性、パフォーマンス、アクセシビリティ準拠、またはプロダクション対応の証拠ではありません。ハンドオフ時にその旨を伝えてください。

ライセンス表示

以下の表示は、このスタンドアロンスキルおよびその関連ファイルに付随します。

MIT License

Copyright (c) 2026 jamesonedge

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.