Diagram Scaffolder

This skill generates interactive diagram components that integrate with the tutorial's custom markdown rendering pipeline.

When to Use This Skill

• When adding a new visual diagram to any tutorial content
• When creating architectural illustrations (e.g., system diagrams, flow charts)
• When building interactive visualizations with clickable phases or nodes
• When a :::diagram <name> block needs a backing React component

Architecture Overview

Adding a diagram requires coordinated changes across 4 files: