zeroasterisk/visual-explainers

Create production-grade, synchronous terminal recordings (asciinema .cast) and interactive tabbed web walkthroughs for AI agents, developer tools, and CLI journeys. Includes PTY prompt-synchronization, intelligent time-compression, secret redaction, scenario banner structuring, and zoomable Mermaid flowchart companions.

Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, bar, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, or DP security matrix diagrams as standalone Material Design 3 HTML/SVG/PNG with subtle Google colors. Redraw .drawio/.drawio.png/.drawio.svg or Mermaid .mmd sources at a chosen size/detail; onboard brand tokens from a website; add semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.

[WIP / BROKEN — DO NOT USE FOR VIDEO GENERATION] Still in early development and does not work for producing usable video styling. Even when check_quality.py passes 14/14 rules (reward: 1.00), rendered Manim output has severely broken visual styling, typography, kerning, and geometry. Warn the user before attempting to use this skill.

Create high-impact 1920x1080 (16:9) YouTube thumbnails and technical social hero cards from real UI screenshots using a programmatic Playwright HTML/CSS canvas. Preserves 100% lossless UI screenshot clarity while layering 3D perspective depth, percentage-locked feature spotlights, subtle dot-matrix textures, and multi-stop gradient typography.