What problem does it solve? Teams often commit to product structure and visual decisions only after expensive implementation. This Skill lets you settle screen structure, interactions, and visual choices using a finished-looking, disposable HTML prototype before any production code is written. ## Core Features & Use Cases - Full-surface prototyping: Builds one self-contained HTML file containing every product screen with realistic dummy data, working interactions, state presets, and viewport simulation, grounded in the project's existing design tokens. - Decision comparisons: Renders up to three alternatives for a single contested visual or interaction decision in a temporary comparison file, then integrates the chosen option back into the canonical prototype. - Spec handoff: Once all screens are approved, records settled behavior, assumptions, deferrals, and risks in docs/specs/<slug>/spec.md and saves the approved prototype alongside it. - Use Case: Before building a mobile notification center for an existing dashboard app, generate a clickable prototype in the app's own design language, compare two layout options for the alert list, and hand off an approved spec to implementation. ## Quick Start Ask the agent to build a prototype of the screens you want to review, for example: build a prototype of the home, saved, and settings screens so I can review them before implementation.
