Playground

Generates interactive HTML playgrounds — self-contained single-file explorers with visual controls, a live preview panel, and a natural-language prompt output with a one-click copy button. Every playground is a single HTML file with all CSS and JavaScript inline, requiring no external dependencies.

Choose from six built-in templates: Design Playground for exploring visual components like buttons, cards, and typography; Data Explorer for constructing SQL queries, API calls, and regex patterns; Concept Map for knowledge mapping and educational tools; Document Critique for review workflows with approve/reject actions; Diff Review for line-by-line code review; and Code Map for visualizing codebase relationships and data flow.

Each playground ships with a dark theme, sensible defaults, 3–5 named presets, and instant live preview updates as you adjust controls. The generated prompt output uses qualitative, human-readable language rather than raw value dumps, making it ready to paste directly into Claude or other tools.

How to use: Invoke the skill with /playground followed by what you want to explore. Try prompts like: "create a playground for button design styles", "build a SQL query explorer for my users table", "make an interactive concept map for machine learning fundamentals", or "create a diff review tool for my PR changes".