ReddRadar
Agent skill
layerchart-svelte5
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
Install this agent skill to your Project
npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/layerchart-svelte5
SKILL.md
LayerChart Svelte 5
Docs: next.layerchart.com (NOT layerchart.com - that's Svelte 4)
Install
npm i layerchart@next d3-scale
CRITICAL: Use @next tag. Stable (1.x) is Svelte 4 only.
Quick Start
<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>
Core Patterns
- Tooltip:
{#snippet children({ data })}- NOTlet:data - Chart context:
{#snippet children({ context })} - Gradient:
{#snippet children({ gradient })} - Enable tooltip:
tooltip={{ mode: 'band' | 'bisect-x' }} - Type data:
{#snippet children({ data }: { data: MyType })}
Tooltip Modes
| Mode | Use Case |
|---|---|
band |
Bar charts (scaleBand) |
bisect-x |
Time-series area/line |
quadtree-x |
Area (nearest x) |
quadtree |
Scatter plots |
References
- full-patterns.md - Area, Bar, Pie, Calendar
- tooltip-modes.md - All modes
- graph-patterns.md - ForceGraph, zoom/pan
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
spences10/svelte-skills-kit
sveltekit-data-flow
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
spences10/svelte-skills-kit
sveltekit-structure
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
spences10/svelte-skills-kit
svelte-runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
spences10/svelte-skills-kit
svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
spences10/svelte-skills-kit
svelte-styling
spences10/svelte-skills-kit
svelte-template-directives
Didn't find tool you were looking for?