spences10/svelte-layerchart
plugins/svelte-skills/skills/svelte-layerchart/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add spences10/svelte-skills-kit svelte-layerchartInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 7:23 AM9.6s4 files scanned
SKILL.md
- 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 })}- 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
Related Skills
spences10/sveltekit-structure
tools
VerifiedTrustedCommunity
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
75SKILL.mdUpdated Apr 25, 2026
spences10/sveltekit-remote-functions
databases
VerifiedTrustedCommunity
SvelteKit remote functions guidance. Use for query(), form(), command(), and prerender() patterns in .remote.ts files.
75SKILL.mdUpdated Apr 25, 2026
spences10/sveltekit-data-flow
tools
VerifiedTrustedCommunity
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().
75SKILL.mdUpdated Apr 25, 2026
spences10/svelte-template-directives
tools
VerifiedTrustedCommunity
Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.
75SKILL.mdUpdated Apr 25, 2026