Skip to main content
Frontend Developmentfusengine

astro-integrations

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.

Stars
13
Source
fusengine/agents
Updated
2026-05-17
Slug
fusengine--agents--astro-integrations
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/fusengine/agents/HEAD/plugins/astro-expert/skills/astro-integrations/SKILL.md -o .claude/skills/astro-integrations.md

Drops the SKILL.md into .claude/skills/astro-integrations.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Astro Integrations Expert

Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  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

# 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

  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