What problem does it solve?
Building visualizations in TypeScript applications often leads to untyped data boundaries, ad hoc library choices, and tangled render logic. This Skill provides rules for typed data contracts, renderer selection, and maintainable component architecture so charts, diagrams, and scrollytelling scenes stay reliable as the product grows.
Core Features & Use Cases
- Typed Data Contracts: Define schemas for input rows, derived marks, scales, selections, tooltips, URL view-state codecs, and persisted preferences with validation at the boundary.
- Renderer and Library Selection: Choose between D3, Observable Plot, Vega-Lite, Recharts, ECharts, Canvas2D, WebGL, Three.js, deck.gl, PixiJS, Sigma.js, and diagramming tools like Mermaid, React Flow, or Cytoscape.js based on data shape and product surface.
- Architecture Guidance: Separate data loading, transformation, scale creation, rendering, and interaction state, with explicit contracts for scrollytelling scenes, generated imagery, mobile layouts, and reduced-motion fallbacks.
- Use Case: When converting a D3 prototype into a maintainable React charting system, use this Skill to define the typed interfaces for chart data, tooltip payloads, and shareable URL state before writing render code.
Quick Start
Ask the agent to design the TypeScript types and renderer architecture for your visualization, for example: design typed contracts for selections, tooltips, and URL state for an interactive dashboard chart.
