Svelte 5 runes, component patterns, reactivity, and SvelteKit data loading best practices
99
99%
Does it follow best practices?
Impact
99%
1.11xAverage score across 10 eval scenarios
Passed
No known issues
Reactive state and derived values with runes
$state for cart items
100%
100%
$state.raw for catalog
58%
50%
$derived for simple total
100%
100%
$derived.by for complex logic
0%
100%
No plain let for reactive vars
100%
100%
No $: reactive declarations
100%
100%
$props() for inputs
100%
100%
No export let
100%
100%
lang=ts on script
0%
100%
Callback prop not dispatcher
100%
100%
Event handling and side effects
$effect for title update
100%
100%
$effect.pre for scroll capture
100%
100%
No $: for side effects
100%
100%
$inspect for debugging
100%
100%
onclick attribute syntax
100%
100%
No on: directive
100%
100%
No event modifier syntax
100%
100%
Callback prop not dispatcher
100%
100%
$props() not export let
100%
100%
lang=ts on script
0%
100%
$props() for page data
100%
100%
No export let in pages
100%
100%
$state for search input
100%
100%
$derived for filtered results
100%
100%
onclick not on:click
100%
100%
PageServerLoad type
100%
100%
error() for missing resource
100%
100%
PageData type on data prop
62%
100%
lang=ts on scripts
100%
100%
No $: reactive declarations
100%
100%
children snippet in MetricCard
100%
100%
Named snippet prop for header
100%
100%
$state.raw for API data
0%
100%
$state for filter inputs
100%
100%
$derived for filtered metrics
100%
100%
Callback prop for refresh
100%
100%
$props() for page data
100%
100%
No export let anywhere
100%
100%
No $: reactive declarations
100%
100%
lang=ts on all scripts
100%
100%
$props() for form data
100%
100%
No export let
100%
100%
$state for live inputs
100%
100%
$derived for word count
100%
100%
$derived for excerpt
100%
100%
No $: declarations
100%
100%
oninput not on:input
100%
100%
fail() for validation
100%
100%
redirect(303) on success
100%
100%
use:enhance on form
0%
100%
role=alert on errors
100%
100%
Two-way bindable props
$bindable() for two-way binding
100%
100%
$props() not export let
100%
100%
Callback prop not createEventDispatcher
100%
100%
$state() for internal state
100%
100%
No on: event directive
100%
100%
No event modifier syntax
100%
100%
lang=ts on all scripts
100%
100%
No $: reactive declarations
100%
100%
$derived for computed values
100%
100%
Parameterized snippet composition
Parameterized snippet
100%
100%
Snippet type import
100%
100%
@render for snippet invocation
100%
100%
No <slot> usage
100%
100%
$state.raw for fetched data
0%
100%
$props() not export let
100%
100%
children or named snippet prop
100%
100%
No on: event directive
100%
100%
lang=ts on scripts
100%
100%
No $: reactive declarations
100%
100%
$effect and $inspect debugging
$effect for side effects
100%
100%
$effect.pre for pre-DOM work
100%
100%
$inspect for debugging
0%
100%
No $: side-effect blocks
100%
100%
$props() not export let
100%
100%
$state() for reactive vars
100%
100%
No on: event directive
100%
100%
Callback prop not createEventDispatcher
100%
100%
lang=ts on scripts
100%
100%
$derived for computed values
100%
100%