Stats
Actions
Tags
From fuse-astro
Expert Astro UI framework integrations — @astrojs/react, @astrojs/vue, @astrojs/svelte, @astrojs/solid-js, @astrojs/preact, @astrojs/alpinejs, @astrojs/lit, @qwikdev/astro, @analogjs/astro-angular. Setup, multi-framework config, usage patterns.
How this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-astro:astro-integrationsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| 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 |
# 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.
| 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 |
astro add CLI — Auto-configures everything correctlysrc/components/react/, src/components/vue/include for multiple JSX frameworks — Avoid React/Preact/Solid conflictsnpx claudepluginhub fusengine/agents --plugin fuse-astroRuns React, Vue, Svelte, Solid, and Preact components side-by-side in one Astro project with full framework isolation and shared state via nanostores. Useful for migrations, combining framework-specific libraries, or evaluating frameworks on the same site.
Comprehensive patterns for integrating React components, MDX content, and Tailwind CSS into Astro websites with type safety, performance optimization, and best practices.
Builds content-focused websites with Astro using islands architecture, zero-JS-by-default output, multi-framework components, and Markdown/MDX support. Useful for blogs, docs, portfolios, and marketing sites.