astro-integrations

<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 we...