Skip to main content
skill CX Codex

migrate · incluud — Claude Code skill: Astro migrations and upgrades

Plans and runs a move to Astro or an Astro version upgrade. Useful when an existing app has to be taken apart piece by piece instead of rewritten blind.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add incluud/astro-agent-skills --skill migrate -a claude-code
Open on GitHub

What migrate does

The skill kicks in when you move a project from another framework to Astro, turn a static site into Astro, or upgrade an existing Astro codebase. It starts with an inventory: routing, shared shells, data sources, styling, interactive components, image handling, deployment and runtime needs. That decides whether the target ends up static, hybrid or server-rendered.

Then it walks the migration: pick the shape, map concepts instead of copying files, rebuild routing and data flow, keep interactivity in islands. Shared wrappers go to src/layouts/, routes to src/pages/, structured content to src/content/. Framework components stay only where they still earn their place; static content usually becomes .astro. Validation covers route parity, metadata and head output, images, forms, keyboard navigation and the build.

There is a separate section for Astro upgrades. For Astro 6 it lists the breakpoints: Node 22.12.0 or newer, content collections in src/content.config.* with a loader for every collection, Astro.glob() replaced by import.meta.glob() or getCollection(), <ViewTransitions /> swapped for <ClientRouter />. Any leftover legacy.collections config has to go. Check the runtime before you dig into code, because some post-upgrade failures are just a Node version mismatch.

What it helps with

  • move a static site to Astro without a full rewrite
  • split a Next.js or Nuxt app into Astro pages and interactive islands
  • port a Gatsby content pipeline to content collections
  • upgrade Astro across a major version without missing breaking changes
  • verify route and metadata parity after a migration

Example prompts for the agent

  • migrate this project to Astro, start by inventorying the current system
  • move routes and shared shells into src/pages and src/layouts, keep interactivity as islands
  • upgrade the project to Astro 6 and check the breakpoints from the guide

How to install migrate

1Skills CLI (Vercel)

npx skills add incluud/astro-agent-skills --skill migrate -a claude-code

2Manually: put the files in place

~/.claude/skills/migrate/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/migrate/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about migrate

How do I install migrate in Claude?

Run npx skills add incluud/astro-agent-skills --skill migrate -a claude-code. The skill lands in ~/.claude/skills/migrate/SKILL.md.

What does the migrate skill do?

It inventories the project, picks a migration shape, maps old framework concepts onto Astro and rebuilds routing, data flow and interactivity. Afterwards it checks routes, metadata, images, forms and the build.

What does it cover for Astro upgrades?

It follows the official upgrade guide and npx @astrojs/upgrade, and updates integrations and adapters together with Astro. For Astro 6 it names the breakpoints, including the Node 22.12.0 requirement.

Source text

SKILL.md · MIT
---
name: migrate
description: Plan and execute migrations to Astro or between Astro versions with minimal regressions.
---

# Migrate to Astro

Use this skill when moving a project from another framework to Astro, converting a static site into Astro, or upgrading an existing Astro codebase.

If `astro-best-practices` is available, apply it alongside this skill so the migrated result follows good Astro defaults rather than just reproducing the old system mechanically.

## Workflow

### 1. Inventory the current system

Before changing code, identify:

- routing structure
- layout/shared shell patterns
- data sources
- styling strategy
- interactive components
- image handling
- deployment/runtime requirements

This determines whether the target should be static, hybrid, or server-rendered.

### 2. Choose the migration shape

Common patterns:

- static HTML to Astro pages and layouts
- Next.js or Nuxt to Astro pages plus framework islands
- Gatsby content/data flows to content collections
- Astro major-version upgrades using the official upgrade guide

Prefer an incremental migration plan when the existing app has meaningful runtime behavior or a large interactive surface.

### 3. Map concepts instead of copying files blindly

Typical mappings:

| Source | Astro target |
| --- | --- |
| shared app shell | layout |
| route component | page or dynamic route |
| markdown/content pipeline | content collection |
| framework-only widget | island with client directive |
| image helper | `astro:assets` or the project’s current image strategy |

Keep framework components only where they still add value. Static content should usually become `.astro`.

### 4. Rebuild the routing and data flow

