spences10/svelte-skills-kit129 installs
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.
How do I install this agent skill?
npx skills add https://github.com/spences10/svelte-skills-kit --skill layerchart-svelte5Is this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides documentation and code patterns for using LayerChart with Svelte 5. It is purely informational and contains no executable code or security risks.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
3/4 files flagged
What does this agent skill do?
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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/spences10/svelte-skills-kit/layerchart-svelte5">View layerchart-svelte5 on skillZs</a>