Click to context

Workflow

Anthra Selector is designed for the moment where a UI element is obvious on screen but expensive to describe precisely in a prompt.

What gets copied

Selected visible text

DOM tag, path, id, and class

role and aria-label

React owner/component hints

Useful props

Source location when _debugSource is available

Action hints for the coding agent

Selection status from the page overlay

Prompt pattern

Paste the selected element context first, then give a concrete instruction. For example: “Here is the selected element context. Fix the spacing bug in this CTA and keep the existing design system.”

Selected element context
Text: "Start free trial"
DOM: button#hero-cta.primary.cta
Role: button
React owner: HeroActions
Props: { variant: "primary", size: "large" }
Source: src/components/hero-actions.tsx:42:7
Action hint: user selected the main hero CTA

React metadata limits

Source file and owner details depend on what the inspected React build exposes. Development builds often reveal more than production builds. When source data is unavailable, Anthra Selector still copies DOM and accessibility context.