ai-html-annotation plugin
Annotate and review real HTML DOM, export AI-ready feedback context, inspect elements, and capture reproducible prototype states.
How to install the ai-html-annotation plugin
Run both commands inside Claude Code. The first adds the marketplace once; the second installs the plugin.
/plugin marketplace add Lisuiwen/ai-html-annotation
/plugin install ai-html-annotation@lisuiwen-agent-skillsWhat's inside ai-html-annotation
2 parts read from the plugin's own files.
Skills 2
Claude loads it when the task matches- html-prototype-build
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, package prototype deliverables, or add components to the module sketch board. 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.
- ui-pack-maintain
Creates, extends, repairs, validates, versions, and publishes reusable UI Packs. Use when adding or changing UI Pack Foundations, Components, Patterns, Presets, design tokens, state adapters, manifests, or registry metadata, or when extracting a reusable visual system from screenshots, existing pages, or computed styles. Creating a Pack relies only on the self-contained contract plus user intent; maintenance may additionally read existing Packs. Do not use for generating business prototypes, editing production frontend code, installing packs for end users, or ordinary page styling.
Using ai-html-annotation in Claude Code
Skills need no command. Claude reads them when your request matches what they describe.
Update, turn off or remove
- Update the plugin (shell)
- claude plugin update ai-html-annotation@lisuiwen-agent-skills
- Refresh the marketplace
- /plugin marketplace update lisuiwen-agent-skills
- Turn it off for now
- /plugin disable ai-html-annotation@lisuiwen-agent-skills
- Remove it
- /plugin uninstall ai-html-annotation@lisuiwen-agent-skills
Skills in ai-html-annotation
- html-prototype-buildLisuiwen/ai-html-annotation
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, package prototype deliverables, or add components to the module sketch board. 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.
61 files29stars - ui-pack-maintainLisuiwen/ai-html-annotation
Creates, extends, repairs, validates, versions, and publishes reusable UI Packs. Use when adding or changing UI Pack Foundations, Components, Patterns, Presets, design tokens, state adapters, manifests, or registry metadata, or when extracting a reusable visual system from screenshots, existing pages, or computed styles. Creating a Pack relies only on the self-contained contract plus user intent; maintenance may additionally read existing Packs. Do not use for generating business prototypes, editing production frontend code, installing packs for end users, or ordinary page styling.
16 files29stars
ai-html-annotation plugin questions
How do I install the ai-html-annotation plugin?
In Claude Code run /plugin marketplace add Lisuiwen/ai-html-annotation, then /plugin install ai-html-annotation@lisuiwen-agent-skills.
What does the ai-html-annotation plugin include?
ai-html-annotation bundles 2 skills.
How do I update or remove the ai-html-annotation plugin?
Update it with claude plugin update ai-html-annotation@lisuiwen-agent-skills in your shell, or from the Installed tab of /plugin. Remove it with /plugin uninstall ai-html-annotation@lisuiwen-agent-skills.