html-prototype-buildlisted

Build, annotate, review, screenshot, and deliver native HTML UI prototypes with AI agents using reusable UI packs, DOM-bound product annotations, in-browser Direct Edit, browser review pins, a local authoring server, an element-to-source Inspector, and multi-state screenshots. Use when the user mentions /html-prototype-build or asks to reconstruct UI in HTML, create product annotations, edit prototype styles, review or mark DOM elements, capture prototype states, or package prototype deliverables. Works with Claude Code, Codex, Cursor, and other Agent Skills clients; do not use for generic source-code navigation, ordinary documentation, or production frontend development.
Lisuiwen/ai-html-annotation · ★ 18 · Web & Frontend · score 79

Install: claude install-skill Lisuiwen/ai-html-annotation

# HTML Prototype Build ## Quick start 1. Confirm the prototype type and business facts from the user's materials; ask first when information is insufficient, do not guess. 2. When generating or heavily changing UI, run `node <skill-root>/scripts/resolve-pack.mjs --list`, then `node <skill-root>/scripts/resolve-pack.mjs --pack=<pack-id> --select=<preset, pattern, or component id>` and read only the minimal file closure it outputs. 3. Generate the complete `<prototype-name>/` delivery directory per [shared generation contract §7](references/generation-contract.md#7-delivery-files); route all business state through `PrototypeViewers`, and use the Runtime copy as-is for the formal Client Runtime. 4. When done, run `npm test` at the repository root; start the authoring server or scenario screenshots only when the task needs them. ## Route the task first Read only the entry that matches the current task; do not read all references at once: | User goal | Required entry | Main output or tool | |---|---|---| | Generate, rebuild, or heavily change UI | [UI generation](references/ui-generation.md) | HTML prototype and on-demand UI components | | Install or download missing UI packs | [Pack install](references/pack-install.md) | `scripts/install-pack.mjs` | | Understand Viewer, note cards, SVG connectors, or interaction lightning | [Product annotations](references/product-annotations.md) | snapshot + Client Runtime | | Start the authoring environment, direct edit, edit notes, or jum