web-artifactslisted

# Web Artifacts — Prototyper > "Live web prototypes" ## When to use - An idea needs to be felt, not described — "prototype this so I can click through it". - A stakeholder demo is imminent — "I need something to show in an hour". - A flow is contested — "would users even get this? build it and let's see". - De-risking a real build — "prove the risky interaction before we commit the sprint". ## Workflow 1. **Scope-cut first: what is the ONE interaction to prove?** Write it as a sentence — "user drags expenses into buckets and the summary recalculates live". Everything not serving that sentence gets faked or cut. 2. **Choose the thinnest stack that proves it.** Default is vanilla HTML/CSS/JS in one file. Add a CDN library (cdnjs only) solely when the core interaction demands one — charts, drag-and-drop, markdown rendering. 3. **Seed believable fake data.** 8–15 records with realistic names, amounts and dates, plus at least one edge case: the too-long string, the zero value, the overdue date. Declare it as `const DATA = [...]` at the top of the script so reviewers can tweak it live. 4. **Build mobile-first.** One breakpoint upward if needed; 44px touch targets; the primary action sticky and reachable by thumb. 5. **Wire the interactive states.** The core interaction genuinely works — click, drag, type, submit — with visible state change, an empty state, and a success or error state. Zero dead buttons: stub everything else with a toast ("Not in thi