svelte-skills-kit

Guide to spences10's Claude Code ecosystem tools. Use when user asks which tool to use, how tools relate, or needs help choosing between MCP servers, skills, or CLIs.

Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.

Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.

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 runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.

Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.

Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.

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().

SvelteKit remote functions guidance. Use for query(), form(), command(), and prerender() patterns in .remote.ts files.

SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.