playground_skill

Overview

This skill creates self-contained interactive HTML playgrounds that pair configurable controls with a live preview and a copyable prompt output. It produces a single-file explorer that runs in any browser with no external dependencies and sensible defaults for immediate use. Use it to let users visually explore options and then copy a natural-language prompt reflecting their non-default choices.

How this skill works

The builder selects a template that matches the requested playground type (design, data, concept map, document critique, diff review, or code map) and produces a single HTML file with inline CSS and JS. It wires controls to a single state object so every change triggers an immediate preview re-render and prompt regeneration. The prompt summarizes only non-default choices in natural language and includes a copy button with brief feedback.

When to use it

• User requests an interactive playground, explorer, or visual configurator
• The input space is large, visual, or structural (design systems, data queries, code architecture)
• You want a single-file shareable demo with zero external deps
• You need users to tweak options and then export a clear natural-language prompt
• Rapid prototyping or teaching where instant visual feedback helps understanding

Best practices

• Keep the playground as one HTML file with inline CSS/JS and no CDN dependencies
• Use a single state object; every control writes to it and every render reads from it
• Provide sensible defaults and 3–5 named presets that reset all controls to coherent configurations
• Prompt output should be a natural-language instruction mentioning only non-default values
• Update preview instantly on every control change; avoid an explicit "Apply" button
• Group controls and hide advanced options in a collapsible section to avoid overwhelming users

Example use cases

• Design playground: tweak component spacing, color, and typography and copy a prompt describing the chosen design decisions
• Data explorer: build and preview a query UI, see results mockup, and copy the query prompt
• Concept map: interactively expand topics and export a prompt summarizing gaps and suggested next topics
• Document critique: adjust review scope and severity, preview annotated feedback, and copy the instruction for automated review
• Diff review: load a commit/patch, annotate line comments, and export reviewer instructions