CtrlK
BlogDocsLog inGet started
Tessl Logo

svelte5

Mental-model reset for Svelte 5. Use when writing or reviewing Svelte components to shift from "it works" to "thinks in Svelte." Triggers on Svelte code review, "is this idiomatic", "Svelte way", Svelte 5 migration, or smells carried over from React/Vue/Svelte 4 — effect assigns state, prop copied to $state, global store by default, $bindable everywhere, clickable div, createEventDispatcher, export let, on:click, slot-shaped APIs, lifecycle-driven code, imperative DOM wiring, immutable-update ceremony, context value replacement, shadcn-svelte form structure, Field.* components, bits-ui form controls, or component APIs that hide ownership. This is the general-purpose entry point for Svelte component review; delegates to sveltekit for routes/load/actions/server concerns and to focused references for details.

87

1.35x
Quality

80%

Does it follow best practices?

Impact

100%

1.35x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./svelte5/SKILL.md
SKILL.md
Quality
Evals
Security

Evaluation results

100%

25%

Reactive Pattern Audit

Reactive anti-pattern refactoring

Criteria
Without context
With context

PriceDisplay uses $derived

100%

100%

PriceDisplay removes effect

100%

100%

SearchBox uses event handler

100%

100%

SearchBox removes effect

100%

100%

QuantityInput removes sync effects

100%

100%

QuantityInput bind getter/setter

0%

100%

No state-assigning effects

50%

100%

Svelte 5 syntax consistency

100%

100%

100%

36%

Notification Center State

SvelteKit-safe reusable state with context

Criteria
Without context
With context

State in .svelte.ts file

0%

100%

Factory not singleton

100%

100%

Context for sharing

100%

100%

Reactive object in context

60%

100%

Direct list mutation

0%

100%

No module-level singleton

100%

100%

Svelte 5 syntax in components

0%

100%

Keyed each block

100%

100%

100%

17%

Design System: Data Table and Icon Button Components

Typed snippets and HTML wrapper components

Criteria
Without context
With context

Typed row snippet

100%

100%

Generic component

100%

100%

Named snippets by role

100%

100%

Keyed each block

66%

100%

IconButton uses svelte/elements type

100%

100%

IconButton spreads rest props

100%

100%

IconButton type default

0%

100%

Svelte 5 syntax only

100%

100%

Repository
joshuadavidthomas/agent-skills
Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.