annotate-ui

Annotate running pages with boxes and comments for UI feedback.

Updated Aug 23, 2026

Search Tags:#feedback #web development #user interface #playwright-cli #ui annotation

Ready to run

npx skills add https://github.com/williamw/agent-skills --skill annotate-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: annotate-ui
Source: https://github.com/williamw/agent-skills/tree/main/skills/annotate-ui
Command: npx skills add https://github.com/williamw/agent-skills --skill annotate-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/cli, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps streamline the process of providing visual feedback on user interfaces by allowing users to draw boxes and comments on running pages. It also enables the ingestion of annotations submitted in a zip file, facilitating the review and implementation of changes.

Core Features & Use Cases

Visual Feedback: Annotate running pages with boxes and comments.
Annotation Ingestion: Process annotations submitted in a zip file.
Use Case: A designer can use this Skill to annotate a webpage, indicating areas that need improvement. The annotations can then be processed and implemented by developers.

Quick Start

Annotate the home page of your app with feedback on the UI elements.

Frequently Asked Questions about annotate-ui

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

FAQPage Schema

How do I annotate a running web page to provide UI feedback?▼

You can annotate a running web page by visually drawing boxes and adding comments directly onto UI elements. This approach streamlines the process of providing visual feedback for design reviews and implementation planning.

Can I process UI annotations submitted in a zip file?▼

Yes, you can process UI annotations submitted in a zip file. The system supports annotation ingestion from compressed archives, facilitating the review and implementation of changes submitted by designers.

Do I need playwright-cli to annotate user interfaces?▼

Yes, playwright-cli is required to annotate user interfaces. It provides the underlying UI inspection and manipulation capabilities needed to interact with and visually annotate running web pages.

What is the best way to visually review a user interface for implementation planning?▼

Visually reviewing a user interface is best achieved by drawing boxes and comments directly on running pages. This allows designers to indicate areas needing improvement, creating actionable feedback for developers.

Does this UI annotation approach work for both direct page inspection and file ingestion?▼

Yes, this UI annotation approach supports both direct annotation on running pages and ingestion of annotations from a zip file. It tailors to UI design reviews by combining live inspection with archived feedback processing.