My Svelte 5 & SvelteKit Essentials

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.

Bluesky post

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

---

▶ Interactive feature — view on fubits.dev

---

Timeline feature based on LayerChart (next)

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: the vite-plugin-svelte-inspector - click on any component in the Browser and jump to the section in the IDE

Other essentials

• Oxlint is really powerful but doesn't fully support .svelte files yet. So I'm running a mixed Oxlint/Eslint setup with this config
  • don't forget that you need the oxc extension for your IDE
• 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-style
    • playwright (less so for testing, but for forcing Claude to validate its work in the browser)
  • set of CSS skills like code-style-css css-nesting and css-subgrid
  • set of Svelte-specific skills for tools like:
    • code-style-svelte
    • composition-svelte (component composition patterns)
    • vitest, storybook and testing-svelte
    • migration-svelte-5 - Svelte 4 -> Svelte 5 migration skill
  • a more generic migration skill
  • a validate routine and a more lightweight validate-file skill 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)
  • editing and doc-component skills to enforce more sparse and focussed prose (comments, documentation, Svelte component docs)
• fubits1/ronin-skills
  • generic agentic skills that enforce particular behaviours like discipline, before-you-act, and done
  • a fresh, polished update-skills meta-skill (e.g. feed it your MEMORY.md and 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 asshole skill of Bluesky fame. Trust me, you want this.

Official / Other Skills

• Official guidelines & Skills from the Svelte team (incl. the famous MCP and the autofixer subagent)
  • 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 mighty grill-with-docs (which I force Claude to apply to any review, plan or doc)
• more often than not the caveman skill 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 .env files 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