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

{
  "context": "Tests whether the agent uses Svelte 5 $effect for post-DOM side effects, $effect.pre for pre-DOM-update capture, $inspect for dev-mode debugging, standard onclick attribute syntax instead of on:click directive, and avoids event modifiers in favor of direct method calls on event objects.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "$effect for title update",
      "description": "document.title (or any reactive side effect running after DOM update) is set inside a $effect(() => { ... }) block, not a $: statement",
      "max_score": 12
    },
    {
      "name": "$effect.pre for scroll capture",
      "description": "The scroll height or scroll position is captured inside a $effect.pre(() => { ... }) block that runs before DOM updates",
      "max_score": 12
    },
    {
      "name": "No $: for side effects",
      "description": "No $: syntax is used for any side effect (logging, DOM manipulation, subscriptions, etc.)",
      "max_score": 8
    },
    {
      "name": "$inspect for debugging",
      "description": "If any debugging/logging of reactive state is present, it uses $inspect() rather than console.log",
      "max_score": 10
    },
    {
      "name": "onclick attribute syntax",
      "description": "Event handlers on DOM elements use the onclick attribute (e.g. onclick={handler}) rather than on:click directive",
      "max_score": 12
    },
    {
      "name": "No on: directive",
      "description": "No on:click, on:scroll, on:input, or any other on: event directive appears in the template",
      "max_score": 10
    },
    {
      "name": "No event modifier syntax",
      "description": "No |preventDefault, |stopPropagation, or other event modifier syntax appears; e.preventDefault() or e.stopPropagation() is called directly if needed",
      "max_score": 8
    },
    {
      "name": "Callback prop not dispatcher",
      "description": "The onpostclick callback is declared as a prop via $props(), not using createEventDispatcher",
      "max_score": 10
    },
    {
      "name": "$props() not export let",
      "description": "All component props use $props() destructuring; no export let appears",
      "max_score": 8
    },
    {
      "name": "lang=ts on script",
      "description": "The <script> block includes lang=\"ts\"",
      "max_score": 10
    }
  ]
}

evals

tile.json