playground

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

プレイグラウンドは、片側にインタラクティブなコントロール、反対側にライブプレビュー、下部にコピーボタン付きのプロンプト出力を備えた、単体で動作する HTML ファイルです。ユーザーはコントロールを調整し、視覚的に確認してから、生成されたプロンプトをコピーしてエージェントに戻します。

このスキルを使うタイミング

インタラクティブなプレイグラウンド、エクスプローラー、または特定のトピックに関するビジュアルツールをユーザーが求めた場合に使います。特に、入力の選択肢が多く、視覚的または構造的で、プレーンテキストでは表現しにくい場合に適しています。

このスキルの使い方

1. ユーザーのリクエストからプレイグラウンドの種類を特定します
2. templates/ から該当するテンプレートを読み込みます：
   • templates/design-playground.md — ビジュアルデザインの決定（コンポーネント、レイアウト、間隔、色、タイポグラフィ）
   • templates/data-explorer.md — データとクエリの作成（SQL、API、パイプライン、正規表現）
   • templates/concept-map.md — 学習と探索（概念マップ、知識のギャップ、範囲のマッピング）
   • templates/document-critique.md — ドキュメントのレビュー（承認／却下／コメントのワークフローを含む提案）
   • templates/diff-review.md — コードレビュー（行ごとのコメント機能を備えた git の差分、コミット、PR）
   • templates/code-map.md — コードベースのアーキテクチャ（コンポーネントの関係、データフロー、レイヤー図）
3. テンプレートに沿ってプレイグラウンドを作成します。トピックがどのテンプレートにも合わない場合は、最も近いものを選んで調整してください。
4. 利用可能であればブラウザーで開きます。 HTML ファイルを書き込んだ後、環境が対応していればユーザーのデフォルトブラウザーで起動します。対応していない場合は、ファイルパスを提示します。

中核となる要件（すべてのプレイグラウンド）

• HTML ファイル 1 つ。 CSS と JS をすべてインラインにします。外部依存は使いません。
• ライブプレビュー。 コントロールを変更するたびに、即座に更新します。「適用」ボタンは不要です。
• プロンプト出力。 値を羅列するのではなく、自然言語で記述します。デフォルト以外の選択肢のみを含めます。プレイグラウンドを見なくても実行できるだけのコンテキストを含め、リアルタイムで更新します。
• コピーボタン。 クリップボードにコピーし、短い「コピーしました！」のフィードバックを表示します。
• 適切なデフォルト値とプリセット。 初回読み込み時から見栄えよく表示します。すべてのコントロールを一貫性のある組み合わせに設定する、名前付きプリセットを 3〜5 個含めます。
• ダークテーマ。 UI にはシステムフォント、コードや値には等幅フォントを使います。装飾は最小限にします。

状態管理のパターン

状態オブジェクトを 1 つだけ保持します。すべてのコントロールはそこに値を書き込み、すべてのレンダリングはそこから値を読み取ります。

const state = { /* all configurable values */ };

function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}
// Every control calls updateAll() on change

プロンプト出力のパターン

function updatePrompt() {
  const parts = [];

  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // Use qualitative language alongside numbers
  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
  else if (state.shadowBlur > 0) parts.push('a subtle shadow');

  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}

避けるべきよくある間違い

• プロンプト出力が値の羅列になっている → 自然な指示文として記述します
• 一度に表示するコントロールが多すぎる → 用途ごとにグループ化し、高度な設定は折りたたみ可能なセクションに隠します
• プレビューがすぐに更新されない → コントロールを変更するたびに、即座に再レンダリングする必要があります
• デフォルト値やプリセットがない → 読み込み時に空の状態や動作しない状態になってしまいます
• 外部依存がある → CDN が停止すると、プレイグラウンドも動作しなくなります
• プロンプトにコンテキストが不足している → プレイグラウンドがなくても実行可能なだけの情報を含めます