playground
Creates a self-contained HTML playground: controls, a live preview and a prompt the user can copy.
- Kind
- Skill
- Works with
- Claude Code
- Source
- anthropics/claude-plugins-official @ 58267944f921
- Path
- plugins/playground/skills/playground/SKILL.md
- License
- Apache-2.0
- Jobs
- UI/UX work
InstallInstall it from a plugin marketplace.
/plugin install playground@claude-plugins-official
# 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 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) …