visual-doc

Create Plannotator-ready HTML visual documents summarizing decision context and evidence.

1|1|Updated Apr 24, 2026
One-click install
npx skills add https://github.com/luan/agents --skill visual-doc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-doc
Source: https://github.com/luan/agents/tree/main/skills/visual-doc
Command: npx skills add https://github.com/luan/agents --skill visual-doc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual documentation reduces slow, ambiguous review cycles by turning briefs, proposals, and verification evidence into a fast-to-scan Plannotator-ready HTML artifact.

Core Features & Use Cases

  • Concise visual reporting: Produces Plannotator-ready HTML documents organized into purpose, summary facts, evidence panels, relationships, and an appendix for raw media and transcripts.
  • Evidence-first review surfaces: Structures acceptance gates, scenario walkthroughs, and comparison/decision states so reviewers can verify quickly using screenshots, recordings, terminal frames, or rendered GIFs.
  • Manual verification support: Uses visual cards and checklists to map each acceptance criterion to corresponding evidence for gatekeeping and approval workflows.

Quick Start

Use this skill to generate a Plannotator-ready visual doc for your brief, issue proposal, implementation evidence, or manual verification gate, then review the rendered artifact with the appropriate Plannotator workflow.

Frequently Asked Questions about visual-doc

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

FAQPage Schema
How do I create visual documentation for manual verification and code review evidence?▼

Visual documentation summarizes decision context and review evidence into a fast-to-scan HTML artifact. It structures screenshots, recordings, and terminal frames into evidence cards so reviewers can quickly verify acceptance criteria during manual verification gates.

What is a Plannotator-ready HTML report and when do I need it for review workflows?▼

A Plannotator-ready HTML report is a concise visual document organizing purpose, summary facts, evidence panels, and relationships. You need it when fast visual inspection is required for briefs, issue proposals, or implementation records to reduce slow and ambiguous review cycles.

How do I map acceptance criteria to screenshots for an approval gate checklist?▼

You can map acceptance criteria to screenshots using visual cards and checklists within the HTML document. This evidence-first layout links each acceptance gate to corresponding media like rendered GIFs or terminal frames, allowing reviewers to verify implementation states quickly.

Can I use this visual documentation format for both issue proposals and implementation records?▼

Yes, visual documentation applies to briefs, issue proposals, implementation records, and PR review evidence. It formats decision states and scenario walkthroughs into an HTML artifact with a header, summary strip, evidence card layout, and an appendix for raw media.

Does this visual documentation tool require any external dependencies to render HTML reports?▼

No external dependencies are required to generate the visual documentation HTML reports. The skill independently produces the structured artifact with purpose, summary facts, relationships, and an appendix, which can then be reviewed with the appropriate Plannotator workflow.

What are the limitations of using HTML visual documents for manual verification gates?▼

HTML visual documents focus on summarizing decision context and mapping evidence for manual inspection rather than automating test execution. They serve as gatekeeping artifacts for reviewers to visually verify acceptance criteria using provided media, transcripts, and commands in the appendix.