Claude Code

Set up Domscribe with Claude Code using the plugin marketplace.

Install

claude plugin marketplace add patchorbit/domscribe
claude plugin install domscribe@domscribe

The first command registers the Domscribe plugin from the marketplace. The second command installs it into your current project.

What Gets Installed

The plugin installs two things:

1. MCP server configuration -- registers @domscribe/mcp as a stdio-based MCP server so Claude Code can communicate with the Domscribe relay.
2. Skill file -- a set of instructions that teaches Claude Code how to use Domscribe's 12 tools effectively. This includes guidance on when to query runtime state, how to claim and process annotations, and how to interpret DOM snapshots and component context.

Usage

Once installed, Claude Code automatically has access to all Domscribe tools. Make sure your dev server is running with the Domscribe bundler plugin configured, then prompt Claude Code to use Domscribe:

• "Use domscribe to check what props the Header component has right now."
• "Fix the button color -- use domscribe to check what CSS classes it has before changing anything."

Claude Code will call the appropriate MCP tools (domscribe.query.bySource, domscribe.resolve, etc.) and use the live runtime context to make accurate edits.

Next Steps

• Add Domscribe to your app -- configure the bundler plugin for your framework
• Code to UI -- let Claude Code see your running browser
• UI to Code -- click elements and describe changes in plain English