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-1/

{
  "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

criteria.json

task.md

tile.json