Professional diagram and architecture visualization design system for Remotion video compositions. Use when building: architecture diagrams, hub-and-spoke layouts, flowcharts, pipeline visualizations, comparison panels, layered stacks, data flow diagrams, or any scene with connected boxes/nodes/arrows. Ensures YouTube-grade visual quality with gradient fills, depth shadows, glow effects, brand logo icons, and animated connections. Triggers on: "diagram", "architecture", "flowchart", "pipeline", "hub and spoke", "data flow", "system diagram", "connected boxes", "infrastructure layout", "tech stack visualization".
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.
A direct command skips the review prompt. Inspect the source before running it.
Professional diagram and architecture visualization design system for Remotion video compositions. Use when building: architecture diagrams, hub-and-spoke layouts, flowcharts, pipeline visualizations, comparison panels, layered stacks, data flow diagrams, or any scene with connected boxes/nodes/arrows. Ensures YouTube-grade visual quality with gradient fills, depth shadows, glow effects, brand logo icons, and animated connections. Triggers on: "diagram", "architecture", "flowchart", "pipeline", "hub and spoke", "data flow", "system diagram", "connected boxes", "infrastructure layout", "tech stack visualization".
Visual Diagrams Design System
Professional-grade diagram components for Remotion explainer videos. Replaces wireframe-quality
boxes-and-lines with YouTube-grade visuals: gradient fills, depth shadows, animated glowing
connections, brand logo images, and layered visual hierarchy.
When to Use This Skill
Phase 4 scene building when the plan calls for architecture/system diagrams
Any scene showing relationships between components (hub-spoke, flow, layers)
Infrastructure/tech stack visualizations
Before/after or comparison layouts
Data flow or pipeline diagrams
The Problem This Solves
Without this skill, sub-agents produce wireframe-quality diagrams:
Thin 1-2px borders on transparent boxes
Unicode characters as "icons" (invisible in headless Chromium)
No shadows, no depth, no visual hierarchy
Tiny nodes that look like developer sketches
Thin dashed connection lines with no glow or energy
Every node/box MUST use a subtle gradient fill, not a flat color. Gradients create depth and
make elements feel three-dimensional.
// WRONG - flat transparent fill (wireframe look)backgroundColor: `${color}22`// CORRECT - gradient fill with depthbackground: `linear-gradient(135deg, ${color}25, ${color}08)`
2. Multi-Layer Shadows for Depth
Every node MUST have at least a 2-layer box shadow: a tight inner shadow for definition
and a wider outer glow for atmosphere.
// WRONG - no shadow (flat, floats in void)// (no boxShadow property)// CORRECT - depth + glowboxShadow: `0 4px 20px ${color}30, 0 0 40px ${color}15, inset 0 1px 0 rgba(255,255,255,0.05)`
3. Thick Borders with Gradient Feel
Use 2-3px borders minimum. 1px borders disappear on YouTube at 720p. Use the node's
accent color at 40-60% opacity for borders (not 20%).
// WRONG - too thin, too transparentborder: `1px solid ${color}22`// CORRECT - visible at YouTube resolutionborder: `2px solid ${color}66`borderTop: `3px solid ${color}`// accent top edge
4. Brand Logo Images Instead of Unicode Icons
When referencing known tools/services (GitHub, Docker, AWS, Cloudflare, etc.), use actual
brand logo images downloaded to public/images/<composition>/. Unicode symbols and emoji
render as black glyphs in headless Chromium.
// WRONG - invisible in rendered video
<div style={{ fontSize: 36 }}>{'🐳'}</div>
// CORRECT - actual brand logo<Imgsrc={staticFile('images/mycomp/docker-logo.png')}
style={{width:40, height:40, objectFit: 'contain' }} />
Image acquisition: During Phase 4 scene building, if a brand logo is needed:
Check if it already exists in public/images/<composition>/
If not, download from GitHub avatars: https://github.com/<org>.png?size=128
Or use the scene's screenshots.json manifest for batch capture
Fall back to a styled letter badge (colored circle + first letter) — never Unicode emoji
5. Generous Node Sizing
Nodes must be large enough to be instantly readable at 720p. Minimum sizes:
Element
Minimum Size
Recommended
Hub/center node
180x120px
200x140px
Spoke/satellite node
160x100px
180x110px
Flow diagram node
200x100px
220x120px
Layer bar height
90px
100-120px
Icon/logo inside node
36x36px
40-48px
Node label font
24px
26-28px
Sub-label font
20px
22px
6. Animated Glowing Connections
Connection lines between nodes must have:
Minimum 2.5px stroke width (not 1-2px)
A subtle glow via SVG filter or duplicate line with blur
Animated draw-on via strokeDasharray/strokeDashoffset
Color matching the source or target node's accent
// WRONG - thin invisible line
<line stroke={color} strokeWidth={1} strokeDasharray="4 4" />
// CORRECT - visible glowing connection<>
{/* Glow layer */}
<linestroke={color}strokeWidth={6}opacity={0.15}filter="url(#connectionGlow)" />
{/* Main line */}
<linestroke={color}strokeWidth={2.5}opacity={0.7}strokeDasharray={len}strokeDashoffset={dashOff} /></>
See references/component-patterns.md for detailed before/after code patterns for each
shared component (HubAndSpoke, FlowDiagram, LayeredArchitecture, ComparisonDiagram).
See references/icon-strategy.md for the complete icon/logo acquisition and fallback strategy.
See references/animation-choreography.md for connection line animation, node entrance
sequencing, and SpotlightFocus patterns for multi-phase diagrams.
Integration with Phase 4
When Phase 4 encounters a scene plan that calls for an architecture diagram or connected
component visualization:
Load this skill for design guidance
Check shared components — use HubAndSpoke, FlowDiagram, LayeredArchitecture,
ComparisonDiagram, or GitBranching as the foundation
Download brand logos if the diagram references known tools/services
Use the component's props — all components accept nodeStyle, connectionStyle,
and iconSrc overrides for professional visual treatment
