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

Evaluation results

94%

17%

Shopping Cart State Manager

Reactive state and derived values with runes

Criteria
Without context
With context

$state for cart items

100%

100%

$state.raw for catalog

58%

50%

$derived for simple total

100%

100%

$derived.by for complex logic

0%

100%

No plain let for reactive vars

100%

100%

No $: reactive declarations

100%

100%

$props() for inputs

100%

100%

No export let

100%

100%

lang=ts on script

0%

100%

Callback prop not dispatcher

100%

100%

100%

10%

Infinite-Scroll Feed Component

Event handling and side effects

Criteria
Without context
With context

$effect for title update

100%

100%

$effect.pre for scroll capture

100%

100%

No $: for side effects

100%

100%

$inspect for debugging

100%

100%

onclick attribute syntax

100%

100%

No on: directive

100%

100%

No event modifier syntax

100%

100%

Callback prop not dispatcher

100%

100%

$props() not export let

100%

100%

lang=ts on script

0%

100%

100%

3%

Recipe Browser with Detail View

Criteria
Without context
With context

$props() for page data

100%

100%

No export let in pages

100%

100%

$state for search input

100%

100%

$derived for filtered results

100%

100%

onclick not on:click

100%

100%

PageServerLoad type

100%

100%

error() for missing resource

100%

100%

PageData type on data prop

62%

100%

lang=ts on scripts

100%

100%

No $: reactive declarations

100%

100%

100%

12%

Dashboard Widget System

Criteria
Without context
With context

children snippet in MetricCard

100%

100%

Named snippet prop for header

100%

100%

$state.raw for API data

0%

100%

$state for filter inputs

100%

100%

$derived for filtered metrics

100%

100%

Callback prop for refresh

100%

100%

$props() for page data

100%

100%

No export let anywhere

100%

100%

No $: reactive declarations

100%

100%

lang=ts on all scripts

100%

100%

100%

8%

Feedback Form with Live Preview

Criteria
Without context
With context

$props() for form data

100%

100%

No export let

100%

100%

$state for live inputs

100%

100%

$derived for word count

100%

100%

$derived for excerpt

100%

100%

No $: declarations

100%

100%

oninput not on:input

100%

100%

fail() for validation

100%

100%

redirect(303) on success

100%

100%

use:enhance on form

0%

100%

role=alert on errors

100%

100%

100%

Color Picker Component

Two-way bindable props

Criteria
Without context
With context

$bindable() for two-way binding

100%

100%

$props() not export let

100%

100%

Callback prop not createEventDispatcher

100%

100%

$state() for internal state

100%

100%

No on: event directive

100%

100%

No event modifier syntax

100%

100%

lang=ts on all scripts

100%

100%

No $: reactive declarations

100%

100%

$derived for computed values

100%

100%

100%

15%

Reusable Data Table Component

Parameterized snippet composition

Criteria
Without context
With context

Parameterized snippet

100%

100%

Snippet type import

100%

100%

@render for snippet invocation

100%

100%

No <slot> usage

100%

100%

$state.raw for fetched data

0%

100%

$props() not export let

100%

100%

children or named snippet prop

100%

100%

No on: event directive

100%

100%

lang=ts on scripts

100%

100%

No $: reactive declarations

100%

100%

100%

15%

Live Chat Message Feed Component

$effect and $inspect debugging

Criteria
Without context
With context

$effect for side effects

100%

100%

$effect.pre for pre-DOM work

100%

100%

$inspect for debugging

0%

100%

No $: side-effect blocks

100%

100%

$props() not export let

100%

100%

$state() for reactive vars

100%

100%

No on: event directive

100%

100%

Callback prop not createEventDispatcher

100%

100%

lang=ts on scripts

100%

100%

$derived for computed values

100%

100%

Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents