Skill UI

This skill provides comprehensive guidance on leveraging d3.js (Data-Driven Documents) to create sophisticated, interactive, and publication-quality data visualizations. It covers core concepts like data binding, implementing various chart types (network graphs, geo-maps, etc.), handling complex transitions, and ensuring responsiveness across modern JavaScript frameworks (React, Vue, Vanilla JS). Learn the standard workflow for scale definition, axis creation, and drawing custom visual elements with fine-grained control.

Generates Excalidraw diagrams from natural-language prompts, turning requests such as “make a flowchart” or “draw a system architecture” into ready-to-open .excalidraw JSON files for flows, relationships, mind maps, and architectures.

Programmatic canvas toolkit for creating, editing, and syncing Excalidraw diagrams via MCP or REST, with import/export, snapshots, and fine-grained element control.

Delivers Makepad shader expertise for draw_bg, Sdf2d, gradients, and GPU widget visuals, offering code patterns, documentation cues, and built-in guidance so you can craft or debug custom shaders within the makepad-widgets workflow.

Generates and edits draw.io (.drawio/.drawio.svg/.drawio.png) files via mxGraph XML, supporting templates, layout guidance, and the VS Code Draw.io extension so diagrams for flowcharts, architecture, UML, ER, sequences, and networks open without manual fixes.