Why does this skill use D3 for math only and not DOM mutation?

Using D3 for math and React for rendering ensures that React maintains control over the DOM, which is critical for performance and compatibility with SSR hydration.

Which D3 modules are restricted by this skill?

Modules that perform direct DOM mutation, such as d3-selection, d3-axis, and d3-transition, are restricted to ensure React-native rendering.

How does this skill handle hydration mismatches in charts?

It defaults time charts to UTC using scaleUtc and utcFormat, reducing differences between server and client rendering results.

Is this skill compatible with Tailwind v4?

Yes, it specifically utilizes Tailwind v4 CSS-first tokens and consumes them via CSS variables for styling charts.

TanStack Start D3 Charting

Name: TanStack Start D3 Charting
Author: AndyMarigoldLabs

byAndyMarigoldLabs

0•

Analytics & Monitoring

Generates performance-optimized, SSR-safe D3 visualizations specifically tailored for TanStack Start and React.

This skill streamlines the creation of data visualizations by leveraging D3.js for mathematical layouts and React for declarative rendering. It is purpose-built for the TanStack Start framework, ensuring charts are server-side rendering (SSR) compatible while maintaining design consistency through Tailwind v4 tokens. By enforcing strict linting rules that forbid D3's direct DOM manipulation, the skill ensures high-performance, maintainable code that avoids common hydration pitfalls in modern full-stack React applications.

Key Features

01SSR-safe rendering patterns for TanStack Start

020 GitHub stars

03Tailwind v4 CSS-first theme token integration

04Biome-enforced linting to prevent forbidden D3 DOM imports

05Separation of D3 mathematical logic from React DOM rendering

06Automated UTC time-scale formatting to prevent hydration mismatches

Use Cases

01Building server-rendered analytics dashboards with high performance

02Creating time-series visualizations with cross-timezone consistency

03Implementing theme-aware charts using Tailwind v4 CSS variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add andymarigoldlabs/continuous-funding tanstack-start-d3-charting

For use in Claude.ai and ChatGPT

Download Skill