Quick Start

Quick Start

1. Open an example read-only. In a clone, open examples/minimal-notes-system/prototype.html directly (file://). You get the page plus the Viewer rail: annotation cards, scenario buttons, SVG connectors. Editing is not available under file://.
2. Start the author server:

   node <skill-root>/runtime/server/index.mjs examples/minimal-notes-system/prototype.html --snapshot=prototype/notes.snapshot.js

   Open the printed http://127.0.0.1:4178/prototype.html.
3. Review with Mark. Author Tools → Mark (or press M), Ctrl/⌘+click an element, then Copy all → For AI to copy selectors and element HTML.
4. Switch a scenario with the rail buttons or ?scene=<id>.
5. Optional screenshots:

   node <skill-root>/runtime/cli/screenshot.mjs examples/minimal-notes-system/prototype.html

6. Stop the server with the red Stop button on the page.

The phone-width sample is examples/mobile-work-order (pack mobile-vant).

Generating your own prototype (agent flow)

From SKILL.md:

1. Confirm prototype type and business facts from user materials; ask rather than guess.
2. node <skill-root>/scripts/resolve-pack.mjs --list, then --pack=<id> --select=<preset|pattern|component ids>; read only the returned file closure.
3. Generate the <prototype-name>/ directory (Prototype Delivery Structure), routing all business state through PrototypeViewers.
4. Run npm test in the skill repo; start the author server or screenshots only when needed.