Playground Builder

Build a self-contained interactive HTML explorer with controls, live preview, and a copyable natural-language prompt.

Workflow

1. Infer the product context, audience, decisions to explore, and required states. Existing design systems and explicit user requirements override this skill's visual defaults.
2. Read exactly one closest template and adapt it:
   • templates/design-playground.md
   • templates/data-explorer.md
   • templates/concept-map.md
   • templates/document-critique.md
   • templates/diff-review.md
   • templates/code-map.md
3. Write one HTML file with inline CSS and JavaScript and no external runtime dependencies.
4. Open it in a browser, interact with every control and preset, inspect representative viewport sizes, and verify live preview, prompt output, copy feedback, empty/error states, and keyboard usability. Fix rendered defects before completion.