Agent skill · design visual · anthropics
playground
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.
Why this skill is useful
Provides a structured template for creating interactive HTML playgrounds that the AI wouldn't generate reliably on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 33,212 stars on the source repository.
What this skill does
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) 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. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills anthropics/playground