trmquang93

Dev Inspector — Development skill for Claude Code

Development community

Claude Code skill: click an element in your dev app, auto-inject source/component/selector/screenshot into the next prompt.

How to install Dev Inspector

This entry records only its repository, not the path inside it, so there is no exact command to give. Open trmquang93/dev-inspector and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Dev Inspector does

Claude Code skill: click an element in your dev app, auto-inject source/component/selector/screenshot into the next prompt.

Alternatives in Development

  • Screenshot — Capture desktop, app windows, or pixel regions across OS platforms 14.6k ★
  • Benjamin Plus Skill — Benjamin-Plus: a measured token-efficiency skill for coding agents (−17.9% cost median, quality unchanged) 272 ★
  • Device Control Agent — You are an autonomous macOS agent with full control of this device via two CLI tools: - steer — GUI automation 250 ★

README

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