spences10/svelte-skills-kit

Overview

This skill provides Svelte 5 patterns and snippets for building LayerChart-based chart components with tooltips, gradients, highlights, and axis helpers. It bundles concise examples and recommended usage for Chart context access, tooltip snippet patterns, and tooltip modes optimized for different chart types. Use it to accelerate charts in Svelte 5 projects with LayerChart@next and d3-scale.

How this skill works

The skill exposes reusable Svelte snippet patterns you drop into <Chart> components: Chart context, Tooltip.Root snippets, Svg children like Area and Highlight, and gradient snippets. It relies on LayerChart@next and uses snippet blocks such as {#snippet children({ data })} for tooltip content and {#snippet children({ context })} to access chart internals. Tooltip modes are configurable via tooltip={{ mode: '...' }}.

When to use it

• Building time-series area or line charts that need bisect-x tooltips.
• Creating bar charts that use band tooltips and scaleBand layouts.
• Adding interactive scatter plots that require quadtree nearest-point lookups.
• Implementing reusable Svelte 5 chart components with gradients and highlights.
• Needing typed data inside tooltip snippets for IDE/type safety.

Best practices

• Install LayerChart with the @next tag (npm i layerchart@next d3-scale) — stable 1.x targets Svelte 4.
• Use {#snippet children({ data })} for tooltip rendering rather than let:data to match Svelte 5 snippet patterns.
• Pick tooltip mode to match geometry: 'band' for bars, 'bisect-x' for time series, 'quadtree' variants for nearest-point interactions.
• Type snippet props when using TypeScript: {#snippet children({ data }: { data: MyType })}.
• Keep Svg children simple (Area, Highlight) and provide classes for fills/gradients to separate style from logic.

Example use cases

• A Svelte 5 dashboard area chart with bisect-x tooltips and a gradient fill.
• Bar chart component using tooltip mode 'band' and scaleBand to snap tooltips to bars.
• Scatter plot with 'quadtree' tooltip mode to show nearest point details on hover.
• Reusable Chart wrapper exposing context via {#snippet children({ context })} to build custom axes or legends.
• Annotated time-series showing highlights for selected points with <Highlight points /> inside Svg.