hai-visual-report

Generates multi-section HTML reports with Mermaid diagrams from ideas, requirements, and reviews.

Updated Jan 10, 2026
One-click install
npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill hai-visual-report-rabbit-ivan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hai-visual-report
Source: https://github.com/Rabbit-Ivan/Ivan-skills/tree/main/skills/hai-visual-report
Command: npx skills add https://github.com/Rabbit-Ivan/Ivan-skills --skill hai-visual-report-rabbit-ivan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning an idea, PRD, review, or plan into a presentable artifact usually means hand-building slides or documents. This Skill converts raw content into a complete, self-contained HTML report with a verdict, structure map, decision matrix, risks, and next steps. ## Core Features & Use Cases - Structured eight-block reports: Produces a single portable .html file containing header, one-line verdict, Mermaid structure map, core sections, decision matrix, timeline, risks-and-proof table, and next-move block. - Report-type awareness: Adapts emphasis for idea, requirement, goal, review, and architecture-style reports, keeping facts, assumptions, and judgments visually separated. - Portable output: Uses Tailwind CDN and Mermaid CDN with inline assets so the file opens anywhere without a build step, and returns the absolute file path after QA checks. - Use Case: After an architecture review, ask for a webpage version and receive a shareable HTML report with the system map, options matrix, why-not alternatives, and prioritized risks. ## Quick Start Use hai-visual-report to turn this requirements document into a visual HTML report with a Mermaid diagram and decision matrix.

Frequently Asked Questions about hai-visual-report

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

FAQPage Schema
How do I turn a requirements document into an HTML report?▼

Provide the idea, PRD, review, or plan and request a visual report. The Skill extracts the core judgment, builds an eight-block structure with a Mermaid map and decision matrix, writes a single .html file, and returns its absolute path.

What is the difference between a visual report and a visual card?▼

A visual report is a multi-section HTML page for understanding structure, tradeoffs, risks, and evidence. A visual card is a single-screen summary for sharing; use create-visual-card for that case instead.

Does the generated HTML report require a build step?▼

No. The report uses Tailwind CDN and Mermaid CDN with inline CSS and JS, producing one portable .html file that opens directly in a browser or can be sent to others without any build tooling.

Can the report include Mermaid diagrams?▼

Yes. A Mermaid structure map near the top is a default block showing actors, relationships, flows, or decision paths. Dense diagrams should be split for readability, and omission requires a stated reason.

When should I use hai-architecture instead of this report generator?▼

Use hai-architecture when you need architecture-level judgment such as APoSD/Ousterhout review or module-boundary critique. This Skill only renders the report; the architecture verdict itself belongs to hai-architecture.