Skip to content

QUICK_START.md

Latest commit

 

History

History
58 lines (41 loc) · 2.47 KB

QUICK_START.md

File metadata and controls

58 lines (41 loc) · 2.47 KB
Raw

Quick Start

AnthraCode_Selector helps developers select a React UI element and copy clean, AI-ready context for AnthraCode or another coding agent.

How It Works

  1. You activate the selector from Chrome.
  2. AnthraCode_Selector injects a local inspection bridge into the current page.
  3. You click the exact UI element you want to explain.
  4. The extension reads local React and DOM context from that element.
  5. A concise context block is copied to your clipboard.
  6. You paste that context into AnthraCode or another coding agent.

Nothing is sent to a remote server by the extension.

Install Locally In Chrome

  1. Open chrome://extensions.
  2. Enable Developer mode.
  3. Click Load unpacked.
  4. Select the AnthraCode_Selector folder that contains manifest.json.
  5. Pin AnthraCode_Selector from the Chrome extensions menu if you want quick access.

If you are installing from dist/AnthraCode_Selector-1.1.0.zip, extract the ZIP first, then use Load unpacked on the extracted folder.

Use The Extension

  1. Open a React app in Chrome.
  2. Press Alt+S, or open Chrome DevTools and select the AnthraCode_Selector panel.
  3. Hover the page until the target element is highlighted.
  4. Click the exact UI element you want your agent to understand.
  5. Paste the copied context into AnthraCode or another coding agent.
  6. Press Esc before clicking if you want to cancel selection.

You can change the selector highlight color from the DevTools panel Color menu. Available colors are Green, Red, Yellow, White, and Black.

What Gets Copied

The copied context can include:

  • visible text;
  • DOM tag, path, id, and classes;
  • accessibility details such as role and aria-label;
  • React owner/component hints when available;
  • source location when React exposes debug metadata;
  • useful props, hooks, and state summaries when available.

Example Agent Prompt

Here is the selected element context. Fix the spacing bug in this CTA and keep the existing design system.

Troubleshooting

  • If Alt+S does not start selection, reload the inspected page once after installing or reloading the extension. If it still fails, another shortcut may be using it. Open Chrome extension shortcuts and reassign the AnthraCode_Selector command.
  • If React owner or source location is missing, the page's production build may not expose that metadata. The extension still copies DOM, text, role, and path context.
  • If clipboard copy fails, start selection again and click an element directly.