playgroundlisted

# 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