annotate

Annotate Command

Add visual annotations to the current browser page and capture an annotated screenshot.

Arguments

Parse the following from $ARGUMENTS:

• --element <selector> (required): CSS selector or description of the element to annotate
• --type <type> (optional): Annotation type - box, highlight, or callout (default: box)
• --color <color> (optional): Color - red, orange, green, blue (default: red)
• --style <style> (optional): Border style - solid or dashed (default: solid)
• --label <text> (optional): Label text to display above the annotation
• --number <n> (optional): Callout number (for callout type)
• --filename <name> (optional): Screenshot filename (default: annotated-{timestamp}.png)

Prerequisites

This command requires:

1. Claude running with --chrome flag
2. A page already loaded in the browser

If no page is loaded, inform the user:

No page is currently loaded. Navigate to a URL first with:
  browser_navigate to https://example.com

Annotation Flow

Step 1: Find Target Element

Use browser_snapshot to get the current page accessibility tree. Find the element matching the user's description or selector.

If using a CSS selector:

• Try to match directly
• If not found, suggest alternatives

If using a description (e.g., "submit button"):

• Search the snapshot for matching elements
• Look for buttons, links, or inputs with matching text/labels

Step 2: Get Element Position

Use browser_evaluate to get the element's bounding box:

Get the bounding rectangle of the element matching: [selector]
Return: { x, y, width, height } in page coordinates

Step 3: Create Annotation Overlay

Use browser_evaluate to create the annotation container:

• Create a div with id "uta-overlay"
• Position it absolutely over the page
• Set pointer-events to none
• Set z-index to 99999

Step 4: Add Annotation

Based on the --type argument:

Box (default):

• Create a div with colored border
• Position at element coordinates
• Add label if provided
• Use dashed border if --style dashed