Skip to main content
command

svelte-migrate — Claude Code command: Svelte migration

Plan Svelte and SvelteKit upgrades, adopt runes, and work through breaking changes with this Claude Code command.

Install into Claude Code · claude-code-templates All methods and platforms ↓
npx claude-code-templates@latest --command svelte/svelte-migrate
Open on GitHub

What 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 $state and $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-migrate

2Manually: put the files in place

.claude/commands/svelte-migrate.md

Call it with /svelte-migrate. For all projects use ~/.claude/commands/

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

Similar slash commands

All slash commands for Frontend and UI →

From the same set804

The whole set →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor