Annotate ask playwright

Skill BarclayII/browser-annotator-skills/skills/annotate-ask-playwright

Browser annotation and question-answering skills for Claude Code

Install

npx -y skills add BarclayII/browser-annotator-skills --skill annotate-ask-playwright

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

INVOKE THIS SKILL when users ask questions about specific visual UI elements (e.g., "What is this button?", "What does this section do?", "Can you change this element's color?") or when they want to identify/discuss particular page components, and the agent lacks information to infer which part of the web page the user refers to. This skill lets users draw/circle elements instead of describing them.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.7 KB, as published. Nobody here has run it

Browser 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.

Gives 0 of the 12 instructions most e2e browser skills give

Counted across 407 of the 410 authors here whose files we hold, read 2026-08-06

use page object model patternin 35 of 407, across 25 files
Snapshot to get element refsin 24 of 407, across 14 files
keep tests independentin 23 of 407, across 18 files
Interact using refs from the latest snapshotin 23 of 407, across 11 files
clean up test data after each testin 21 of 407, across 15 files
test user behavior not implementationin 20 of 407, across 14 files
quarantine flaky tests explicitlyin 19 of 407, across 10 files
wait for specific network conditionsin 18 of 407, across 8 files
re-snapshot after navigation or dom changesin 17 of 407, across 10 files
Detect running dev servers before writing test codein 17 of 407, across 7 files
use web-first assertionsin 17 of 407, across 14 files
capture screenshots or videos on test failurein 17 of 407, across 14 files

Said here and by no other author read

run the annotate-playwright command
examine the annotated screenshot
identify the red annotated elements
answer the user's question
focus the answer on annotated areas

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.