Creates interactive HTML playgrounds - self-contained single-file explorers with controls, live preview, and prompt output. Use when user asks for a playground, explorer, or interactive tool.
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.
When the user asks for an interactive playground, explorer, or visual tool - especially when the input space is large, visual, or structural.
| Template | Use Case |
|---|---|
| Design Playground | Visual design (components, layouts, spacing, color, typography) |
| Data Explorer | Data/query building (SQL, APIs, pipelines, regex) |
| Concept Map | Learning/exploration (knowledge gaps, scope mapping) |
| Document Critique | Document review (approve/reject/comment workflow) |
| Diff Review | Code review (git diffs with line-by-line commenting) |
| Code Map |
| Architecture (component relationships, data flow) |
const state = { /* all configurable values */ };
const DEFAULTS = { ...state };
function updateAll() {
renderPreview();
updatePrompt();
}
function updatePrompt() {
const parts = [];
// Only mention non-default values
if (state.borderRadius !== DEFAULTS.borderRadius) {
parts.push(`border-radius of ${state.borderRadius}px`);
}
// Use qualitative language alongside numbers
if (state.shadowBlur > 16) parts.push('a pronounced shadow');
else if (state.shadowBlur > 0) parts.push('a subtle shadow');
prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}
Run open <filename>.html to launch in user's default browser.