What does annotate-ask do?

It lets you mark UI elements on a page and ask questions about them; the agent answers based on the red-marked areas.

Use the /annotate command via the Skill tool to inject the annotation overlay, then draw your markings.

What if I’m unsure which element I circled?

Provide multiple marks or add a brief note; the agent will explain based on the highlighted areas and may ask for clarification if needed.

annotate-ask

Scanned

npx machina-cli add skill BarclayII/browser-annotator-skills/annotate-ask --openclaw

Files (1)

SKILL.md

1.7 KB

Browser Annotation with Question (Chrome Version)

This skill helps users annotate the current browser page (using Claude in Chrome) and answer questions about what they annotated.

User's question: $ARGUMENTS

Step 1: Capture Annotated Screenshot

Use the Skill tool to run the /annotate command. This will:

Inject an annotation overlay on the current browser page
Let the user draw/highlight areas of interest
Capture a screenshot with the annotations
Bring the screenshot into Claude Code's context

Step 2: Answer the User's Question

After the /annotate command completes, examine the annotated screenshot now in context. Look at the red annotations the user drew to understand which parts of the page they're referring to.

Based on what you see in the annotated screenshot, answer the user's question: $ARGUMENTS

Focus your answer on:

The areas the user highlighted/circled with red annotations
What those elements are (buttons, text, images, etc.)
Any specific details relevant to their question

Provide a clear, helpful response based on the visual annotations.

Source

git clone https://github.com/BarclayII/browser-annotator-skills/blob/master/skills/annotate-ask/SKILL.mdView on GitHub

Overview

Annotate-ask enables you to mark specific UI elements on a webpage and ask questions about them. It overlays an annotation tool on the page, captures a screenshot with your marks, and uses those visuals to identify elements and explain their purpose or behavior.

How This Skill Works

Trigger the /annotate command to inject an annotation overlay on the current page. Draw red circles or highlights to indicate the target elements, then capture a screenshot with the annotations. The agent analyzes the marked areas and answers the user's question based on what the highlighted elements are (buttons, sections, etc.) and their context.

When to Use It

When the user asks about a specific visual UI element (e.g., 'What is this button?') and the agent can't infer which part of the page is meant.
When the user wants to identify or discuss a particular page component without relying on text descriptions.
When the agent lacks information to determine the exact element the user refers to.
When the user wants to highlight or mark elements to ensure precise interpretation.
When discussing multiple components on a page and the user wants clear, visual references.

Quick Start

Step 1: Use the Skill tool to run the /annotate command on the current page.
Step 2: Draw red annotations around the element(s) you’re asking about.
Step 3: Review the agent’s answer based on the annotated screenshot.

Best Practices

Use clear red annotations to circle or highlight the target element.
Keep annotations focused on the single element or region in question.
Ensure high contrast between marks and the page for legibility.
Verify the annotated area corresponds to the user's question before answering.
If the marks are ambiguous, ask a concise clarifying question.

Example Use Cases

User circles a button and asks what it does.
User highlights a section header and asks about its purpose.
User marks a color swatch and asks if that color applies site-wide.
User flags a navigation item to inquire about its role.
User annotates a form field and asks about validation behavior.

Frequently Asked Questions

Add this skill to your agents