Reviews Svelte components for idiomatic patterns, identifies anti-patterns carried over from React/Vue/Svelte 4, and suggests Svelte 5 refactorings. Use when writing or reviewing Svelte components, asking "is this idiomatic", "Svelte way", doing Svelte 5 migration, or encountering smells like: effect assigns state, prop copied to $state, global store by default, $bindable everywhere, clickable div, createEventDispatcher, export let, on:click, slot-shaped APIs, lifecycle-driven code, imperative DOM wiring, immutable-update ceremony, context value replacement, shadcn-svelte form structure, Field.* components, bits-ui form controls, or component APIs that hide ownership. This is the general-purpose entry point for Svelte component review; delegates to sveltekit for routes/load/actions/server concerns and to focused references for details.
100
100%
Does it follow best practices?
Impact
100%
1.12xAverage score across 3 eval scenarios
Passed
No known issues
Reactive cart: $derived totals, direct mutation, callback props
Order total is $derived
100%
100%
No $effect for derived values
100%
100%
Direct state mutation
100%
100%
No prop mirroring
100%
100%
Checkout callback prop
100%
100%
No createEventDispatcher
100%
100%
Svelte 5 props syntax
100%
100%
Event handler syntax
100%
100%
Keyed each block
100%
100%
Native button elements
100%
100%
Props typed
0%
100%
Wrapper component: svelte/elements, snippets, Svelte 5 syntax
Native button element
100%
100%
svelte/elements type used
100%
100%
Rest props spread
100%
100%
Default type='button'
100%
100%
Named Props type
100%
100%
$props() syntax
100%
100%
Snippet typed
100%
100%
@render for snippet
100%
100%
No $bindable on variant/loading
100%
100%
No on:click syntax
100%
100%
No createEventDispatcher
100%
100%
App-wide state: .svelte.ts class, context with Symbol, factory pattern
.svelte.ts file extension
100%
100%
Class with $state fields
41%
100%
No writable store
100%
100%
Factory exported (not singleton)
100%
100%
Arrow function methods
0%
100%
Symbol context key
100%
100%
setContext receives class instance
80%
100%
getContext in display component
100%
100%
$effect for auto-dismiss timer
50%
100%
No module-level mutable export
100%
100%
Svelte 5 syntax
100%
100%
d20109a
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.