Migrate a SPA component (React/Vue/Svelte) to the Astro architecture following docs/ARCHITECTURE.md section 5.

Component: $ARGUMENTS

Steps

1. Read docs/ARCHITECTURE.md section 5.

2. Analyze the component:

   • Count lines
   • List: props, state, effects, event handlers, data fetching
   • Determine: interactive or presentational?
   • Map who imports this component

3. If presentational (no interactivity) -> Convert to .astro:

   • Props -> Astro.props with Props interface
   • JSX/template -> Astro template syntax
   • CSS-in-JS/scoped styles -> scoped <style>
   • Remove all client-side JavaScript
   • Remove data fetching (move to page frontmatter)
   • Place in src/components/

4. If interactive (needs JS) -> Convert to island:

   • Keep framework code (React/Vue/Svelte)
   • Remove data fetching (move to page frontmatter, pass as props)
   • Keep only UI interactivity (state, event handlers)
   • Ensure props are serializable
   • Choose hydration strategy (client:visible > client:idle > client:load)
   • Place in src/islands/

5. Update pages that reference this component:

   • Add client:* directive if island
   • Move data fetching to page frontmatter

6. Validate:

npx astro check
npx astro build
npx vitest run --passWithNoTests