skills.rest
AndyMarigoldLabs
AndyMarigoldLabsCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-start-d3-charting

Generate SSR-safe D3 charts for TanStack Start with Tailwind v4 tokens.

Updated Jan 17, 2026
Search Tags:#react#tailwind#charting#ssr#d3#tanstack-start
One-click install
npx skills add https://github.com/AndyMarigoldLabs/continuous-funding --skill tanstack-start-d3-charting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-start-d3-charting
Source: https://github.com/AndyMarigoldLabs/continuous-funding/tree/main/.claude/skills/tanstack-start-d3-charting
Command: npx skills add https://github.com/AndyMarigoldLabs/continuous-funding --skill tanstack-start-d3-charting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a framework for building SSR-safe, designer-approved D3-based charts within TanStack Start on React, ensuring deterministic rendering for server-side rendering and cohesive theming through Tailwind v4 tokens.

Core Features & Use Cases

  • SSR-safe chart rendering using React with D3 path generation while ensuring no DOM mutations on the server.
  • Deterministic sizing and layout through explicit sizing hooks and ChartFrame integration.
  • Theming and token consistency via Tailwind v4 tokens and Biome-enforced design rules for charts.
  • Use Case: Build dashboards with deterministic revenue charts and interactive visuals that render identically on server and client.

Quick Start

Use this skill to scaffold an SSR-safe TanStack Start chart by wiring a LineChart component with deterministic initial width/height and Tailwind theme tokens for styling.

Frequently Asked Questions about tanstack-start-d3-charting

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render D3 charts safely with TanStack Start SSR?▼

D3 charts render safely with TanStack Start SSR by using React for component structure and D3 strictly for path generation. This prevents DOM mutations on the server, ensuring deterministic rendering without hydration mismatches.

How to apply Tailwind v4 theme tokens to D3 chart styling?▼

Tailwind v4 theme tokens apply to D3 chart styling by mapping design tokens directly to chart elements. This ensures visual consistency across frames and interactions while enforcing cohesive theming rules across your dashboard.

Can I use D3 for interactive dashboards in a TanStack Start React app?▼

Yes, you can use D3 for interactive dashboards in a TanStack Start React app. The framework supports building deterministic revenue charts and interactive visuals that render identically on both server and client.

What is deterministic sizing for SSR charts and why is it needed?▼

Deterministic sizing for SSR charts is establishing explicit width and height via ChartFrame and useChartDimensions hooks. It is needed to prevent layout shifts and ensure the server output matches the client layout exactly.

Why does my D3 chart break during server-side rendering in React?▼

D3 charts break during server-side rendering in React when D3 directly mutates the DOM, which is unavailable on the server. Restricting D3 to path generation while React manages the DOM ensures SSR safety.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
mattleonard16mattleonard16

d3-visualization

Create custom interactive D3.js charts with SVG rendering and ARIA labels.

Community
Intermediate
impact-initiativesimpact-initiatives

svelte-d3

Separate D3 geometry from Svelte 5 DOM rendering in SVG chart components.

Official
Intermediate
spqwspqw

observable-framework-lib-d3

Integrate D3.js for interactive data visualizations in Observable Framework projects.

Community
Intermediate