html-interactive-playground
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 copy-back button.
This is the two-way interaction pattern: the user explores in the browser, then copies what worked back to the agent to apply for real.
Pre-flight — run BEFORE writing the artifact
This skill produces an interactive artifact. Invoke the html-skills-listen skill from this plugin first (Skill tool: html-skills:html-skills-listen). It sets up a per-session local receiver and arms a Monitor so user submissions arrive as session notifications instead of as copy-paste round-trips. It's idempotent — invoke every time you fire this skill.
Capture the URL it returns. If it returned one, inject it as window.__CLAUDE_SUBMIT_URL__ in the HTML you're about to write. If it reported web/sandbox mode (no URL returned), generate the HTML without __CLAUDE_SUBMIT_URL__ set — submitToClaude will fall back to clipboard mode automatically.
Skipping this step costs the user a copy-paste round-trip on every submit. Invoking the skill is cheap and idempotent.