svelte-migrate — Claude Code command: Svelte migration
Plan Svelte and SvelteKit upgrades, adopt runes, and work through breaking changes with this Claude Code command.
npx claude-code-templates@latest --command svelte/svelte-migrateWhat svelte-migrate does
The command examines a project, outlines a migration plan, and helps apply the changes. Its listed scenarios include moving between Svelte 3, 4, and 5, upgrading SvelteKit 1.x to 2.x, switching stores to runes, and moving JavaScript code to TypeScript. For an automated Svelte 5 migration, it can run npx sv migrate svelte-5.
It can help update component syntax, event handling, store subscriptions, build configuration, and package imports. The workflow also covers checking routes, components, tests, and deployment scripts. SSR behavior can change during an upgrade, so review the result across the application.
To add it to Claude Code, run npx claude-code-templates@latest --command svelte/svelte-migrate. The command file path is .claude/commands/svelte-migrate.md.
What it helps with
- move a Svelte 4 app to Svelte 5 with runes
- upgrade a SvelteKit 1.x project to 2.x
- replace reactive statements with
$stateand$derived - address component API and event handling changes
- migrate JavaScript code to TypeScript
Example prompts for the agent
- Migrate my Svelte 4 app to Svelte 5 and convert its reactive statements to runes.
- Plan an upgrade of this project from SvelteKit 1.x to 2.x.
- Review the component API and SSR changes after the Svelte upgrade.
How to install svelte-migrate
1claude-code-templates
npx claude-code-templates@latest --command svelte/svelte-migrate2Manually: put the files in place
.claude/commands/svelte-migrate.mdCall it with /svelte-migrate. For all projects use ~/.claude/commands/
Manually: put the files in place
~/.codex/prompts/svelte-migrate.mdCall it with /prompts:svelte-migrate. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.github/prompts/svelte-migrate.prompt.mdManually: put the files in place
.gemini/commands/svelte-migrate.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about svelte-migrate
How do I install svelte-migrate in Claude Code?
Run npx claude-code-templates@latest --command svelte/svelte-migrate. The command file path is .claude/commands/svelte-migrate.md.
What does svelte-migrate do?
It helps plan and carry out Svelte and SvelteKit migrations, including syntax updates and changes that can break existing code.
Which migrations does svelte-migrate cover?
Listed cases include Svelte 3 to 4, Svelte 4 to 5, SvelteKit 1.x to 2.x, and replacing stores with runes.
Source text
svelte-migrate.md · MIT
--- description: "Migrate Svelte/SvelteKit projects between versions, adopt new features like runes, and handle breaking changes." --- # /svelte:migrate Migrate Svelte/SvelteKit projects between versions, adopt new features like runes, and handle breaking changes. ## Instructions You are acting as the Svelte Development Agent focused on migrations. When migrating projects: 1. **Migration Types**: **Version Migrations**: - Svelte 3 → Svelte 4 - Svelte 4 → Svelte 5 (Runes) - SvelteKit 1.x → SvelteKit 2.x - Legacy app → Modern SvelteKit **Feature Migrations**: - Stores → Runes ($state, $derived) - Class components → Function syntax - Imperative → Declarative patterns - JavaScript → TypeScript 2. **Migration Process**: ```bash # Automated migrations npx sv migrate [migration-name] # Manual migration steps 1. Backup current code 2. Update dependencies 3. Run codemods 4. Fix breaking changes 5. Update configurations 6. Test thoroughly ``` 3. **Runes Migration**: ```javascript // Before (Svelte 4) let count = 0; $: doubled = count * 2; // After (Svelte 5) let count = $state(0); let doubled = $derived(count * 2); ``` 4. **Breaking Changes**: - Component API changes - Store subscription syntax - Event handling updates - SSR behavior changes - Build configuration updates - Package import paths 5. **Migration Checklist**: - [ ] Update package.json dependencies - [ ] Run automated migration scripts - [ ] Update component syntax - [ ] Fix TypeScript errors - [ ] Update configuration files - [ ] Test all routes and components - [ ] Update deployment scripts - [ ] Review performance impacts ## Example Usage User: "Migrate my Svelte 4 app to Svelte 5 with runes" Assistant will: - Analyze current codebase - Create migration plan - Run `npx sv migrate svelte-5` - Convert reactive statements to runes - Update component props syntax - Fix effect timing issues - Update test files - Handle edge cases manually - Provide rollback strategy
© davila7 · MIT · davila7/claude-code-templates