メニュー
Build Svelte LayerChart components. Use for tooltip snippets, Chart context access, gradients, highlights, axes, and Svelte 5 snippet patterns.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/spences10/skills --skill svelte-layerchartコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | svelte-layerchart |
| description | Build Svelte LayerChart components. Use for tooltip snippets, Chart context access, gradients, highlights, axes, and Svelte 5 snippet patterns. |
| metadata | {"last_updated":"2026-05-31","verified_against":"Svelte 5 official docs and sveltejs/svelte#18282"} |
Docs: layerchart.com
npm i layerchart d3-scale
<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>
{#snippet children({ data })} - NOT let:data{#snippet children({ context })}{#snippet children({ gradient })}tooltip={{ mode: 'band' | 'bisect-x' }}{#snippet children({ data }: { data: MyType })}| Mode | Use Case |
|---|---|
band | Bar charts (scaleBand) |
bisect-x | Time-series area/line |
quadtree-x | Area (nearest x) |
quadtree | Scatter plots |