astro-integrations git:20260904.5f1d30fA

Immutable. This exact content is served forever at /api/v1/blob/b2faa032c97061e0.

---
name: astro-integrations
description: Use when adding React, Vue, Svelte, Solid, Preact, or another UI framework to an Astro project via @astrojs/* integrations.
versions:
  astro: 7
user-invocable: true
references: references/overview.md, references/react.md, references/vue.md, references/svelte.md, references/solid.md, references/preact.md, references/others.md, references/multi-framework.md, references/templates/react-setup.md, references/templates/multi-framework.md
related-skills: astro-7, astro-islands, astro-styling
---

<objective>
Sets 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.

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.
</objective>

# 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`:

1. **fuse-ai-pilot:explore-codebase** - Check existing integrations and astro.config.ts
2. **fuse-ai-pilot:research-expert** - Verify latest integration docs via Context7/Exa
3. **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

```bash
# 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](references/overview.md) |
| React setup + options | [react.md](references/react.md) |
| Vue setup + options | [vue.md](references/vue.md) |
| Svelte setup + options | [svelte.md](references/svelte.md) |
| SolidJS setup + options | [solid.md](references/solid.md) |
| Preact setup + options | [preact.md](references/preact.md) |
| Lit, Qwik, Alpine, Angular | [others.md](references/others.md) |
| Multi-framework config | [multi-framework.md](references/multi-framework.md) |
| React full setup | [templates/react-setup.md](references/templates/react-setup.md) |
| Multi-framework project | [templates/multi-framework.md](references/templates/multi-framework.md) |

---

## Best Practices

1. **Use `astro add` CLI** — Auto-configures everything correctly
2. **Separate directories per framework** — `src/components/react/`, `src/components/vue/`
3. **`include` for multiple JSX frameworks** — Avoid React/Preact/Solid conflicts
4. **Apply client directives** — All framework components need hydration directive for interactivity
5. **Prefer single framework** — Mix only when truly necessary for performance