git:20260729.3b91eed to git:20260904.5f1d30f

---

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)

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