HTML Design & Prototypes

HTML is the fastest design surface available — instant feedback loop, real layout engine, real typography, real interaction. Use it to sketch designs even when the production target is React Native, Swift, or anything else. The translation from HTML+CSS to the final framework is mechanical; the design exploration is what's hard.

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

• "Design / mock / prototype a [component, screen, animation, transition]"
• "Help me visualize how X should look"
• "Try a few directions for the [hero, card, modal, button]"
• "Tune this animation / interaction"
• "Build a quick playground for the [tooltip, dropdown, picker]"
• Whenever the user is in the design-thinking phase, even if the final target is non-web