playground

Playground Builder

プレイグラウンドとは、一方にインタラクティブなコントロール、もう一方にライブプレビューがあり、下部にコピー用ボタン付きのプロンプト出力がある、自己完結型のHTMLファイルです。ユーザーはコントロールを調整し、見た目を確認したうえで、生成されたプロンプトをコピーしてClaudeに戻します。

このスキルを使う場面

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

このスキルの使い方

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ファイルを書き込んだ後、open <filename>.html を実行してユーザーの既定のブラウザーで起動します。

コア要件（すべてのプレイグラウンド共通）

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

状態管理のパターン

単一の状態オブジェクトを使います。すべてのコントロールはそのオブジェクトに書き込み、すべての描画処理はそこから読み込みます。

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が停止すると、プレイグラウンドが動作しなくなります
• プロンプトに文脈が足りない → プレイグラウンドがなくても実行に移せるだけの情報を含めます