annotate-ask-playwright
npx machina-cli add skill BarclayII/browser-annotator-skills/annotate-ask-playwright --openclawBrowser Annotation with Question (Playwright Version)
This skill helps users annotate the current browser page (using Playwright) and answer questions about what they annotated.
User's question: $ARGUMENTS
Step 1: Capture Annotated Screenshot
Use the Skill tool to run the /annotate-playwright 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
- Save the screenshot to the annotations directory
- Bring the screenshot into Claude Code's context
Step 2: Answer the User's Question
After the /annotate-playwright 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-playwright/SKILL.mdView on GitHub Overview
This skill lets you annotate the current browser page with a red overlay to mark specific UI elements, then asks questions based on those annotations. It captures a screenshot with the marks, saves it to the annotations directory, and brings it into Claude Code's context for precise, visual answers.
How This Skill Works
Step 1: Use the /annotate-playwright command to inject an annotation overlay and allow you to draw red highlights on elements. Step 2: The annotated screenshot is saved to the annotations directory and made available in Claude Code's context. Step 3: The assistant analyzes the red-marked regions and answers your question based on those highlighted elements.
When to Use It
- When you need to identify a specific visual UI element that’s ambiguous in text alone
- When you want to know what a page component does by referencing the exact element you circled
- When you request changes (color, style, state) to a particular element and can point to it with annotations
- When multiple similar elements exist and you must specify the correct one via red marks
- During QA or debugging to show exactly which element is in question
Quick Start
- Step 1: Run /annotate-playwright to inject an annotation overlay on the current page
- Step 2: Draw red circles around the element(s) you’re asking about
- Step 3: Read the assistant’s answer based on the red-annotated regions
Best Practices
- Only annotate the element(s) you truly mean; keep the circles/sides tight around the target
- Use red annotations to clearly indicate the reference regions and avoid annotating large background areas
- Ensure the annotated element is visible on screen before capturing the screenshot
- If unsure, annotate multiple candidate elements and state the intent in your question
- Review the assistant’s answer and, if needed, re-annotate and re-run for refinement
Example Use Cases
- User asks 'What is this button?' and circles the button; the assistant describes its role
- User wants to know what a particular section does; the assistant identifies the section and its function
- User requests changing the color of a highlighted nav item; annotate it and receive guidance or confirmation
- QA check: highlight the element causing layout issues and the assistant explains the impact
- Accessibility review: annotate a form field to confirm its label and purpose