For each migrated slice:

- recreate routes in `src/pages/`
- move shared wrappers into `src/layouts/`
- migrate structured content into `src/content/`
- replace framework-specific fetching patterns with Astro frontmatter or content APIs

When a page was using `getStaticPaths`-style route generation before, rebuild it explicitly in Astro rather than simulating the old framework lifecycle.

### 5. Handle interactivity as islands

Do not port an entire framework app into Astro unchanged unless that is a deliberate compatibility bridge.

Instead:

- keep the static shell in `.astro`
- preserve framework components for interactive islands
- choose client directives intentionally
- minimize the hydrated surface

### 6. Validate behavior and regressions

Check at least:

- route parity
- metadata and head output
- image rendering
- form behavior
- keyboard navigation
- build and preview behavior
- deployment assumptions

## Astro Upgrade Guidance

For Astro-to-Astro upgrades:

- start with the official upgrade guide and use `npx @astrojs/upgrade` when it fits the repo
- update official integrations and adapters together with Astro, not as a separate afterthought
- verify the local and deployment runtime meet the current Node requirement before debugging code-level issues
- rerun content, routing, and build checks after the upgrade

For Astro 6 specifically, check these breakpoints:

- Node runtime: Astro 6 requires Node 22.12.0 or newer
- content collections: use `src/content.config.*`, define a `loader` for every collection, remove `type`, import `z` from `astro/zod`, use `entry.id` instead of `slug`, and replace `entry.render()` with `render(entry)`
- legacy collection flags: remove any `legacy.collections` config
- file querying: replace `Astro.glob()` with `import.meta.glob()` or `getCollection()` for content collections
- view transitions: replace `<ViewTransitions />` with `<ClientRouter />` if it still exists in the project
- `getStaticPaths()`: remove `Astro.generator`, and replace `Astro.site` with `import.meta.env.SITE` if it is used inside `getStaticPaths()`
- custom schemas: review custom Zod usage against Zod 4 if validation starts failing after the upgrade

Use version-specific docs for breaking changes. Do not assume older migration advice still applies to the current Astro release.

© incluud · MIT · incluud/astro-agent-skills

Similar skills

Everything for Frontend and UI →

migrate by other authors comes first.

migrate Alireza Rezvani Moves Cypress or Selenium tests to Playwright. Use it when an existing test suite needs file-by-file conversion and checks after each change. 1,586installs migrate toss Reads your lodash code and shows how to swap each function for es-toolkit or es-toolkit/compat. Handy when the bundle needs to shrink. CX Codex +1 313installs migrate codewithmukesh Step-by-step workflow for EF Core schema migrations, .NET version upgrades, and NuGet package updates with rollback checks. CX Codex +1 2,800installs migrate parcadei Runs a migration from target research through review. Use it for framework, language, database, or infrastructure changes. CX Codex +1 481installs migrate launchdarkly Walks an app with hardcoded prompts through a five-stage move to LaunchDarkly AgentControl, pausing for your confirmation at each stage. CX Codex +1 1,800installs astro-framework delineas A skill that turns your coding agent into a senior Astro engineer. Useful once a content site needs islands, server rendering or the Content Layer API. CX Codex +1 2,200installs design-systems-slds2-migrate forcedotcom Runs the SLDS linter over your components and walks you through fixing violations while moving Lightning Web Components from SLDS 1 to SLDS 2. CX Codex +1 5,600installs experience-aura-lwc-migrate forcedotcom Analyzes Salesforce Aura bundles and generates a framework-agnostic PRD for migration to LWC. It maps attributes, events, and data needs before coding begins. CX Codex +1 1,900installs chakra-ui-migrate chakra-ui A migration skill that guides projects from Chakra UI v2 to v3. It handles package cleanups, codemods, provider setup, and updated component props. CX Codex +1 1,800installs wordpress-theme-to-emdash emdash-cms Ports a WordPress theme's design and template behavior to an Astro site backed by EmDash. Useful for theme migrations and matching the original layout. CX Codex +1 691installs wordpress-plugin-to-emdash emdash-cms Reads a WordPress plugin and decides what moves to EmDash: site schema, Astro code, or a plugin of its own. CX Codex +1 688installs

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