---
id: sm-playground
name: "playground"
url: https://skills.yangsir.net/skill/sm-playground
author: anthropics
domain: ai-dev-tools-workflow
tags: ["product-prototyping", "experimentation", "user-testing", "feature-development", "sandbox-environment"]
install_count: 7900
rating: 4.50 (20 reviews)
github: https://github.com/anthropics/claude-plugins-official
---

# playground

> 构建交互式HTML文件，提供实时预览、可控组件和提示输出，便于代码实验和展示。

**Stats**: 7,900 installs · 4.5/5 (20 reviews)

## Before / After 对比

### 交互式HTML：代码实验与实时预览

## Readme

# 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.

## 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

Weekly Installs1.2KRepository[anthropics/clau…official](https://github.com/anthropics/claude-plugins-official)GitHub Stars12.5KFirst SeenJan 30, 2026Security Audits[Gen Agent Trust HubFail](/anthropics/claude-plugins-official/playground/security/agent-trust-hub)[SocketPass](/anthropics/claude-plugins-official/playground/security/socket)[SnykPass](/anthropics/claude-plugins-official/playground/security/snyk)Installed onclaude-code1.1Kopencode899codex886gemini-cli848github-copilot802cursor757

---
*Source: https://skills.yangsir.net/skill/sm-playground*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-playground/markdown*