Installation

Installation

Requirements: Node.js 18+ (scripts use built-in fetch, AbortSignal.timeout, node:test; no npm dependencies). Scenario screenshots additionally need Microsoft Edge or Google Chrome.

Install the skills

skills.sh (Cursor, Codex, Claude Code and other Agent Skills clients):

npx skills add https://github.com/Lisuiwen/ai-html-annotation --skill html-prototype-build
# pack authors also:
npx skills add https://github.com/Lisuiwen/ai-html-annotation --skill ui-pack-maintain

The CLI prints the skill directory; this wiki calls it <skill-root>.

Claude Code plugin marketplace (marketplace.json: marketplace lisuiwen-agent-skills, plugin ai-html-annotation, skills html-prototype-build + ui-pack-maintain):

/plugin marketplace add Lisuiwen/ai-html-annotation
/plugin install ai-html-annotation@lisuiwen-agent-skills

Install a UI pack

Packs are not bundled in the skill. List and install:

node <skill-root>/scripts/install-pack.mjs --list-remote
node <skill-root>/scripts/install-pack.mjs --pack=admin-desktop   # or mobile-vant

Default target: ~/.html-prototype/packs/<id>/. Use --dest=project for <cwd>/.html-prototype/packs/. See UI Packs and CLI Reference.

Optional: Inspector IDE

Copy <skill-root>/.env.example to .env and set CODE_EDITOR. See Configuration.