skills.rest
panamini
panaminiCOMMUNITY
Explore all skills by this author →
GitHub

pi-annotate

Launch an annotation overlay to capture structured element-level UI feedback.

Updated May 4, 2026
Search Tags:#debugging#ui review#annotation#implementation tasks#screenshot notes#element-level feedback
One-click install
npx skills add https://github.com/panamini/pi-tooling --skill pi-annotate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pi-annotate
Source: https://github.com/panamini/pi-tooling/tree/main/skills/pi-annotate
Command: npx skills add https://github.com/panamini/pi-tooling --skill pi-annotate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you turn what you see on a page into structured, element-level feedback that can be acted on quickly.

Core Features & Use Cases

  • Visual annotation overlay: Annotate directly on the rendered page to collect screenshot-aware notes.
  • Structured findings handoff: Pass element-level observations into implementation tasks to reduce back-and-forth.
  • Common use case: When reviewing a UI screen, capture the exact spots that need change and convert them into actionable fix instructions.

Quick Start

Run /annotate to start the annotation overlay, then record your structured element-level notes for the page you are reviewing.

Frequently Asked Questions about pi-annotate

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

FAQPage Schema
How do I capture element-level feedback during a UI review?▼

You can capture element-level feedback by launching a visual annotation overlay on the rendered page, allowing you to record structured, screenshot-aware notes directly on the specific UI elements that need fixes.

What is the best way to turn screenshot notes into implementation tasks?▼

The best way to turn screenshot notes into implementation tasks is to use a structured findings handoff workflow that passes your element-level observations into actionable fix instructions, reducing back-and-forth communication with developers.

Can I annotate directly on a rendered page for debugging scenarios?▼

Yes, you can annotate directly on a rendered page for debugging scenarios by running a deterministic overlay-driven capture workflow that produces structured annotation notes suitable for downstream task generation.

Does visual annotation work without external dependencies?▼

Visual annotation works without external dependencies, as the tool operates independently to launch an overlay-driven capture workflow that transforms visual page inspection into structured feedback.

How do I start an annotation overlay for screenshot-aware notes?▼

To start an annotation overlay for screenshot-aware notes, run the /annotate command which initiates the visual inspection flow and allows you to record your structured element-level findings on the page you are reviewing.

Related Skills

Explore More Design & Creative Skills→
MadAppGangMadAppGang
7

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

Official
Intermediate
soeiroosoeiroo

handoff-spec

Generate developer handoff specifications with visual, interaction, and accessibility details.

Community
Advanced
codingSamsscodingSamss
11

peekaboo

Capture and analyze macOS UI screenshots to debug layout and style issues.

Community
Basic
mintuzmintuz
21

eyes

Capture UI screenshots and compare states using Playwright MCP tools.

Community
Basic