Migrate a Svelte 4 component to Svelte 5 runes syntax. Use when asked to migrate, convert, or upgrade a .svelte file to Svelte 5.
87
83%
Does it follow best practices?
Impact
92%
1.06xAverage score across 3 eval scenarios
Passed
No known issues
Migrate props, state, derived, and effects
Props rune used
100%
100%
Props interface defined
0%
100%
Selective $state usage
87%
100%
$derived for simple computed values
100%
100%
$derived.by for complex derivation
0%
100%
$effect for side effects
100%
100%
Event handler syntax
100%
100%
No leftover $: syntax
100%
100%
No leftover on: directives
100%
100%
Unchanged structural directives
100%
100%
class: directives preserved
100%
100%
Component events, slots, and event forwarding migration
No createEventDispatcher
100%
100%
Callback props for events
100%
100%
Callback props called correctly
100%
100%
Default slot to snippet
100%
100%
Named slots to snippets
100%
100%
Snippet type imported
100%
100%
Event forwarding as props
100%
100%
IconButton slot to snippet
100%
100%
stopPropagation handled manually
100%
100%
No bare on: forwarding
100%
100%
No on: directives remain
100%
100%
Lifecycle hooks, app/state, and dynamic components
beforeUpdate to $effect.pre
100%
100%
afterUpdate to $effect
100%
100%
onMount preserved
0%
0%
onDestroy preserved
0%
0%
$app/state import
100%
100%
No $app/stores import
100%
100%
svelte:component replaced
100%
100%
script module syntax
100%
100%
$derived for reactive values
100%
100%
No $: reactive labels remain
100%
100%
ccb4cb7
Table of Contents
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.