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

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

tile.json