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 a combination of Svelte 5 patterns together: $props() for page data and component props, $state/$state.raw for different reactivity needs, $derived for filtered data, snippet composition with children prop, callback props for events, and onclick attribute syntax.",
"type": "weighted_checklist",
"checklist": [
{
"name": "children snippet in MetricCard",
"description": "MetricCard.svelte uses a 'children' prop typed as Snippet (from 'svelte') for default body content, rendered with {@render children()}",
"max_score": 12
},
{
"name": "Named snippet prop for header",
"description": "MetricCard.svelte has an optional header snippet prop (typed as Snippet) rendered with {@render header()}, not a named <slot>",
"max_score": 10
},
{
"name": "$state.raw for API data",
"description": "The large metric dataset loaded from the API is stored using $state.raw() since it is replaced wholesale on each refresh, NOT using $state()",
"max_score": 12
},
{
"name": "$state for filter inputs",
"description": "Filter input values (search text, category dropdown) use $state() for reactive state",
"max_score": 10
},
{
"name": "$derived for filtered metrics",
"description": "The filtered/displayed metrics list uses $derived() or $derived.by() to compute from the filter inputs and data",
"max_score": 12
},
{
"name": "Callback prop for refresh",
"description": "MetricCard's refresh action uses a callback prop (e.g. onrefresh) via $props(), not createEventDispatcher",
"max_score": 8
},
{
"name": "$props() for page data",
"description": "The page component receives data via $props() (not export let data)",
"max_score": 10
},
{
"name": "No export let anywhere",
"description": "No export let appears in any .svelte file",
"max_score": 8
},
{
"name": "No $: reactive declarations",
"description": "No $: syntax appears in any file",
"max_score": 10
},
{
"name": "lang=ts on all scripts",
"description": "All <script> blocks include lang=\"ts\"",
"max_score": 8
}
]
}evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
skills
svelte-best-practices