Agent-Skills.md

Agent Skills: Astro Integrations Expert

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.

UncategorizedID: fusengine/agents/astro-integrations

Repository

fusengine/agents
fusengineLicense: MIT
7

Install this agent skill to your local

pnpm dlx add-skill https://github.com/fusengine/agents/tree/HEAD/plugins/astro-expert/skills/astro-integrations

Skill Files

Browse the full folder contents for astro-integrations.

Download Skill

Loading file tree…

plugins/astro-expert/skills/astro-integrations/SKILL.md

Skill Metadata

Name
astro-integrations
Description
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.

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