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 Svelte 5 $effect for post-DOM side effects, $effect.pre for pre-DOM-update capture, $inspect for dev-mode debugging, standard onclick attribute syntax instead of on:click directive, and avoids event modifiers in favor of direct method calls on event objects.",
"type": "weighted_checklist",
"checklist": [
{
"name": "$effect for title update",
"description": "document.title (or any reactive side effect running after DOM update) is set inside a $effect(() => { ... }) block, not a $: statement",
"max_score": 12
},
{
"name": "$effect.pre for scroll capture",
"description": "The scroll height or scroll position is captured inside a $effect.pre(() => { ... }) block that runs before DOM updates",
"max_score": 12
},
{
"name": "No $: for side effects",
"description": "No $: syntax is used for any side effect (logging, DOM manipulation, subscriptions, etc.)",
"max_score": 8
},
{
"name": "$inspect for debugging",
"description": "If any debugging/logging of reactive state is present, it uses $inspect() rather than console.log",
"max_score": 10
},
{
"name": "onclick attribute syntax",
"description": "Event handlers on DOM elements use the onclick attribute (e.g. onclick={handler}) rather than on:click directive",
"max_score": 12
},
{
"name": "No on: directive",
"description": "No on:click, on:scroll, on:input, or any other on: event directive appears in the template",
"max_score": 10
},
{
"name": "No event modifier syntax",
"description": "No |preventDefault, |stopPropagation, or other event modifier syntax appears; e.preventDefault() or e.stopPropagation() is called directly if needed",
"max_score": 8
},
{
"name": "Callback prop not dispatcher",
"description": "The onpostclick callback is declared as a prop via $props(), not using createEventDispatcher",
"max_score": 10
},
{
"name": "$props() not export let",
"description": "All component props use $props() destructuring; no export let appears",
"max_score": 8
},
{
"name": "lang=ts on script",
"description": "The <script> block includes lang=\"ts\"",
"max_score": 10
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices