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 implements a Svelte 5 color picker component correctly using $bindable() for two-way prop binding, $props() instead of export let, callback props instead of createEventDispatcher, and $state() for internal reactive state — all with TypeScript.",
"type": "weighted_checklist",
"checklist": [
{
"name": "$bindable() for two-way binding",
"description": "The child component uses $bindable() to declare the prop that supports bind:value from the parent (e.g., `let { value = $bindable(...) } = $props()`)",
"max_score": 20
},
{
"name": "$props() not export let",
"description": "No 'export let' appears anywhere in the component files — all props use $props() destructuring",
"max_score": 15
},
{
"name": "Callback prop not createEventDispatcher",
"description": "Does NOT import or use createEventDispatcher — uses a prop function (e.g., onchange, onselect) for communicating events to the parent",
"max_score": 15
},
{
"name": "$state() for internal state",
"description": "Internal reactive variables (e.g., open/closed panel, hovered swatch) use $state(), not plain let",
"max_score": 10
},
{
"name": "No on: event directive",
"description": "Does NOT use on:click, on:input, or any other on: directive — uses onclick, oninput etc. attribute syntax instead",
"max_score": 10
},
{
"name": "No event modifier syntax",
"description": "Does NOT use on:click|preventDefault or similar event modifier pipe syntax — calls e.preventDefault() directly if needed",
"max_score": 10
},
{
"name": "lang=ts on all scripts",
"description": "Every <script> block has lang=\"ts\" attribute",
"max_score": 5
},
{
"name": "No $: reactive declarations",
"description": "No $: syntax appears anywhere — uses $derived or $derived.by instead for any computed values",
"max_score": 10
},
{
"name": "$derived for computed values",
"description": "Any computed/derived value (e.g., hex display string, luminance, contrast label) uses $derived() or $derived.by()",
"max_score": 5
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices