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 runes correctly within a SvelteKit form page: $props() for form data, $state for live input values, $derived/$derived.by for word count and excerpt, oninput event attributes (not on:input), fail() for errors, redirect(303) on success, and use:enhance.",
"type": "weighted_checklist",
"checklist": [
{
"name": "$props() for form data",
"description": "The page component receives form action data via $props() (e.g., let { form } = $props()), NOT export let form",
"max_score": 10
},
{
"name": "No export let",
"description": "No export let appears anywhere in +page.svelte",
"max_score": 8
},
{
"name": "$state for live inputs",
"description": "The reactive input values used for the live preview (name, message, category) use $state(), not plain let",
"max_score": 10
},
{
"name": "$derived for word count",
"description": "The word count is computed using $derived() or $derived.by() from the message state, not $: or a plain function call",
"max_score": 12
},
{
"name": "$derived for excerpt",
"description": "The character-limited excerpt (first 100 chars) is computed using $derived() from the message state, not $: or a plain function call",
"max_score": 10
},
{
"name": "No $: declarations",
"description": "No $: reactive declarations appear anywhere in the page component",
"max_score": 10
},
{
"name": "oninput not on:input",
"description": "Input/textarea event handlers use oninput attribute syntax, not on:input directive",
"max_score": 8
},
{
"name": "fail() for validation",
"description": "Validation failures in the server action return fail(status, data) from '@sveltejs/kit'",
"max_score": 8
},
{
"name": "redirect(303) on success",
"description": "Successful submission uses redirect(303, '/feedback/confirmation') from '@sveltejs/kit'",
"max_score": 8
},
{
"name": "use:enhance on form",
"description": "The <form> element has use:enhance applied for progressive enhancement",
"max_score": 8
},
{
"name": "role=alert on errors",
"description": "Error messages include role=\"alert\" for screen reader accessibility",
"max_score": 8
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices