CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/svelte-best-practices

Svelte 5 runes, component patterns, reactivity, and SvelteKit data loading best practices

99

1.11x
Quality

99%

Does it follow best practices?

Impact

99%

1.11x

Average score across 10 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-3/

{
  "context": "Tests whether the agent correctly combines SvelteKit server-side data loading with Svelte 5 runes: $props() for page data (not export let), $state for reactive local state, $derived for computed values, onclick for event handlers (not on:click), and proper error handling in load functions.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "$props() for page data",
      "description": "Page components receive data via let { data } = $props() (or let { data }: { data: PageData } = $props()), NOT export let data",
      "max_score": 12
    },
    {
      "name": "No export let in pages",
      "description": "No export let appears in any +page.svelte file",
      "max_score": 10
    },
    {
      "name": "$state for search input",
      "description": "The search/filter input value on the listing page uses $state() for reactive state, not a plain let",
      "max_score": 12
    },
    {
      "name": "$derived for filtered results",
      "description": "The filtered recipe list uses $derived() or $derived.by() to compute filtered results from the search term and data, not $: reactive declarations",
      "max_score": 12
    },
    {
      "name": "onclick not on:click",
      "description": "Event handlers on elements use onclick={handler} attribute syntax, not on:click={handler} directive",
      "max_score": 10
    },
    {
      "name": "PageServerLoad type",
      "description": "Load functions are typed as PageServerLoad imported from './$types'",
      "max_score": 8
    },
    {
      "name": "error() for missing resource",
      "description": "The detail page load function throws error() from '@sveltejs/kit' when the recipe is not found",
      "max_score": 10
    },
    {
      "name": "PageData type on data prop",
      "description": "The data prop in page components is typed using PageData imported from './$types'",
      "max_score": 8
    },
    {
      "name": "lang=ts on scripts",
      "description": "All <script> blocks in .svelte files include lang=\"ts\"",
      "max_score": 8
    },
    {
      "name": "No $: reactive declarations",
      "description": "No $: syntax appears anywhere in any component for derived values or side effects",
      "max_score": 10
    }
  ]
}

evals

tile.json