KS
Killer-Skills

tanstack-start-d3-charting — tanstack-start-d3-charting setup guide tanstack-start-d3-charting setup guide, how to use tanstack-start-d3-charting with D3, tanstack-start-d3-charting vs other charting libraries, installing tanstack-start-d3-charting, tanstack-start-d3-charting tutorial for developers, what is tanstack-start-d3-charting, tanstack-start-d3-charting alternative solutions, tanstack-start-d3-charting and SSR best practices

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing advanced SSR-safe charting capabilities with D3 tanstack-start-d3-charting is a skill that combines TanStack Start with D3 charting, providing a framework for building server-side rendered (SSR) charts with precise control over data visualization.

Features

Supports Selective SSR per route via TanStack Start
Utilizes D3 for math and layout operations, avoiding DOM mutation
Defaults time charts to UTC using scaleUtc and utcFormat
Integrates with Tailwind v4 CSS-first tokens for theming
Enables consumption of v4 CSS tokens for customized styling

# Core Topics

tanstack-start-d3-charting setup guide how to use tanstack-start-d3-charting with D3 tanstack-start-d3-charting vs other charting libraries installing tanstack-start-d3-charting tanstack-start-d3-charting tutorial for developers what is tanstack-start-d3-charting
AndyMarigoldLabs AndyMarigoldLabs
[0]
[0]
Updated: 3/6/2026

↓ Quality Score

Top 5%
30
Excellent
Based on code quality & docs
Installation
SYS Universal Install (Auto-Detect)
Cursor IDE Windsurf IDE VS Code IDE
> npx killer-skills add AndyMarigoldLabs/continuous-funding/tanstack-start-d3-charting

Agent Capability Analysis

The tanstack-start-d3-charting MCP Server by AndyMarigoldLabs is an open-source Categories.community integration for Claude and other AI agents, enabling seamless task automation and capability expansion. Optimized for tanstack-start-d3-charting setup guide, how to use tanstack-start-d3-charting with D3, tanstack-start-d3-charting vs other charting libraries.

Ideal Agent Persona

Perfect for Frontend Agents needing advanced SSR-safe charting capabilities with D3

Core Value

Empowers agents to create SSR-safe charts using D3, supporting selective SSR per route and defaulting to UTC for time charts via scaleUtc and utcFormat, all while utilizing Tailwind v4 CSS-first tokens for theming

↓ Capabilities Granted for tanstack-start-d3-charting MCP Server

Generating SSR-safe line charts with selective SSR per route
Creating time charts with automatic UTC defaulting
Customizing chart themes using Tailwind v4 CSS-first tokens

! Prerequisites & Limits

  • Requires TanStack Start framework
  • Limited to D3 for math/layout, not DOM mutation
  • Dependent on Tailwind v4 CSS-first tokens for theming
Project
SKILL.md
688 B
.cursorrules
1.2 KB
package.json
240 B
Ready
UTF-8

# Tags

[No tags]
SKILL.md
Readonly

TanStack Start + D3 Charting (SSR-safe)

Core rules

  • TanStack Start supports Selective SSR per route (ssr: true | "data-only" | false). oai_citation:0‡TanStack
  • 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.)

Related Skills

Looking for an alternative to tanstack-start-d3-charting or building a Categories.community AI Agent? Explore these related open-source MCP Servers.

View All

widget-generator

Logo of f
f

widget-generator is an open-source AI agent skill for creating widget plugins that are injected into prompt feeds on prompts.chat. It supports two rendering modes: standard prompt widgets using default PromptCard styling and custom render widgets built as full React components.

★ 149.6k
⑂ 0
Design

chat-sdk

Logo of lobehub
lobehub

chat-sdk is a unified TypeScript SDK for building chat bots across multiple platforms, providing a single interface for deploying bot logic.

★ 73.0k
⑂ 0
Communication

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
Communication

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
Communication