This skill is Astro-specific (the framework is embedded via astro.config.ts, not a standalone React/Vue/Svelte app). Does not cover hydration directives once a component is added (astro-islands) or component styling (astro-styling) — those are separate skills.
Astro Integrations Expert
Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
Agent Workflow (MANDATORY)
Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:
- fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
- fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
- mcp__context7__query-docs - Get setup and configuration examples
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Adding React/Vue/Svelte components to an Astro site
- Migrating an existing framework app into Astro
- Using multiple frameworks in the same project
- Integrating web components (Lit) or signals-based frameworks
Supported Frameworks
| Integration |
Package |
Notes |
| React |
@astrojs/react |
Requires react + react-dom |
| Vue |
@astrojs/vue |
Requires vue |
| Svelte |
@astrojs/svelte |
Requires svelte |
| SolidJS |
@astrojs/solid-js |
Requires solid-js |
| Preact |
@astrojs/preact |
Lightweight React alternative |
| AlpineJS |
@astrojs/alpinejs |
Minimal JS sprinkles |
| Lit |
@astrojs/lit |
Web components |
| Qwik |
@qwikdev/astro |
Resumability |
| Angular |
@analogjs/astro-angular |
Via AnalogJS |
Quick Setup
# Official integrations via CLI (recommended)
npx astro add react
npx astro add vue
npx astro add svelte
npx astro add solid-js
npx astro add preact
The CLI auto-installs packages and updates astro.config.ts.
Reference Guide
| Need |
Reference |
| Architecture overview |
overview.md |
| React setup + options |
react.md |
| Vue setup + options |
vue.md |
| Svelte setup + options |
svelte.md |
| SolidJS setup + options |
solid.md |
| Preact setup + options |
preact.md |
| Lit, Qwik, Alpine, Angular |
others.md |
| Multi-framework config |
multi-framework.md |
| React full setup |
templates/react-setup.md |
| Multi-framework project |
templates/multi-framework.md |
Best Practices
- Use
astro add CLI — Auto-configures everything correctly
- Separate directories per framework —
src/components/react/, src/components/vue/
include for multiple JSX frameworks — Avoid React/Preact/Solid conflicts- Apply client directives — All framework components need hydration directive for interactivity
- Prefer single framework — Mix only when truly necessary for performance
1---2name: astro-integrations3description: Use when adding React, Vue, Svelte, Solid, Preact, or another UI framework to an Astro project via @astrojs/* integrations.4---56<objective>7Sets up and configures Astro's UI framework integrations: `@astrojs/react`, `@astrojs/vue`, `@astrojs/svelte`, `@astrojs/solid-js`, `@astrojs/preact`, `@astrojs/alpinejs`, `@astrojs/lit`, `@qwikdev/astro`, and `@analogjs/astro-angular`. Covers the `astro add` CLI installation flow, per-framework configuration options, and multi-framework projects (e.g. React + Vue in the same codebase) including `include` scoping to avoid JSX-framework conflicts.89This skill is Astro-specific (the framework is embedded via `astro.config.ts`, not a standalone React/Vue/Svelte app). Does not cover hydration directives once a component is added (astro-islands) or component styling (astro-styling) — those are separate skills.10</objective>1112# Astro Integrations Expert1314Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.1516## Agent Workflow (MANDATORY)1718Before ANY implementation, spawn 3 agents in parallel, one `Agent` call each with a `name`:19201. **fuse-ai-pilot:explore-codebase** - Check existing integrations and astro.config.ts212. **fuse-ai-pilot:research-expert** - Verify latest integration docs via Context7/Exa223. **mcp__context7__query-docs** - Get setup and configuration examples2324After implementation, run **fuse-ai-pilot:sniper** for validation.2526---2728## Overview2930### When to Use3132- Adding React/Vue/Svelte components to an Astro site33- Migrating an existing framework app into Astro34- Using multiple frameworks in the same project35- Integrating web components (Lit) or signals-based frameworks3637### Supported Frameworks3839| Integration | Package | Notes |40|-------------|---------|-------|41| React | `@astrojs/react` | Requires react + react-dom |42| Vue | `@astrojs/vue` | Requires vue |43| Svelte | `@astrojs/svelte` | Requires svelte |44| SolidJS | `@astrojs/solid-js` | Requires solid-js |45| Preact | `@astrojs/preact` | Lightweight React alternative |46| AlpineJS | `@astrojs/alpinejs` | Minimal JS sprinkles |47| Lit | `@astrojs/lit` | Web components |48| Qwik | `@qwikdev/astro` | Resumability |49| Angular | `@analogjs/astro-angular` | Via AnalogJS |5051---5253## Quick Setup5455```bash56# Official integrations via CLI (recommended)57npx astro add react58npx astro add vue59npx astro add svelte60npx astro add solid-js61npx astro add preact62```6364The CLI auto-installs packages and updates `astro.config.ts`.6566---6768## Reference Guide6970| Need | Reference |71|------|-----------|72| Architecture overview | [overview.md](references/overview.md) |73| React setup + options | [react.md](references/react.md) |74| Vue setup + options | [vue.md](references/vue.md) |75| Svelte setup + options | [svelte.md](references/svelte.md) |76| SolidJS setup + options | [solid.md](references/solid.md) |77| Preact setup + options | [preact.md](references/preact.md) |78| Lit, Qwik, Alpine, Angular | [others.md](references/others.md) |79| Multi-framework config | [multi-framework.md](references/multi-framework.md) |80| React full setup | [templates/react-setup.md](references/templates/react-setup.md) |81| Multi-framework project | [templates/multi-framework.md](references/templates/multi-framework.md) |8283---8485## Best Practices86871. **Use `astro add` CLI** — Auto-configures everything correctly882. **Separate directories per framework** — `src/components/react/`, `src/components/vue/`893. **`include` for multiple JSX frameworks** — Avoid React/Preact/Solid conflicts904. **Apply client directives** — All framework components need hydration directive for interactivity915. **Prefer single framework** — Mix only when truly necessary for performance
fusengine