---
name: tanstack-start-d3-charting
description: SSR-safe, designer-approved D3 charting for TanStack Start (React). D3 for math, React for rendering, Tailwind v4 tokens, Biome linting.
tools: []
tags: [viz, d3, tanstack-start, ssr, tailwind-v4, biome]
version: 1.0.0
---

# TanStack Start + D3 Charting (SSR-safe)

## Core rules
- TanStack Start supports Selective SSR per route (`ssr: true | "data-only" | false`).  [oai_citation:0‡TanStack](https://tanstack.com/start/latest/docs/framework/react/guide/selective-ssr?utm_source=chatgpt.com)
- Use D3 for **math/layout** (scales/shapes/format), not DOM mutation.
- Default time charts to **UTC** (`scaleUtc` + `utcFormat`) to reduce SSR/client mismatches.
- Theme via Tailwind v4 CSS-first tokens (`@theme`), and consume via CSS variables.

## Forbidden imports
Enforced via Biome `noRestrictedImports`:
- d3-selection
- d3-axis
- d3-transition
- d3-brush
- d3-zoom

(See `biome.json` snippet in this skill.)