HTML Interactive Playground

Some values are easier to find by feel than by reasoning — animation timings, easing curves, color combinations, threshold values, layout dimensions. A playground turns the parameter space into a UI: sliders for continuous values, dropdowns for discrete ones, live preview, and a Submit button.

This is the two-way interaction pattern: the user explores in the browser, then submits what worked back to the agent to apply for real.

Pre-flight — run BEFORE writing the artifact

Invoke html-skills:html-skills-listen (Skill tool) first; it is idempotent. If it returns a URL, inject it verbatim as window.__CLAUDE_SUBMIT_URL__ in the HTML you are about to write, ?t= query string included (a local, single-session loopback handshake — not a credential). If it reported web/sandbox mode, leave that line out; submitToClaude then falls back to clipboard mode.

When to use this skill

• "Help me tune X" / "Find the right value for Y"
• "Try different settings for Z and let me pick"
• "I'm not sure what value should be / what feels right"
• "Build a playground for X"
• Any time the user is in "I'll know it when I see it" territory