Agent-Skills.md

Agent Skills: Svelte LayerChart

Svelte LayerChart patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

UncategorizedID: spences10/svelte-skills-kit/svelte-layerchart

Repository

spences10/svelte-skills-kit
spences10
922

Install this agent skill to your local

pnpm dlx add-skill https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/svelte-layerchart

Skill Files

Browse the full folder contents for svelte-layerchart.

Download Skill

Loading file tree…

plugins/svelte-skills/skills/svelte-layerchart/SKILL.md

Skill Metadata

Name
svelte-layerchart
Description
"Svelte LayerChart patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes."

Svelte LayerChart

Docs: layerchart.com

Install

npm i layerchart d3-scale

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 })} - NOT let: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