spences10/svelte-skills-kit
10 skills2.9k installs920 starsGitHub
Install
npx skills add https://github.com/spences10/svelte-skills-kitSkills in this repo
1Sveltekit Structuresveltekit-structure is a Svelte Skills Kit reference for SvelteKit project layout, routing, layouts, error handling, pending UI, and hydration inside AI coding agents. The skill documents file types including +page.svelte for pages, +layout.svelte for wrappers, +error.svelte for error boundaries, and +server.ts for API endpoints, with route examples such as src/routes/about/+page.svelte and dynamic src/routes/posts/[id]/+page.svelte paths. Developers reach for sveltekit-structure when scaffolding routes, nesting layouts, wiring svelte:boundary error UI, or clarifying SSR behavior during feature work. Guidance stays aligned to SvelteKit file naming so agents generate valid route trees instead of generic SPA patterns.758installs2Svelte Runessvelte-runes is a frontend agent skill in spences10/svelte-skills-kit focused on Svelte 5 runes-based reactivity for new components and migrations away from legacy store patterns. It helps agents apply $state for mutable component state, $derived for computed values, and $effect for side effects without the subtle pitfalls of pre-runes stores and manual subscriptions. Developers reach for svelte-runes when upgrading SvelteKit apps, building component libraries on Svelte 5, or when agents generate reactive UI logic that must compile against runes semantics. The skill fits feature work where derived data, local UI state, and effect cleanup must stay idiomatic after a Svelte 4 store refactor. Use it during component authoring, runes migration pull requests, and library APIs that expose reactive props consistently. Agents should prefer runes-native patterns over writable stores unless interoperability requires legacy APIs. The skill aligns with Svelte 5 compiler expectations so agents do not reintroduce `$:` labels or store boilerplate that fight the new reactivity model during incremental upgrades.528installs3Sveltekit Data Flowsveltekit-data-flow is a SvelteKit-focused agent skill from svelte-skills-kit that guides wiring loaders, actions, forms, and server endpoints so pages fetch, mutate, and cache data correctly. It covers the full SvelteKit request lifecycle across server-side rendering, client-side navigation, and edge deployments where load functions, form actions, and +server.ts handlers must stay consistent. Developers reach for it when data flashes on navigation, mutations fail silently, or cache invalidation breaks between SSR and CSR modes. The skill emphasizes correct patterns for progressive enhancement with native forms, typed load dependencies, and action redirects rather than ad-hoc fetch calls scattered through components.374installs4Sveltekit Remote Functionssveltekit-remote-functions is a Svelte-focused agent skill from spences10/svelte-skills-kit that documents SvelteKit's experimental remote function patterns for type-safe server calls. Install with `npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions`. The skill specifies *.remote.ts naming, maps one-time actions to command(), repeated reads to query(), and forms to form(), with Valibot or Zod validation via StandardSchemaV1 and JSON-serializable arguments. It notes getRequestEvent() for cookies and headers, query().refresh() for no-flicker updates, and restrictions such as avoiding src/lib/server placement. Reach for sveltekit-remote-functions when building SvelteKit features that need server execution without maintaining parallel REST endpoints and client wrappers.372installs5Svelte Componentssvelte-components is a Claude Code skill from spences10/svelte-skills-kit for authoring reusable Svelte UI with correct props, events, accessibility, and library integration. The skill documents Bits UI, Ark UI, and Melt UI setup, web component compilation via customElement, and advanced form patterns such as the HTML form attribute for inputs outside a form wrapper. Three reference guides cover component libraries, web components, and form handling, with guidance verified against Svelte 5 official docs as of 2026-05-14. Reach for svelte-components when implementing product UI slices, extension panels, or lightweight mobile shells where you need consistent Svelte component architecture instead of ad hoc markup.307installs6Svelte DeploymentGuides agents through shipping SvelteKit applications: choosing adapters, configuring Vercel, Netlify, Cloudflare, or Node hosts, setting environment variables, validating SSR and prerender behavior, and running pre-launch production build checks for reliable releases.199installs7Ecosystem GuideTeaches agents how to navigate the Svelte and SvelteKit ecosystem: when to use official packages versus community libraries, how Svelte 5 runes differ from legacy patterns, and which adapters fit common hosting targets. Reduces costly wrong-tool picks during scaffolding, refactors, and feature delivery.166installs8Svelte Template Directivessvelte-template-directives is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.95installs9Svelte Layerchartsvelte-layerchart is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.60installs10Svelte Stylingsvelte-styling is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.59installs