Point at your app. Get a prompt your coding agent can act on.
AAT is a tiny floating tool for admins. Pin a note on any element, or circle things with a red pen. Each note becomes a ready prompt with the exact elements, selectors, React components, styles and a marked screenshot.
24 seconds, no sound. A sample pricing page with AAT open.
Three steps. No screenshots to mark up by hand.
Pin or draw.
Click any element to pin a note, or draw over an area with the red pen. A closed loop takes everything inside it.
Write what should change.
Type your comment and press Enter.
Paste into your agent.
The prompt is already on your clipboard, with a screenshot of the spot and your mark drawn in red.
Annotate a dashboard, right here.
The full widget on a demo admin dashboard: tray, pin, pen, comment box, pins that stay, the notes panel and a real marked screenshot.
Open the tray on the dashboard's right edge. Pick the pin and click anything, or pick the pen and circle a few things. Write what should change and press Enter. The prompt, and the screenshot with your mark, appear here.
With the tray closed you can play with the page. This playground is a plain JavaScript port of the widget; inside a Next.js app in development, AAT also lists the React components. Notes stay in this browser.
What the prompt looks like.
Plain text with the facts an agent needs to find the element in your codebase.
[AAT note 1] Change request for my app
I pinned one element on the page and wrote a comment about it.
My comment: Make this button bigger and use our brand color
Page: http://localhost:3000/pricing ("Pricing")
Viewport: 1440x900
Screenshot of the marked spot, with my mark drawn in red: .data/aat/aat-m2x9k1-4f2a.png
Element: <button> "Start free trial"
Selector: main > section:nth-of-type(2) > div > button
React components (innermost first): Button < PricingCard < PricingPage
Attributes: type="button"
Classes: rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white
Size: 148x36px at x 812, y 640 (page)
Current style: font: Inter 14px, weight 500, line-height 20px; color: #ffffff; background: #18181b; padding: 8px 16px; radius: 8px
Find these elements in the codebase (search for the visible text, the React component names and the classes), make the change my comment asks for, and keep everything else exactly as it is. If the comment is unclear, ask me before changing anything.
No more "the button on the right, no, the other one".
Small tool, the right details.
Pin and pen.
Pin one element, or draw over many.
Agent-ready prompts.
Selectors, React components, classes and current styles, in plain text.
Marked screenshots.
Cropped around your mark, saved into your project on localhost.
Pins that stay put.
Notes reappear on their element after reload and follow it while scrolling.
Batch it.
Copy every note on a page, or all of them, as one prompt.
Safe by design.
Admin only, never downloaded by visitors, never changes your page, notes stay in your browser.
Add it in one sentence.
AAT ships as a Claude Code skill. Copy it into your skills folder and ask Claude Code to add it.
"Add AAT to this app"Prefer doing it by hand? Follow SKILL.md in the repo. Requires Next.js App Router, React and Tailwind CSS v4.