What problem does it solve? Screenshots and snapshots cannot tell an agent exactly which element a human means. This Skill converges a dev-only DOM picker into every web frontend in a project, so a human can click an element in the browser and the agent reads a precise descriptor of what was selected. ## Core Features & Use Cases - Idempotent converge: Discovers every web frontend (Vite, webpack, Next, Svelte, or plain HTML), implements the picker where missing, repairs diverged implementations, and no-ops where compliant. - Contract enforcement: Guarantees the window.__domPicker globals, the data-claude-selected stamp, the window.__claudeSelected descriptor (tag, id, classes, attributes, bounding rect, unique CSS selector, computed styles), and dev-only gating behind the bundler's dev flag. - Agent usage note: Writes a short .claude/rules/dom-picker.md note telling future agent sessions how to start the picker and read the selection. - Use Case: A developer says "look at this button" during a debugging session; the agent starts the picker, the developer clicks the button, and the agent reads the exact element descriptor instead of guessing from a screenshot. ## Quick Start Run the /setup-dom-picker slash command to converge the dev-only DOM picker into every web frontend in this project.
