The /playground skill

The loop

The playground exists to bridge the gap between visual exploration and Claude instructions. The loop is:

The key insight: the hardest part of complex requests is articulating what you want. The playground handles that articulation for you — you explore visually and it writes the prompt.

The 6 templates

Playground picks the closest template automatically based on your request. Each template defines the layout, control types, preview rendering approach, and prompt output format.

Core requirements

Every playground produced by this skill satisfies all of these, regardless of template:

• ①
  Single HTML file. Inline all CSS and JS. No external CDN dependencies. If the CDN goes down, your playground should still work.
• ②
  Live preview. Updates instantly on every control change — keypress, slider drag, toggle flip. No "Apply" button. The gap between action and feedback must be zero.
• ③
  Natural-language prompt output. Not a JSON value dump. Only mentions choices that differ from defaults. Uses qualitative language alongside numbers. Includes enough context to act on without seeing the playground.
• ④
  Copy button with "Copied!" feedback. One click to clipboard. Brief flash confirmation so the user knows it worked.
• ⑤
  Sensible defaults + 3–5 named presets. Looks good on first load. Presets snap all controls to a cohesive combination (e.g., "Minimal", "Elevated", "Compact").
• ⑥
  Dark theme, system fonts. System font for UI chrome, monospace for code and values. Minimal chrome that doesn't compete with the preview.

The prompt output pattern

This is the most important part to get right. The prompt output is not a value dump. It's a natural instruction a developer could act on.

{ borderRadius: 12, padding: 24, shadow: true,
  shadowY: 4, shadowBlur: 12, shadowOpacity: 0.1,
  font: "Inter", hover: true, hoverTranslate: -1,
  color: "#141413", bg: "#ffffff" }

// Keep a DEFAULTS object — only emit lines that differ
const DEFAULTS = { borderRadius: 4, padding: 16,
                    shadowBlur: 0, font: 'system-ui' };

function updatePrompt() {
  const parts = [];

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

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

  if (state.font !== DEFAULTS.font)
    parts.push(`the ${state.font} font family`);

  // Write as direction, not spec sheet
  prompt.textContent = parts.length
    ? `Update the card to use ${parts.join(', ')}.`
    : '(using all defaults — adjust controls to build a prompt)';
}

State management pattern

Every playground uses a single state object. Every control writes to it. Every render reads from it. No scattered variables.

// Single source of truth
const state = {
  borderRadius: 4,
  padding: 16,
  shadowBlur: 0,
  font: 'system-ui',
  preset: 'default'
};

// One function that does both — called after every control change
function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}

// Every control calls updateAll() on change
slider.addEventListener('input', () => {
  state.borderRadius = +slider.value;
  updateAll();
});

// Presets snap all controls at once
const PRESETS = {
  minimal:  { borderRadius: 2,  padding: 12, shadowBlur: 0  },
  elevated: { borderRadius: 12, padding: 24, shadowBlur: 12 },
  compact:  { borderRadius: 4,  padding: 8,  shadowBlur: 4  },
};

function applyPreset(name) {
  Object.assign(state, PRESETS[name]);
  syncControlsToState(); // update slider/toggle DOM to match
  updateAll();
}

How to trigger /playground

Just describe what you want to explore. Claude picks the template, builds all controls, wires up live preview and prompt output, then opens the file in your browser.

Common mistakes to avoid