skills.rest
MaxWolf-01
MaxWolf-01COMMUNITY
Explore all skills by this author →
Website𝕏@MaxWolf_01GitHub

show

Create diagrams, comparisons, demos, and explainer pages as visual explanation artifacts.

3|Updated Jan 10, 2026
Search Tags:#documentation#mermaid#visualization#svg#diagram#explainer#render lint
One-click install
npx skills add https://github.com/MaxWolf-01/agents --skill show-maxwolf-01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: show
Source: https://github.com/MaxWolf-01/agents/tree/main/mx/skills/show
Command: npx skills add https://github.com/MaxWolf-01/agents --skill show-maxwolf-01

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tyro, playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Long prose explanations often fail to make complex systems, flows, or comparisons click for the reader. This Skill replaces struggling text with the right visual artifact: a diagram, diff, runnable demo, chart, interactive page, or animation chosen deliberately for the shape of the confusion. ## Core Features & Use Cases - Medium selection guidance: Weighs diagrams (Mermaid or hand-placed SVG), comparisons, runnable code, HTML/JS explainer pages, LaTeX/TikZ figures, and animations against the explanation problem. - Hand-authored SVG figure system: Detailed mechanics and house-style skin for self-contained SVG figures, including draw order, connector routing, grid discipline, type roles, markers, composition elements, and 77 vendored icons. - Render linting and review loop: A Playwright-based script detects text escaping boxes, overlaps, and crowding in rendered HTML, with per-finding PNG crops for inspection. - Use Case: When a user struggles to understand an architecture or a state model, produce a hand-placed SVG figure or an interactive explainer page, lint the render, screenshot both color schemes, and present the opened artifact. ## Quick Start Show me how the authentication flow works as a diagram instead of explaining it in prose.

Frequently Asked Questions about show

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

FAQPage Schema
How do I create an architecture diagram as a self-contained HTML file?▼

Author a hand-placed SVG inside one HTML file with inline CSS, following the draw order of background, zones, connectors, nodes, then labels. Keep coordinates on a 4px grid, lint the render with the included script, and screenshot both color schemes before presenting.

When should I use Mermaid versus hand-placed SVG for diagrams?▼

Use Mermaid when you want layout solved automatically, typically above roughly nine nodes. Choose hand-placed SVG when the figure itself is the artifact and you need full control over placement, which pays off under about nine nodes.

How do I check an SVG figure for text overflow or overlapping labels?▼

Run the render-lint script on the HTML file, which opens it in headless Chromium, measures every text against its box, and reports escapes, overlaps, and tight spacing. Use the crops option to get a PNG per finding for visual inspection.

What dependencies does the render lint script need?▼

The script runs via uv and requires Python 3.11 or later with tyro and playwright, plus a Chromium or Chrome binary on the system. It exits with code 1 when any escape or overlap finding is detected.

When should an explanation become an interactive page instead of a static diagram?▼

Choose an HTML explainer page when the reader benefits from poking at the material, such as side-by-side panels or figures they can step through. Static SVG figures suit single-structure explanations, while build-heavy artifacts like videos should be delegated to a forked context.

Related Skills

Explore More Design & Creative Skills→
taracodlabstaracodlabs
799

web_research

Conducts web research with multi-source verification and structured fact extraction.

Official
Basic
coferlandiacoferlandia

project-skill-miner

Mines repository documentation and GitHub evidence to propose and generate approved project-local agent skills.

Official
Advanced
rhixecompanyrhixecompany

brand-guidelines

Apply Anthropic brand colors and typography to visual artifacts.

Community
Basic
sddevelopment-besddevelopment-be
13

Target-Audience Fit Approach

Translate target audience personas into a repeatable workflow using YAML frontmatter and Markdown.

Official
Basic