Stats
Actions
Tags
From svelte-skills
Provides Svelte 5 patterns for LayerChart charts with tooltip snippets, Chart context access, gradients, highlights, and axes. Use for interactive chart components.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-skills:layerchart-svelte5The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Docs: **next.layerchart.com** (NOT layerchart.com - that's Svelte 4)
Docs: next.layerchart.com (NOT layerchart.com - that's Svelte 4)
npm i layerchart@next d3-scale
CRITICAL: Use @next tag. Stable (1.x) is Svelte 4 only.
<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
<Svg><Area class="fill-primary/20" /><Highlight points /></Svg>
<Tooltip.Root>{#snippet children({ data })}{data.value}{/snippet}</Tooltip.Root>
</Chart>
{#snippet children({ data })} - NOT let:data{#snippet children({ context })}{#snippet children({ gradient })}tooltip={{ mode: 'band' | 'bisect-x' }}{#snippet children({ data }: { data: MyType })}| Mode | Use Case |
|---|---|
band | Bar charts (scaleBand) |
bisect-x | Time-series area/line |
quadtree-x | Area (nearest x) |
quadtree | Scatter plots |
npx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsGuides building interactive D3.js data visualizations with custom layouts, scales, axes, transitions for networks, geo maps in vanilla JS, React, Vue, Svelte.
Guides creation of sophisticated, interactive data visualisations using d3.js. Covers core workflow, integration patterns, and when to use d3.js vs alternatives.
Generates AntV G2 v5 chart code for bar, line, pie, scatter, area, and other data visualizations in spec mode.