artifact-flow

OUTPUT CONTRACT

Produces ONE .html file. A clickable flow has many screens. ALL of them live in the same file, switched by JavaScript (clicks on hotspots, hash routing). NEVER one HTML per screen.

File extension is .html. File name typically <flow>-prototype.html.

A clickable, hotspot-driven prototype. The reader experiences a multi-screen user flow by clicking marked targets on each screen. Useful for walking stakeholders through a feature before it's built, or for capturing a UX path in a single shareable file.

Read artifact-css/SKILL.md first for the OUTPUT CONTRACT, the design tokens, and the class vocabulary. This skill uses vanilla JS only — no jQuery required.

When to reach for this skill

• User says "make me a clickable mockup of X", "wireframe the signup flow", "show me what the multi-step migration UI would look like".
• User wants a stakeholder to feel the flow without engineering it.
• User wants a single-file deliverable that captures an end-to-end UX path.