skills.rest
williamw
williamwCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
BuilderIOBuilderIO
11

playwright-cli

Automate browser interactions and Playwright test workflows via command-driven tooling.

Official
Advanced
Nir-BhayNir-Bhay
19

design-handoff-spec

Generate developer-ready UI component specifications from Figma annotations.

Community
Advanced
yanochka11yanochka11

build-review-interface

Build browser-based annotation interfaces for reviewing LLM traces with pass/fail labels.

Community
Advanced
chrismccoychrismccoy
2

page-cloner

Clones a live webpage into standalone HTML with preserved markup, styles, and assets.

Community
Advanced