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

sveltekit-patterns.jsonverifiers/

{
  "instruction": "Use SvelteKit load functions, form actions, and Svelte 5 $props() for page data",
  "relevant_when": "Agent builds a SvelteKit application with data loading or form handling",
  "context": "SvelteKit uses +page.server.ts load functions for server-side data fetching and form actions for mutations. In Svelte 5, page components receive data via $props() (not export let). Forms use use:enhance for progressive enhancement, fail() for validation errors, and redirect(303) on success.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/svelte-best-practices/SKILL.md",
      "tile": "tessl-labs/svelte-best-practices@0.1.4"
    }
  ],
  "checklist": [
    {
      "name": "load-function-in-server-file",
      "rule": "Agent creates +page.server.ts with typed load functions (PageServerLoad from './$types') for server-side data fetching",
      "relevant_when": "Agent builds SvelteKit pages that need data"
    },
    {
      "name": "page-data-via-$props",
      "rule": "Agent receives page data using let { data }: { data: PageData } = $props() in Svelte 5 (not export let data)",
      "relevant_when": "Agent creates SvelteKit page components in Svelte 5"
    },
    {
      "name": "form-actions-for-mutations",
      "rule": "Agent uses SvelteKit form actions with fail() for errors and redirect(303) on success",
      "relevant_when": "Agent implements form submissions in SvelteKit"
    },
    {
      "name": "use-enhance-on-forms",
      "rule": "Agent imports enhance from '$app/forms' and uses use:enhance on form elements",
      "relevant_when": "Agent creates forms in SvelteKit"
    },
    {
      "name": "form-data-via-$props",
      "rule": "Agent receives form action data using let { form }: { form: ActionData } = $props() in Svelte 5",
      "relevant_when": "Agent creates SvelteKit form pages in Svelte 5"
    },
    {
      "name": "error-handling-in-load",
      "rule": "Agent throws error() from '@sveltejs/kit' when fetch responses are not ok in load functions",
      "relevant_when": "Agent implements data loading that can fail"
    }
  ]
}

tile.json