Started to feel like I'm gatekeeping it so I'll rather just share the draft: Last fall I started a opinionated Svelte 5 onboarding flow / roadmap. Plan was to translate it into an interactive (with links and more details) over Xmas but I had to take a hard break. I'll probably go for it in February
What & Why: Work, Work, Work
I don’t get to blog much currently but I get to work a lot with Svelte (4 / 5) this year, and I actually maintain some resources (which I think are useful). Hence, this note is an ongoing maintained collection of my own resources and other key utils and links for working with Svelte 5 & SvelteKit.
Half of my real work is code archeology so some of my picks are biased towards large legacy code bases.
Svelte 5 & SvelteKit
Svelte News
Maybe you know already - I’m running a Svelte News feed (incl. RSS) and a general collection of news sources for all things Svelte & SvelteKit.
Svelte 5 & SvelteKit Onboarding Guide
Last fall I drafted a Svelte 5 & SvelteKit onboarding guide for my new job.
Instead of gatekeeping it, I decided to publish an interactive version (with svelte-flow) which I frequently update: Svelte 5 & SvelteKit onboarding guide
Svelte 5 & SvelteKit Milestones
If you’re interested in the velocity of Svelte 5 & SvelteKit development or need an overview of significant milestones, I’m running a tracker with SveltePlot here: Svelte 5 & SvelteKit milestones
Tooling
Can’t stress it often enough: my 3 + 1 essential tools for any Svelte project are:
- svelte-inspect-value - a DevTools-like pane to log any reactive value you feed it
- svelte-render-scan - visually highlights any DOM re-renders
- sveltekit-svg - Vite plugin that allows to import off-the-shelf SVGs as components
- (+1) - built-in in
@sveltejs/vite-plugin-svelte: thevite-plugin-svelte-inspector- click on any component in the Browser and jump to the section in the IDE
Other essentials
Oxlintis really powerful but doesn’t fully support.sveltefiles yet. So I’m running a mixed Oxlint/Eslint setup with this config- don’t forget that you need the
oxcextension for your IDE
- don’t forget that you need the
Knip- essential for any web development project (fixed part of my validation routine); comes with an MCP and IDE extensions- IDE setup: many IDEs allow to enable custom file nesting and file / tab labelling settings. I presented some during last year’s Advent of Svelte and shared my config in the entry (but here’s the gist).
- Mock Service Worker: MSW is insanely useful for mocking all kinds of APIs (incl. WebSocket and even Cloudflare Workers); makes it easy to e.g. decouple Storybook testing from any backend; but also helpful for working on the frontend while the backend team is busy
- brand-new community plugin / guidance for SvelteKit
- Storybook with Svelte CSF (Component Story Format) - useful far beyond mere component development: you can actually run Stories as Vitest “smoke tests”; combine with MSW (see above ☝️); deployable without the overhead (e.g. a backend)
- Polypane - absolute must-have browser for any Frontend Dev / Web developer / PO / UX Designer etc. True time-saver. Comes with 1st-class support from Kilian.
Skills
Part of my work is migrating a large Svelte 4 SPA to Svelte 5 (and SvelteKit at some point). After surviving through some other migrations (SvelteKit -> Astro; Astro 4 -> Astro 6), I started consolidating reoccuring tasks (and angry prompts) into a set of Agentic skills:
My Skills
- fubits1/svelte-skills
- set of frontend-specific skills like
pixel-perfect(enforcing before/after measurements in the browser)code-styleplaywright(less so for testing, but for forcing Claude to validate its work in the browser)
- set of CSS skills like
code-style-csscss-nestingandcss-subgrid - set of Svelte-specific skills for tools like:
code-style-sveltecomposition-svelte(component composition patterns)vitest,storybookandtesting-sveltemigration-svelte-5- Svelte 4 -> Svelte 5 migration skill
- a more generic
migrationskill - a
validateroutine and a more lightweightvalidate-fileskill which also comes with a set of TS-based OS-agnostic (thanks dax!) lint task helpers for agents (oxlint, eslint, svelte-check, knip, vitest, storybook testing) editinganddoc-componentskills to enforce more sparse and focussed prose (comments, documentation, Svelte component docs)
- set of frontend-specific skills like
- fubits1/ronin-skills
- generic agentic skills that enforce particular behaviours like
discipline,before-you-act, anddone - a fresh, polished
update-skillsmeta-skill (e.g. feed it yourMEMORY.mdand make it create or update skills) - optional hooks (
no-bash; comes with a skill) that prevent Claude Code from ignoring its own tooling when reaching for Bash - my
assholeskill of Bluesky fame. Trust me, you want this.
- generic agentic skills that enforce particular behaviours like
Official / Other Skills
- Official guidelines & Skills from the Svelte team (incl. the famous MCP and the
autofixersubagent)- also star the Repo (sveltejs/ai-tools) and please provide feedback if you notice any gaps / shortcomings
- for Svelte 5 and SvelteKit-specific tasks, check out Scott Spence’s well-maintained collection
- for comprehensive guidance (incl. skills) on testing Svelte & SvelteKit check Scott’s Sveltest.
- what started with
grill-me, has evolved to a mightygrill-with-docs(which I force Claude to apply to any review, plan or doc) - more often than not the
cavemanskill is actually helpful - useful to keep track of what Claude skipped: dex.rip for local JSON-based task management for Agents; comes with skills
Watchlist / Backlog
things I haven’t tested yet / extensivly
(both from Svelte maintainer baseballyama)
- baseballyama/svelte-shaker - dead code removal at build (!) time
- baseballyama/rsvelte - Rust-based tooling for Svelte 5 (incl. lower-level APIs)
- varlock.env - encrypted schema-based
.envfiles for Vite projects (can’t wait to see how it vibes with SvelteKit’s new .env handling); comes with skills - any of the OpenAPI-to-TypeScript-with-CodeGen approaches
- Michael-Obele/sveltekit-api-gen - OpenAPI specs generator for SvelteKit
- TinyBase - local-first data store & sync engine with 1st class support for Svelte
- pimatis/svelte-doctor - opinionated codebase analyser / checker for Svelte
- mochi.fast - a Bun-based SSR framework for Svelte (by Svelte maintainer & ambassador Stanislav Khromov)
- fast-check.dev - property-based testing
- fiberplane/drift - docs-based anti-drift; comes with skills
- antfu/tsnapi - API snapshot for detecting drift
- fallow-codebase-intelligence - JS/TS codebase “intelligence” GitHub action
more to come