skills.rest
buildinternet
buildinternetOFFICIAL
Explore all skills by this author →
Website𝕏@buildinternetGitHub

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
One-click install
npx skills add https://github.com/buildinternet/uploads --skill annotate-screenshots
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
twiced-technology-gmbhtwiced-technology-gmbh

redline

Annotate UI elements in running web or Tauri applications and fix flagged code issues.

Official
Advanced
relaticlerelaticle
1.5k

screenshot-with-callout

Capture annotated screenshots with red callouts and verified cropping.

Official
Advanced
mrcsXndrmrcsXndr

browse

Navigate live web pages and extract content using Playwright or Selenium.

Community
Intermediate
MO196931MO196931

Video Generation

Generate videos from text prompts or static images with customizable output parameters.

Community
Advanced