annotate-screenshots

Annotate screenshots with boxes, arrows, labels, and redactions via CSS selectors.

11|Updated Jul 6, 2026

Search Tags:#automation #debugging #screenshots #redaction #pull-request #annotation

Ready to run

npx skills add https://github.com/buildinternet/uploads --skill annotate-screenshots

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: annotate-screenshots
Source: https://github.com/buildinternet/uploads/tree/main/skills/annotate-screenshots
Command: npx skills add https://github.com/buildinternet/uploads --skill annotate-screenshots

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the difficulty of communicating visual changes or bugs in software by allowing you to programmatically add annotations to screenshots, ensuring reviewers see exactly what needs attention without hunting through images.

Core Features & Use Cases

Selector-based Annotation: Target specific DOM elements on live pages to automatically place boxes, labels, and arrows.
Security-First Redaction: Apply solid redaction blocks to sensitive information like API keys or passwords before images are shared publicly.
Use Case: Use this during a development workflow to circle a new UI component, label a specific button, and redact a private API key in a single command before attaching the image to a GitHub pull request.

Quick Start

Use the annotate-screenshots skill to draw a box around the element matching the selector #submit-button and redact the element with the test ID api-key on the current page.

Frequently Asked Questions about annotate-screenshots

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

FAQPage Schema

How do I add annotations to screenshots for a pull request?▼

You can programmatically annotate screenshots by adding boxes, arrows, and labels to highlight UI changes or bugs, ensuring reviewers see exactly what needs attention before attaching the image to a pull request.

Can I target specific DOM elements on a live web page for image annotation?▼

Yes, selector-based annotation allows you to target specific DOM elements on live pages using CSS selectors to automatically place boxes, labels, and arrows without manual coordinate mapping.

What is the best way to redact sensitive information like API keys in screenshots?▼

Applying solid redaction blocks to sensitive information like API keys or passwords ensures secure visual communication by mandating redaction before images are shared publicly.

Does screenshot annotation support static image files or only live web pages?▼

Screenshot annotation supports both live web page element targeting via CSS selectors and coordinate-based markup for static image files, covering both dynamic and existing visual assets.

How do I circle a UI component and label a button for visual debugging?▼

During your development workflow, you can circle a new UI component, label a specific button, and redact a private API key in a single command to streamline visual debugging and documentation.