Dev Inspector — Development skill for Claude Code
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-reactdoes this by default).
License
MIT
Related Skills
Pinpoint
Click an element on your local dev site, write what should change, and your coding agent gets it — selector, c
IDE Byebye
Dev plugin: ⌘-click a rendered element, say what to change, and open Codex / Claude / Cursor / Grok with file:
Zengrab
Click any component in your OpenTUI app to copy its context to the clipboard for Cursor, Claude, Copilot, and
Uitalk
Edit a running web app from inside the page: pick elements, screenshot, preview changes, approve one, and it l
Reactbits.Dev Skill
Claude Code skill for React Bits (reactbits.dev) — fetches real component source from the live registry instea
React Build
Fix React build failures in a Turborepo monorepo using Next.js (App Router) — incremental fixes for TypeScript
Related Agents
UI Explorer
Drive and explore a native macOS app's GUI (screenshot → click/type → observe) and correlate each action with
Docs Dev
Owns the dbdocs package — the click CLI plus the extract/site pipeline that turns dbt artifacts into a single-
Facet Coder
Generates ONE facet Cypress spec (properties propertiesFx styles stylesFx events csa inspector variants) for a