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
{
"context": "Tests whether the agent uses $effect() for post-DOM side effects, $effect.pre() for pre-DOM measurements, and $inspect() for reactive debugging — avoiding legacy $: side-effect blocks — while applying correct Svelte 5 patterns for props, state, and events.",
"type": "weighted_checklist",
"checklist": [
{
"name": "$effect for side effects",
"description": "Uses $effect(() => { ... }) for at least one side effect that responds to reactive state changes (e.g., updating document.title, syncing localStorage, triggering an animation)",
"max_score": 20
},
{
"name": "$effect.pre for pre-DOM work",
"description": "Uses $effect.pre(() => { ... }) for at least one operation that must capture or act on the DOM before it updates (e.g., capturing scroll height or element dimensions before a list change)",
"max_score": 15
},
{
"name": "$inspect for debugging",
"description": "Uses $inspect() on at least one reactive value for debugging purposes (not console.log)",
"max_score": 15
},
{
"name": "No $: side-effect blocks",
"description": "Does NOT use $: for side effects anywhere — no $: console.log(...), $: document.title = ..., or similar",
"max_score": 10
},
{
"name": "$props() not export let",
"description": "No 'export let' anywhere — all component props use $props() destructuring",
"max_score": 10
},
{
"name": "$state() for reactive vars",
"description": "All mutable state that should trigger re-renders uses $state(), not plain let",
"max_score": 10
},
{
"name": "No on: event directive",
"description": "Does NOT use on:click or other on: directives — uses onclick, oninput etc. attribute syntax",
"max_score": 5
},
{
"name": "Callback prop not createEventDispatcher",
"description": "Does NOT import createEventDispatcher — uses callback props for communicating events to parent if needed",
"max_score": 5
},
{
"name": "lang=ts on scripts",
"description": "All <script> blocks have lang=\"ts\"",
"max_score": 5
},
{
"name": "$derived for computed values",
"description": "Any values derived from state use $derived() or $derived.by(), not $: declarations",
"max_score": 5
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices