skills.rest
ahuaracab
ahuaracabCOMMUNITY
Explore all skills by this author →
GitHub

bug-screenshot-annotation

Annotates bug screenshots with circles, arrows, callouts, and badges rendered locally via HTML and Playwright.

Updated Aug 31, 2026
Search Tags:#playwright#jira#qa testing#html overlay#bug evidence#screenshot annotation#defect markup
One-click install
npx skills add https://github.com/ahuaracab/test-genesis --skill bug-screenshot-annotation-ahuaracab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bug-screenshot-annotation
Source: https://github.com/ahuaracab/test-genesis/tree/main/.agents/skills/bug-screenshot-annotation
Command: npx skills add https://github.com/ahuaracab/test-genesis --skill bug-screenshot-annotation-ahuaracab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, and includes references (resource) components.

What problem does it solve? Raw bug screenshots often fail to communicate visual or positional defects — overlapping elements, misalignment, or wrong chart axis values — forcing QA engineers to write paragraphs of explanation. This Skill turns a plain screenshot into a QA-style annotated evidence image that makes the defect obvious at a glance, without routing sensitive product data through any external image service. ## Core Features & Use Cases - QA-style markup overlays: Adds circles/ovals around broken regions, arrows pointing at defects, explanatory callout text boxes, a "BUG — <KEY>" corner badge, and axis tick-marks for date/offset chart bugs, using a copy-paste HTML/CSS shape library. - 100% local, exfiltration-safe pipeline: Renders annotation HTML through a loopback-only HTTP server (127.0.0.1) and captures it with playwright-cli, so screenshots containing real product or customer data never leave the machine. - Evidence workflow integration: Produces exactly one final annotated PNG named {KEY}-BUG-{BUG-KEY}-annotated.png in the ticket's evidence folder, with an optional step to embed it inline into the Jira bug issue. - Use Case: During sprint exploratory testing you find two chart data points rendering at the same pixel. Crop the region with Python/PIL, overlay a circle, arrow, and callout from the shape library, capture the annotated PNG, and attach it as the lead evidence on the filed bug. ## Quick Start Ask the agent to annotate the raw bug screenshot in the ticket's evidence folder by circling the broken region, adding an explanatory callout and a BUG badge, and saving the annotated PNG back to the evidence folder.

Frequently Asked Questions about bug-screenshot-annotation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I annotate a bug screenshot with circles and arrows?▼

Crop the defect region with Python and PIL, then build an HTML file where the crop is a background image and each annotation is an absolutely positioned div from the shapes.html library. Serve it over a loopback HTTP server and capture the result with playwright-cli into the evidence folder.

How to mark up QA evidence screenshots without uploading them to external services?▼

Render annotations as HTML/CSS overlays served by a local HTTP server bound to 127.0.0.1 and capture them with a local browser-automation CLI. Nothing leaves the machine, which keeps screenshots containing real product or customer data safe from exfiltration.

Why does file:// not work when capturing annotation HTML with playwright-cli?▼

The browser-automation CLI refuses file:// URLs and errors out before rendering. You must serve the annotation HTML over a local HTTP server bound to 127.0.0.1, which also keeps the workflow exfiltration-safe.

Why is my callout text clipped or my badge hidden behind other shapes?▼

Clipping happens when the capture viewport is smaller than the HTML canvas or a callout box lacks max-width with normal white-space. A hidden badge means the z-index scale was dropped: base image 1, shapes 10, callouts 20, corner badge 30.

When should I not use screenshot annotation for bug evidence?▼

Skip annotation for plain before/after screenshots that already read clearly, photos of physical objects or documents, and for filing the bug itself, which belongs to the reporting workflow. Annotation is only for cases where a raw screenshot alone does not communicate the defect.

Related Skills

Explore More Software Engineering Skills→
VirtoCommerceVirtoCommerce
2

qa-evidence

Standardize QA evidence capture and report formatting for testing documentation.

Official
Intermediate
LordKuperLordKuper

smoke-check

Execute the full automated test suite and produce a PASS/FAIL report.

Community
Advanced
miptah21miptah21
2

chrome-devtools

Inspect live browser state to diagnose UI, console, and network issues.

Community
Intermediate
abhiroopbabhiroopb

snagit

Automate macOS screen captures and recordings via Snagit and AppleScript.

Community
Intermediate