Dev Inspector

dev-inspector

A Claude Code skill that bridges a running dev app to Claude Code. Click an element in your browser; the selection (source file + line, component name, CSS selector, DOM snippet, screenshot) is auto-attached to your next prompt.

Install

Using [vercel-labs/skills](https://github.com/vercel-labs/skills):

npx skills add trmquang93/dev-inspector

Or install globally for Claude Code:

npx skills add trmquang93/dev-inspector -g -y -a claude-code

Usage

Run `/dev-inspector` in Claude Code — the agent handles per-project configuration, starts the bridge daemon, and opens the install page on first run. Then press **Ctrl+Shift+C** in your dev app, click an element, and switch back to Claude Code — the selection is auto-injected into your next prompt.

How it works

Browser (dev app)          standalone bridge daemon       Claude Code
  overlay.js  --POST-->   localhost: HTTP+WS       agent
                           writes latest.json
                                │
                                ▼
                    UserPromptSubmit hook reads+clears
                    latest.json -> prepends to prompt

See [SKILL.md](./SKILL.md) for full details.

Requirements

• Node.js 18+
• A dev build that emits React fiber _debugSource (Vite + @vitejs/plugin-react does this by default).

License

MIT