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 for reactive state management: $state for mutable values, $state.raw for wholesale-replaced data, $derived for computed expressions, $derived.by for multi-step derived logic, and avoids Svelte 4 legacy patterns like plain let or $: declarations.",
"type": "weighted_checklist",
"checklist": [
{
"name": "$state for cart items",
"description": "Cart item state (items, quantities, or cart array) is declared with $state(), not a plain let",
"max_score": 12
},
{
"name": "$state.raw for catalog",
"description": "The large product catalog / inventory input that is only ever replaced wholesale is stored or handled using $state.raw() rather than $state()",
"max_score": 12
},
{
"name": "$derived for simple total",
"description": "A simple computed value (e.g. total price or item count) uses $derived(expression) rather than $: or a function call",
"max_score": 10
},
{
"name": "$derived.by for complex logic",
"description": "A computed value requiring multi-statement logic (e.g. filtering, reducing cart items) uses $derived.by(() => { ... })",
"max_score": 10
},
{
"name": "No plain let for reactive vars",
"description": "No reactive variable (one that changes and should trigger UI updates) is declared with a plain let — all mutable reactive values use $state or $derived",
"max_score": 10
},
{
"name": "No $: reactive declarations",
"description": "No $: syntax appears anywhere in the component for derived values or side effects",
"max_score": 10
},
{
"name": "$props() for inputs",
"description": "Component props (product list, max items limit, checkout callback) are declared using $props() with destructuring, not export let",
"max_score": 10
},
{
"name": "No export let",
"description": "No export let declarations appear in the component",
"max_score": 8
},
{
"name": "lang=ts on script",
"description": "The <script> block includes lang=\"ts\"",
"max_score": 8
},
{
"name": "Callback prop not dispatcher",
"description": "The checkout callback is received as a prop function (e.g. let { oncheckout } = $props()) rather than dispatched via createEventDispatcher",
"max_score": 10
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices