Nguyenvanduocit Claude Annotator Plugin
nguyenvanduocit-claude-annotator-plugin is a Claude Code plugin for the Build phase that connects InstantCode Annotator so you can select UI elements visually and collaborate with the agent on targeted fixes.
by nguyenvanduocit · github.com/nguyenvanduocit/claude-annotator-plugin
Point Claude at exact UI elements in a running app so feedback and fixes target the right DOM nodes instead of vague descriptions.
Add it to Claude Code
Install the plugin in Claude Code. One command, paste-ready.
/plugin install nguyenvanduocit-claude-annotator-plugin@nguyenvanduocit/claude-annotator-pluginBuilt to be called by your agent
Skillselion is itself an MCP server. Your agent can pull this entry and a paste-ready install config straight from the API - no copy-paste.
Retrieve this entry with skillselion.get_details("plugin:nguyenvanduocit/claude-annotator-plugin") and the paste-ready config with skillselion.get_install_config("plugin:nguyenvanduocit/claude-annotator-plugin").
What it does
nguyenvanduocit-claude-annotator-plugin is a Claude Code plugin that wires InstantCode Annotator into your agent workflow so you can collaborate on the product visually instead of only through chat. Solo builders shipping web UIs often waste cycles when they say fix the header or change that card—without a shared reference, the model guesses wrong selectors or files. This plugin enables you to select elements in the running interface and feed that context into Claude Code, which is especially helpful during frontend builds, design tweaks, and review passes before ship. It is not a full design system or component library; it is the handoff layer between what you see in the browser and what the agent changes in the repo. Install it when you already use Claude Code for implementation and want tighter feedback loops on layout, spacing, copy placement, and interactive states without becoming a Figma-only workflow.
Highlights
- Bridges Claude Code with InstantCode Annotator for in-browser visual element selection
- Turns vague UI feedback into concrete, element-scoped instructions for the agent
- Supports AI-human collaboration loops without exporting screenshots manually
- Claude Code plugin bundle with a single focused integration (plugin count: 1)
- Pairs human visual judgment with agent edits on the same codebase
Why builders use it
Describing which part of the UI to change in plain language leads to wrong files, wrong components, and frustrating back-and-forth with your coding agent.
After you register the plugin, you can anchor agent tasks to specific annotated elements so edits land on the intended screen region faster.
At a glance
- Type - Plugin in Frontend & UI.
- Adoption - 0 installs, 0 stars, 0 votes.
FAQ
Who is nguyenvanduocit-claude-annotator-plugin for?
It is for solo and small-team builders who use Claude Code on frontend work and want to point the agent at exact UI elements using InstantCode Annotator.
When should I use nguyenvanduocit-claude-annotator-plugin?
Use it during UI implementation, polish, and review when verbal descriptions of layout or components are slowing you down or causing wrong edits.
How do I add nguyenvanduocit-claude-annotator-plugin to my agent?
Add the plugin from the nguyenvanduocit/claude-annotator-plugin repository in Claude Code’s plugin or marketplace flow, then use it alongside InstantCode Annotator in your browser workflow.
Comments
Share how you use nguyenvanduocit-claude-annotator-plugin, gotchas, or tips for other indie builders.
No comments yet - be the first to share how you use it.