Skip to the rows

agentsclimarketplace

Astro integrations

Skill fusengine/agents/plugins/astro-expert/skills/astro-integrations

Redefining development through cognitive automation and collaborative agent systems.

Install

npx -y skills add fusengine/agents --skill astro-integrations

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when adding React, Vue, Svelte, Solid, Preact, or another UI framework to an Astro project via @astrojs/* integrations.

SKILL.md

4.0 KB, as published. Nobody here has run it

<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, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
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

Use astro add CLI — Auto-configures everything correctly
Separate directories per framework — src/components/react/, src/components/vue/
include for multiple JSX frameworks — Avoid React/Preact/Solid conflicts
Apply client directives — All framework components need hydration directive for interactivity
Prefer single framework — Mix only when truly necessary for performance

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.