pi-annotate

Name: pi-annotate
Availability: InStock
Author: panamini

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

Ready to run

npx skills add https://github.com/panamini/pi-tooling --skill pi-annotate

💬 Prompt for ChatGPT / Claude Chat▼

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.