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

{
  "context": "Tests whether the agent builds a Svelte 5 data table component using parameterized snippets for row rendering, the children/named snippet pattern with $props() and the Snippet type import, $state.raw() for API-fetched data, and correct TypeScript patterns throughout.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Parameterized snippet",
      "description": "Uses a snippet with a parameter to let the parent control per-row rendering, e.g. {#snippet row(item)} or similar pattern where the snippet accepts an argument",
      "max_score": 20
    },
    {
      "name": "Snippet type import",
      "description": "Imports the Snippet type from 'svelte' in the table component (import type { Snippet } from 'svelte')",
      "max_score": 10
    },
    {
      "name": "@render for snippet invocation",
      "description": "Uses {@render snippetName(args)} syntax to render snippets inside the component, not <slot>",
      "max_score": 10
    },
    {
      "name": "No <slot> usage",
      "description": "Does NOT use any <slot> or <slot name=...> elements — uses snippet props exclusively for composition",
      "max_score": 10
    },
    {
      "name": "$state.raw for fetched data",
      "description": "Uses $state.raw() (not plain $state()) to store the fetched rows/items list that comes from an API call or JSON import",
      "max_score": 15
    },
    {
      "name": "$props() not export let",
      "description": "No 'export let' appears anywhere — all props declared via $props() destructuring",
      "max_score": 10
    },
    {
      "name": "children or named snippet prop",
      "description": "The component declares snippet props (children or a named snippet) in its $props() destructuring with Snippet type annotations",
      "max_score": 10
    },
    {
      "name": "No on: event directive",
      "description": "Does NOT use on:click or any other on: event directives — uses onclick etc. attribute syntax",
      "max_score": 5
    },
    {
      "name": "lang=ts on scripts",
      "description": "All <script> blocks have lang=\"ts\"",
      "max_score": 5
    },
    {
      "name": "No $: reactive declarations",
      "description": "No $: syntax — uses $derived or $derived.by for any computed values",
      "max_score": 5
    }
  ]
}

evals

tile.json