Menu
Generate self-contained HTML for technical diagrams, visualizations, data tables. Always open in browser. No ASCII art fallback.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Guide for creating or updating skills. Use when extending Claude with specialized knowledge, workflows, or tool integrations.
Read and post to Twitter/X via the `bird` CLI — tweets, threads, search, timelines, bookmarks, follows, lists, media.
Set up and maintain bookkeeping for solopreneur. Track income/expenses, manage invoices, reconcile accounts, generate reports. Software, chart of accounts, categorization. Not professional. Trigger: bookkeeping, accounting, track expenses.
Explore feature, component, or functionality before implementation. Clarifies intent, requirements, design through dialogue.
Build brand identity: personality, voice/tone, visual system (colors, typography, logo, imagery), tagline, guidelines. Trigger: create my brand, brand identity, rebrand.
Deep competitive analysis: map competitors, find gaps, understand strategy, benchmark offering. Focused dissection vs broad landscape. Trigger: analyze competitors, competitive analysis, how beat them.
| name | visual-explainer |
| description | Generate self-contained HTML for technical diagrams, visualizations, data tables. Always open in browser. No ASCII art fallback. |
Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.
When about to present tabular data as an ASCII box-drawing table in the terminal (comparisons, audits, feature matrices, status reports, any structured rows/columns), generate an HTML page instead.
Threshold: if the table has 4+ rows or 3+ columns, it belongs in the browser.
Don't wait for the user to ask — render it as HTML automatically and tell them the file path. You can still include a brief text summary in the chat, but the table itself should be the HTML page.
Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time. Visual is always default. Even essays, blog posts, and articles get visual treatment — extract structure into cards, diagrams, grids, tables. Prose patterns (lead paragraphs, pull quotes, callout boxes) are accent elements within visual pages, not a separate mode.
Who is looking? A developer understanding a system? A PM seeing the big picture? A team reviewing a proposal? This shapes information density and visual complexity.
What type of content? Architecture, flowchart, sequence, data flow, schema/ER, state machine, mind map, class diagram, C4 architecture, data table, timeline, dashboard, or prose-first page. Each has distinct layout needs and rendering approaches (see Diagram Types section and references).
See the Diagram Types section below for the full type matrix.
Reference font pairings from references/libraries.md. Pick a non-default palette. Don't reach for the same teal-and-slate every time — the references include multiple palettes and the anti-patterns section lists what to avoid.
Self-contained. Both themes. Responsive.
Required elements:
<!DOCTYPE html> with lang="en"<link href="https://cdn.jsdelivr.net/npm/remixicon@4/fonts/remixicon.css" rel="stylesheet"> — use ri-* classes for all icons (theme toggle, callouts, status indicators, etc.). See references/libraries.md for usage.:root and [data-theme="light"]768pxmin-width: 0 on ALL grid/flex children (overflow protection)Write the file to ~/.agent/diagrams/<descriptive-name>.html then open it:
mkdir -p ~/.agent/diagrams
# write file, then:
xdg-open ~/.agent/diagrams/<name>.html
Three approaches based on complexity:
| Complexity | Approach |
|---|---|
| Simple (< 8 nodes) | Mermaid flowchart |
| Text-heavy (long labels, descriptions) | CSS Grid with cards and CSS arrow connectors |
| Complex (mixed nodes + heavy text) | Hybrid — Mermaid for flow, CSS cards for detail panels |
Mermaid flowchart. Prefer graph TD (top-down) for vertical flows, graph LR for horizontal pipelines. See references/libraries.md for direction guidance.
Mermaid sequenceDiagram. Keep participant names short. Use plain text only in messages (no special characters).
Mermaid with edge labels: A -->|transforms| B. Use subgraphs to group related components.
Mermaid erDiagram. Show relationships with cardinality notation.
Mermaid stateDiagram-v2. Caveat: state labels don't support special characters well. If you need special characters in labels, fall back to flowchart TD with styled nodes instead.
Mermaid mindmap. Good for brainstorming, feature exploration, taxonomy.
Mermaid classDiagram. Show methods, properties, inheritance, composition.
Use Mermaid flowchart syntax with styled subgraphs. Do NOT use native C4Context — it has poor rendering support.
Real <table> element. This is the proactive rendering target.
<span> badges, never emojifont-variant-numeric: tabular-numsreferences/css-patterns.md for full table patternsCSS pseudo-element central line with alternating cards left/right. Each card gets a date marker, title, and description. Collapses to single column on mobile.
Card grid layout. Hero numbers in large font. Sparklines via inline SVG. For real charts with axes and legends, use Chart.js (see references/libraries.md).
Don't dump full files — show structure with descriptions. Pattern:
Transform prose into visual elements:
| Content | Visual Treatment |
|---|---|
| Feature list | Card grid |
| Steps/process | Numbered flow |
| API reference | Table |
| Configuration | Table |
| Architecture | Diagram |
| Comparisons | Side-by-side panels |
| Warnings/caveats | Callout boxes |
Use sparingly within visual pages, not as a separate mode:
These slash commands invoke specific visual workflows:
/web-diagram <topic> — generate a diagram for any topic/generate-visual-plan <feature> — generate a visual implementation plan/diff-review [branch|commit|PR] — visual code change analysis/plan-review <path-to-plan> — validate a plan against the codebase/project-recap [time-window] — project status snapshot/fact-check [file] — verify an HTML review page against source codeBefore delivering:
.mermaid-wrap must have zoom controls (+/-/reset buttons), Ctrl/Cmd+scroll zoom, click-drag pan, click-to-expand.Forbidden fonts: Inter, Roboto, Arial, Helvetica, system-ui alone. These are the default choices that make every AI-generated page look identical. Pick real fonts from the pairings in references/libraries.md.
Forbidden accents: indigo-500 / violet-500 (#8b5cf6, #7c3aed, #a78bfa), cyan+magenta+pink neon combos.
Forbidden effects: gradient text on headings, animated glowing shadows, overlapping radial neon haze backgrounds.
No emoji icons before section titles. No identical "icon in rounded colored box" pattern repeated for every section. Vary visual treatment.
If 2+ of these telltale signs are present, regenerate with a different aesthetic direction:
See references/css-patterns.md for CSS component patterns
See references/libraries.md for CDN libraries, font pairings, Mermaid configuration
See references/templates/ for reference HTML templates