html-playground

HTML プレイグラウンドビルダー

操作コントロール、ライブプレビュー、コピー可能な自然言語のプロンプトを備えた、自己完結型のインタラクティブな HTML エクスプローラーを構築します。

ユーザーが現在のタスクに関するデブリーフ、または保存済みの HTML による調査結果／レポートを求める場合、あるいは debrief [<slug>] を実行した場合は、デブリーフモードを使用します。それ以外の場合は、汎用プレイグラウンドを構築します。

ワークフロー

1. 対象ユーザー、判断事項、必要な状態を推測します。既存のデザインシステムや明示された要件がある場合は、これらの既定値より優先します。
2. 最も適したテンプレートを1つだけ読み込み、調整します。
   • templates/design-playground.md
   • templates/data-explorer.md
   • templates/concept-map.md
   • templates/document-critique.md
   • templates/diff-review.md
   • templates/code-map.md
3. インラインの CSS と JavaScript を含み、外部ランタイム依存関係のない HTML ファイルを1つ作成します。
4. デスクトップブラウザーで開き、すべてのコントロールとプリセットを操作して、ライブプレビュー、プロンプト出力、コピー時のフィードバック、空／エラー状態、キーボード操作を確認します。完了前に、レンダリング上の不具合を修正します。

デブリーフモード

現在のタスクの証拠を、インタラクティブな HTML レポートとして ./.ai/debriefs/<slug>/index.html に保存します。

• 省略された場合は、内容を表す短い kebab-case の slug を導き出します。
• 選択したデブリーフディレクトリ内にのみ書き込みます。推測した slug がすでに存在する場合は、衝突しない意味のある修飾語を選び、それでも解決しない場合はタイムスタンプの接尾辞を付け、既存の内容を上書きせずに続行します。ユーザーが slug を明示した場合は、上書きするか新しい slug を選ぶかを尋ねて停止します。
• 現在のタスクに含まれる証拠のみを使用します。実際の調査結果、パス、確認済みの場所、指標、判断、未解決のリスクを用います。内容のない埋め草を作りません。

ステップ1の前に、対象リポジトリから同梱の準備ツールを実行します。

bash <skill-dir>/scripts/prepare-debrief.sh <slug>

その出力にある DEBRIEFS_DIR、DEBRIEF_PATH、EXISTS を使用します。推測した slug について EXISTS が true の場合は、一意の slug を導き出し、書き込み前に準備ツールを再実行します。明示された slug について true の場合は、上記の選択をユーザーに求めます。slug の検証エラーを伝えて停止します。

その後、ワークフローに従います。DEBRIEF_PATH に書き込みます。証拠に適したテンプレートを使い、コントロールとプリセットに加えて証拠を表示します。完了前に、すべての主張がタスクの会話記録またはツールの証拠に基づいていること、出力にプレースホルダーが含まれていないことも確認します。その後、open "$DEBRIEF_PATH" を実行します。

推奨する既定値

プロダクトのコンテキストから別の方法が示されない場合は、以下を使用します。

• コントロールをライブプレビューの横に配置し、その下にプロンプト出力を配置します。
• デスクトップブラウザー向けのレイアウトにします。依頼されない限り、レスポンシブ／モバイルの動作を実装したり確認したりしません。
• 洗練されたライトテーマ、システム UI フォント、コード／値には等幅フォント、最小限の装飾を使用します。
• 空ではない適切な初期状態と、まとまりのある名前付きプリセットを3～5個用意します。
• 状態オブジェクトを1つ、更新経路を1つにし、プレビュー／プロンプトを即時更新します。
• コントロールは用途ごとにまとめ、高度なコントロールは折りたたんでおきます。
• 望ましい結果を自然言語で説明し、既定値以外の選択肢のみを記載するプロンプトテキストにします。

不変条件

• 「適用」ボタンは設けません。関連する変更は即時に反映します。
• プレイグラウンドを見なくても実行に移せる、状態の生データを羅列しただけではないプロンプトにします。
• コピー時には一時的なフィードバックを表示し、Clipboard API が失敗した場合でも使える代替手段を用意します。
• コピー時のマイクロコピーは Copy prompt、続いて Copied に統一します。失敗時は Copy failed — select the prompt below と表示します。
• プリセットを適用すると、コントロール、プレビュー、プロンプトが一貫して更新されます。
• プレビューまたは生成されるプロンプトのどちらにも影響しないコントロールは追加しません。

完了

完了には、自己完結型のファイルと、レンダリング済みのインタラクティブな検証エビデンスが必要です。要求された内容で必要な場合を除き、生成するプロンプトに装飾的なアイコンを含めないでください。

• プレイグラウンド：### ✨ Playground ready、リンク付きアーティファクト、アーティファクト／コントロール／デスクトップブラウザー／コピー時のフォールバックをまとめた簡潔な表で締めくくります。
• デブリーフ：選択したパスにエビデンスに基づくコンテンツがあることと、上書きを黙って行わない衝突処理も必要です。### 📊 Debrief ready — <title>、クリック可能な絶対パス、Opened in desktop browser、エビデンス表示とプリセットを示す簡潔な1行で締めくくります。準備用のKEY=VALUE出力、パス、スラッグのエラーは、正確さを保ち、装飾を加えないでください。