スキルOfficialdevelopment

🎮playground

プラグイン: playground
ソース: GitHub で見る ↗

説明

インタラクティブなHTMLプレイグラウンドを作成します。コントロールを使ってビジュアルに設定を変更し、ライブプレビューを確認しながら、プロンプトをコピーできる、自己完結型の単一ファイル形式のエクスプローラーです。次のような場合に使用: ユーザーが特定のトピックに関するプレイグラウンド、エクスプローラー、またはインタラクティブツールの作成を求めているとき。

原文を表示

Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.

ユースケース

✓特定のトピックに関するプレイグラウンドを作成するとき
✓インタラクティブなエクスプローラーを作成するとき
✓ビジュアルに設定を変更して確認したいとき
✓プロンプトをコピーして再利用したいとき

本文（日本語訳）

Playground Builder

Playgroundとは、一方にインタラクティブなコントロール、もう一方にライブプレビュー、そして下部にコピーボタン付きのプロンプト出力を備えた、単一の自己完結型HTMLファイルです。ユーザーはコントロールを操作して視覚的に探索し、生成されたプロンプトをClaudeにコピーして貼り付けます。

このスキルを使う場面

次のような場合に使用: あるトピックに対してインタラクティブなPlayground、エクスプローラー、またはビジュアルツールをユーザーが求めているとき。特に、入力の空間が広大である、視覚的である、または構造的であり、プレーンテキストでは表現しにくい場合。

このスキルの使い方

Playgroundの種類を特定する — ユーザーのリクエストから判断する
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 — コードベースのアーキテクチャ（コンポーネントの関係、データフロー、レイヤー図）
テンプレートに従って Playgroundを構築する。どのテンプレートにも完全には当てはまらないトピックの場合は、最も近いものを選んで適宜アレンジする。
ブラウザで開く。 HTMLファイルを書き出したら、open <filename>.html を実行してユーザーのデフォルトブラウザで起動する。

コア要件（すべてのPlayground共通）

単一HTMLファイル。 CSSとJSはすべてインライン化する。外部依存関係は持たない。
ライブプレビュー。 コントロールを変更するたびに即座に更新する。「適用」ボタンは不要。
プロンプト出力。 値をそのまま列挙するのではなく、自然言語で記述する。デフォルトから変更された項目のみ言及する。Playgroundを見なくても実行できる十分なコンテキストを含む。リアルタイムで更新される。
コピーボタン。 クリップボードへのコピー機能と、簡潔な「Copied!」フィードバックを実装する。
適切なデフォルト値とプリセット。 初回ロード時から見栄えが良い状態にする。すべてのコントロールを一貫性のある組み合わせに一括設定できる、名前付きプリセットを3〜5個用意する。
ダークテーマ。 UIにはシステムフォント、コード・値にはモノスペースフォントを使用する。装飾は最小限に。

状態管理パターン

単一のstateオブジェクトを維持する。すべてのコントロールはstateに書き込み、すべての描画はstateから読み込む。

const state = { /* すべての設定可能な値 */ };

function updateAll() {
  renderPreview(); // ビジュアルを更新
  updatePrompt();  // プロンプトテキストを再構築
}
// すべてのコントロールは変更時に updateAll() を呼び出す

プロンプト出力パターン

function updatePrompt() {
  const parts = [];

  // デフォルト値から変更された項目のみ言及する
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // 数値と並べて定性的な表現を使用する
  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が落ちるとPlaygroundが機能しなくなる
プロンプトにコンテキストが不足している → Playgroundなしでも実行可能な情報を十分に含める

原文（English）を表示

Playground Builder

A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.

When to use this skill

When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.

How to use this skill

Identify the playground type from the user's request
Load the matching template from templates/:
- templates/design-playground.md — Visual design decisions (components, layouts, spacing, color, typography)
- templates/data-explorer.md — Data and query building (SQL, APIs, pipelines, regex)
- templates/concept-map.md — Learning and exploration (concept maps, knowledge gaps, scope mapping)
- templates/document-critique.md — Document review (suggestions with approve/reject/comment workflow)
- templates/diff-review.md — Code review (git diffs, commits, PRs with line-by-line commenting)
- templates/code-map.md — Codebase architecture (component relationships, data flow, layer diagrams)
Follow the template to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
Open in browser. After writing the HTML file, run open <filename>.html to launch it in the user's default browser.

Core requirements (every playground)

Single HTML file. Inline all CSS and JS. No external dependencies.
Live preview. Updates instantly on every control change. No "Apply" button.
Prompt output. Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.
Copy button. Clipboard copy with brief "Copied!" feedback.
Sensible defaults + presets. Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
Dark theme. System font for UI, monospace for code/values. Minimal chrome.

State management pattern

Keep a single state object. Every control writes to it, every render reads from it.

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

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

Prompt output pattern

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(', ')}.`;
}

Common mistakes to avoid

Prompt output is just a value dump → write it as a natural instruction
Too many controls at once → group by concern, hide advanced in a collapsible section
Preview doesn't update instantly → every control change must trigger immediate re-render
No defaults or presets → starts empty or broken on load
External dependencies → if CDN is down, playground is dead
Prompt lacks context → include enough that it's actionable without the playground

原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。