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

{
  "context": "Tests whether the agent uses Svelte 5 runes correctly within a SvelteKit form page: $props() for form data, $state for live input values, $derived/$derived.by for word count and excerpt, oninput event attributes (not on:input), fail() for errors, redirect(303) on success, and use:enhance.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "$props() for form data",
      "description": "The page component receives form action data via $props() (e.g., let { form } = $props()), NOT export let form",
      "max_score": 10
    },
    {
      "name": "No export let",
      "description": "No export let appears anywhere in +page.svelte",
      "max_score": 8
    },
    {
      "name": "$state for live inputs",
      "description": "The reactive input values used for the live preview (name, message, category) use $state(), not plain let",
      "max_score": 10
    },
    {
      "name": "$derived for word count",
      "description": "The word count is computed using $derived() or $derived.by() from the message state, not $: or a plain function call",
      "max_score": 12
    },
    {
      "name": "$derived for excerpt",
      "description": "The character-limited excerpt (first 100 chars) is computed using $derived() from the message state, not $: or a plain function call",
      "max_score": 10
    },
    {
      "name": "No $: declarations",
      "description": "No $: reactive declarations appear anywhere in the page component",
      "max_score": 10
    },
    {
      "name": "oninput not on:input",
      "description": "Input/textarea event handlers use oninput attribute syntax, not on:input directive",
      "max_score": 8
    },
    {
      "name": "fail() for validation",
      "description": "Validation failures in the server action return fail(status, data) from '@sveltejs/kit'",
      "max_score": 8
    },
    {
      "name": "redirect(303) on success",
      "description": "Successful submission uses redirect(303, '/feedback/confirmation') from '@sveltejs/kit'",
      "max_score": 8
    },
    {
      "name": "use:enhance on form",
      "description": "The <form> element has use:enhance applied for progressive enhancement",
      "max_score": 8
    },
    {
      "name": "role=alert on errors",
      "description": "Error messages include role=\"alert\" for screen reader accessibility",
      "max_score": 8
    }
  ]
}

evals

tile.json