CtrlK
BlogDocsLog inGet started
Tessl Logo

svelte5

Reviews Svelte components for idiomatic patterns, identifies anti-patterns carried over from React/Vue/Svelte 4, and suggests Svelte 5 refactorings. Use when writing or reviewing Svelte components, asking "is this idiomatic", "Svelte way", doing Svelte 5 migration, or encountering smells like: 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.

100

1.12x
Quality

100%

Does it follow best practices?

Impact

100%

1.12x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Evaluation results

100%

10%

Shopping Cart Component

Reactive cart: $derived totals, direct mutation, callback props

Criteria
Without context
With context

Order total is $derived

100%

100%

No $effect for derived values

100%

100%

Direct state mutation

100%

100%

No prop mirroring

100%

100%

Checkout callback prop

100%

100%

No createEventDispatcher

100%

100%

Svelte 5 props syntax

100%

100%

Event handler syntax

100%

100%

Keyed each block

100%

100%

Native button elements

100%

100%

Props typed

0%

100%

100%

Reusable Button Component for a Design System

Wrapper component: svelte/elements, snippets, Svelte 5 syntax

Criteria
Without context
With context

Native button element

100%

100%

svelte/elements type used

100%

100%

Rest props spread

100%

100%

Default type='button'

100%

100%

Named Props type

100%

100%

$props() syntax

100%

100%

Snippet typed

100%

100%

@render for snippet

100%

100%

No $bindable on variant/loading

100%

100%

No on:click syntax

100%

100%

No createEventDispatcher

100%

100%

100%

23%

App-Wide Notification System

App-wide state: .svelte.ts class, context with Symbol, factory pattern

Criteria
Without context
With context

.svelte.ts file extension

100%

100%

Class with $state fields

41%

100%

No writable store

100%

100%

Factory exported (not singleton)

100%

100%

Arrow function methods

0%

100%

Symbol context key

100%

100%

setContext receives class instance

80%

100%

getContext in display component

100%

100%

$effect for auto-dismiss timer

50%

100%

No module-level mutable export

100%

100%

Svelte 5 syntax

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.