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/majiayu000/claude-skill-registry/tree/main/skills/data/layerchart-svelte5
SKILL.md
LayerChart Svelte 5
Use next.layerchart.com docs (NOT layerchart.com - that's Svelte 4).
Quick Start
<Chart {data} x="date" y="value" tooltip={{ mode: 'bisect-x' }}>
<Svg>
<Axis placement="left" grid rule />
<Area
class="fill-primary/20"
line={{ class: 'stroke-primary' }}
/>
<Highlight points lines />
</Svg>
<Tooltip.Root>
{#snippet children({ data })}
<Tooltip.Header>{data.date}</Tooltip.Header>
<Tooltip.Item label="Value" value={data.value} />
{/snippet}
</Tooltip.Root>
</Chart>
Core Patterns
- Tooltip:
{#snippet children({ data })}- NOTlet:data - Chart context:
{#snippet children({ context })} - Gradient:
{#snippet children({ gradient })} - Must enable:
tooltip={{ mode: 'band' | 'bisect-x' | 'quadtree' }}
Tooltip Modes
| Mode | Use Case |
|---|---|
band |
Bar charts (scaleBand) |
bisect-x |
Time-series area/line |
quadtree-x |
Area (nearest x) |
quadtree |
Scatter plots |
Type the Snippet
{#snippet children({ data }: { data: MyDataType })}
References
- references/full-patterns.md - All patterns
- references/tooltip-modes.md - Mode details
- Clone:
git clone --branch next https://github.com/techniq/layerchart.git
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?