playground

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.

How to use this skill

1. Identify the playground type from the user's request
2. 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)
3. Follow the template to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
4. 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 — if a CDN is down, the playground is dead.
• 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 — never starts empty or broken. Include 3-5 named presets that snap all controls to a cohesive combination.
• Light theme. Default to a white/light background; offer a dark theme only as an opt-in toggle. System font for UI, monospace for code/values. Minimal chrome.
• Manage control count. Group controls by concern; hide advanced options in a collapsible section instead of showing everything at once.

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