skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

wayfinder

Generate self-contained HTML pages that visualize systems, diagrams, diffs, and data tables.

Updated Aug 2, 2026
Search Tags:#html#mermaid#css#visualization#diagram#data table#diff review
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill wayfinder-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wayfinder
Source: https://github.com/leonardoacosta/skills/tree/main/leo-design/skills/wayfinder
Command: npx skills add https://github.com/leonardoacosta/skills --skill wayfinder-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Technical explanations delivered as ASCII art or plain terminal tables are hard to read and impossible to share. This Skill converts architecture overviews, flowcharts, diff reviews, plan reviews, and structured data into polished, self-contained HTML pages that open directly in a browser. ## Core Features & Use Cases - Diagram generation: Produces architecture diagrams, flowcharts, sequence diagrams, ER schemas, state machines, mind maps, timelines, and dashboards using Mermaid, CSS Grid, and Chart.js with themed palettes and zoom controls. - Proactive table rendering: Automatically converts any ASCII table with 4+ rows or 3+ columns into a styled, accessible HTML table with sticky headers, status badges, and responsive scrolling. - Visual diff reviews: Ships a diff-review prompt that gathers git data, verifies claims against code, and renders before/after panels, KPI dashboards, decision logs, and code review sections. - Use Case: After finishing a feature branch, ask for a visual diff review against main and receive a single HTML file with an executive summary, module dependency graph, before/after comparisons, and a Good/Bad/Ugly code review. ## Quick Start Ask the agent to generate a visual HTML architecture diagram of the current system and open it in the browser.

Frequently Asked Questions about wayfinder

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

FAQPage Schema
How do I generate an HTML architecture diagram from my codebase?▼

Ask for a visual architecture overview and the skill reads its reference templates, picks a rendering approach (CSS Grid for text-heavy cards, Mermaid for topology), and writes a self-contained HTML file to docs/diagrams/ that opens in your browser.

When should I use Mermaid versus CSS Grid for diagrams?▼

Use Mermaid when connections matter: flowcharts, sequence diagrams, ER schemas, state machines, and mind maps need automatic edge routing. Use CSS Grid cards when card content like descriptions, code references, and tool lists matters more than topology.

Can it render tables instead of ASCII tables in the terminal?▼

Yes, it proactively converts any table with 4+ rows or 3+ columns into a styled HTML table with sticky headers, alternating rows, status badges, and horizontal scrolling, then opens it in the browser.

Does the generated HTML require external assets or a server?▼

No, every diagram is a single self-contained HTML file with inline CSS and only CDN links for fonts and optional libraries like Mermaid or Chart.js. AI-generated images are embedded as base64 data URIs.

Why do Mermaid stateDiagram-v2 labels fail with special characters?▼

The stateDiagram-v2 parser rejects colons, parentheses, and HTML entities in transition labels, causing silent syntax errors. Use flowchart LR with quoted edge labels instead, which handles all special characters and line breaks.

What are the limitations of AI-generated illustrations in diagrams?▼

Image generation requires the ai-media script with an AI_GATEWAY_API_KEY or the surf CLI as fallback. If neither is available, the skill skips images gracefully and the page stands on CSS and typography alone.

Related Skills

Explore More Design & Creative Skills→
KristopherlbKristopherlb

docs-with-mermaid

Create technical documentation with Mermaid diagrams for software systems.

Community
Advanced
AO-HySAO-HyS

pr-lens

Generates animated SVG architecture and data-flow diagrams from code diffs and pull requests.

Official
Advanced
dmedina-devdmedina-dev
1

ckm:design

Generate brand identity assets including logos, design tokens, and corporate deliverables.

Community
Advanced
alibabaalibaba
2.2k

mermaid

Render Mermaid diagrams from fenced code blocks in Markdown documents.

Official
Basic