skills.rest
impact-initiatives
impact-initiativesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

svelte-d3

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

1|Updated May 13, 2026
Search Tags:#svelte#d3#svelte 5 runes#upstream porting#svg visualization#chart component review#responsive rendering
One-click install
npx skills add https://github.com/impact-initiatives/ana_app --skill svelte-d3-impact-initiatives
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-d3
Source: https://github.com/impact-initiatives/ana_app/tree/main/.claude/skills/svelte-d3
Command: npx skills add https://github.com/impact-initiatives/ana_app --skill svelte-d3-impact-initiatives

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prevents broken or non-idiomatic visualizations by enforcing safe Svelte 5 × D3 integration patterns and clear boundaries between geometry (D3) and DOM rendering (Svelte).

Core Features & Use Cases

  • Enforces D3-for-math only: use D3 for scales, shape/layout generators, and numeric utilities while rendering SVG/DOM exclusively with Svelte templates.
  • Provides Svelte 5–correct patterns: responsive sizing guidance (project-appropriate approach), margin conventions, and runes-based derived-state guidance.
  • Promotes project-consistent components and tokens: reuse existing primitives and project UI (axes, tooltips, legends) and apply repository color tokens for consistent styling.
  • Helps avoid upstream porting mistakes: highlights Svelte 4 → Svelte 5 differences when adapting from the svelte-d3 reference implementation.

Quick Start

Load this skill while porting or authoring a new .svelte chart component in the ANA codebase that uses D3 for geometry and renders everything with Svelte.

Frequently Asked Questions about svelte-d3

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

FAQPage Schema
How do I integrate D3 with Svelte 5 runes for SVG chart components?▼

To integrate D3 with Svelte 5, separate D3 geometry calculations from Svelte DOM rendering. Use D3 strictly for scales, shape generators, and numeric utilities, while rendering SVG elements exclusively through Svelte templates and runes for derived state.

Why does my D3 chart break when porting from Svelte 4 to Svelte 5?▼

D3 charts break during Svelte 4 to Svelte 5 porting due to D3 DOM manipulation conflicting with Svelte's reactivity. You must remove D3 DOM selections and transitions, relying entirely on Svelte 5 runes for reactive SVG rendering and state management.

What is the best way to handle responsive sizing for D3 SVG visualizations in Svelte?▼

The best way to handle responsive sizing for D3 SVG visualizations in Svelte is applying project-appropriate responsive sizing conventions alongside D3 margin conventions, maintaining clear boundaries between D3 layout math and Svelte DOM rendering.

Can I use D3 for DOM manipulation when building charts in Svelte 5?▼

No, you cannot use D3 for DOM manipulation when building charts in Svelte 5. The integration pattern strictly enforces D3 for math only, requiring all SVG and DOM rendering, including axes and tooltips, to be handled exclusively by Svelte templates.

How do I port upstream D3 reference code to Svelte 5 without breaking idiomatic patterns?▼

To port upstream D3 reference code to Svelte 5, replace D3 DOM manipulation with Svelte template rendering and adopt runes-based derived-state guidance. Highlighting Svelte 4 to Svelte 5 differences helps avoid common upstream porting mistakes.

Do I need to use specific UI primitives for Svelte D3 chart components?▼

Yes, you need to use project-consistent UI primitives like TooltipCard, LegendBadge, and standard axes for Svelte D3 chart components. Applying repository color tokens and existing primitives ensures consistent styling across visualization components.

Related Skills

Explore More Software Engineering Skills→
gnobletgnoblet

svelte-d3

Port D3-driven chart components to Svelte 5 with D3 for math and Svelte for DOM.

Community
Advanced
baasith6baasith6

responsive-testing

Capture screenshots of web applications at multiple viewport sizes to identify layout breakages.

Community
Intermediate
Sim-hub22Sim-hub22

resend-design-system

Provide React UI components and design tokens for Resend interfaces.

Community
Intermediate
hongmaple0820hongmaple0820
9

d3-viz

Transform data into interactive custom SVG visualizations with D3.js.

Community
Advanced