astro-integrations

Name: astro-integrations
Author: fusengine

21stars3forks

How to install astro-integrations?

fusengine/agents/astro-integrations

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Astro Integrations Expert
2
3	Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
4
5	## Agent Workflow (MANDATORY)
6
7	Before ANY implementation, use `TeamCreate` to spawn 3 agents:
8
9	1. fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
10	2. fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
11	3. mcp__context7__query-docs - Get setup and configuration examples
12
13	After implementation, run fuse-ai-pilot:sniper for validation.
14
15	---
16
17	## Overview
18
19	### When to Use
20
21	- Adding React/Vue/Svelte components to an Astro site
22	- Migrating an existing framework app into Astro
23	- Using multiple frameworks in the same project
24	- Integrating web components (Lit) or signals-based frameworks
25
26	### Supported Frameworks
27
28	\| Integration \| Package \| Notes \|
29	\|-------------\|---------\|-------\|
30	\| React \| `@astrojs/react` \| Requires react + react-dom \|
31	\| Vue \| `@astrojs/vue` \| Requires vue \|
32	\| Svelte \| `@astrojs/svelte` \| Requires svelte \|
33	\| SolidJS \| `@astrojs/solid-js` \| Requires solid-js \|
34	\| Preact \| `@astrojs/preact` \| Lightweight React alternative \|
35	\| AlpineJS \| `@astrojs/alpinejs` \| Minimal JS sprinkles \|
36	\| Lit \| `@astrojs/lit` \| Web components \|
37	\| Qwik \| `@qwikdev/astro` \| Resumability \|
38	\| Angular \| `@analogjs/astro-angular` \| Via AnalogJS \|
39
40	---
41
42	## Quick Setup
43
44	```bash
45	# Official integrations via CLI (recommended)
46	npx astro add react
47	npx astro add vue
48	npx astro add svelte
49	npx astro add solid-js
50	npx astro add preact
51	```
52
53	The CLI auto-installs packages and updates `astro.config.ts`.
54
55	---
56
57	## Reference Guide
58
59	\| Need \| Reference \|
60	\|------\|-----------\|
61	\| Architecture overview \| [overview.md](references/overview.md) \|
62	\| React setup + options \| [react.md](references/react.md) \|
63	\| Vue setup + options \| [vue.md](references/vue.md) \|
64	\| Svelte setup + options \| [svelte.md](references/svelte.md) \|
65	\| SolidJS setup + options \| [solid.md](references/solid.md) \|
66	\| Preact setup + options \| [preact.md](references/preact.md) \|
67	\| Lit, Qwik, Alpine, Angular \| [others.md](references/others.md) \|
68	\| Multi-framework config \| [multi-framework.md](references/multi-framework.md) \|
69	\| React full setup \| [templates/react-setup.md](references/templates/react-setup.md) \|
70	\| Multi-framework project \| [templates/multi-framework.md](references/templates/multi-framework.md) \|
71
72	---
73
74	## Best Practices
75
76	1. Use `astro add` CLI — Auto-configures everything correctly
77	2. Separate directories per framework — `src/components/react/`, `src/components/vue/`
78	3. `include` for multiple JSX frameworks — Avoid React/Preact/Solid conflicts
79	4. Apply client directives — All framework components need hydration directive for interactivity
80	5. Prefer single framework — Mix only when truly necessary for performance

People who liked this also viewed

6 picks

Type

astro-integrations

21stars3forks

View on GitHub

How to install astro-integrations?

fusengine/agents/astro-integrations

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Astro Integrations Expert
2
3	Framework-agnostic: use React, Vue, Svelte, Solid, and more in the same Astro project.
4
5	## Agent Workflow (MANDATORY)
6
7	Before ANY implementation, use `TeamCreate` to spawn 3 agents:
8
9	1. fuse-ai-pilot:explore-codebase - Check existing integrations and astro.config.ts
10	2. fuse-ai-pilot:research-expert - Verify latest integration docs via Context7/Exa
11	3. mcp__context7__query-docs - Get setup and configuration examples
12
13	After implementation, run fuse-ai-pilot:sniper for validation.
14
15	---
16
17	## Overview
18
19	### When to Use
20
21	- Adding React/Vue/Svelte components to an Astro site
22	- Migrating an existing framework app into Astro
23	- Using multiple frameworks in the same project
24	- Integrating web components (Lit) or signals-based frameworks
25
26	### Supported Frameworks
27
28	\| Integration \| Package \| Notes \|
29	\|-------------\|---------\|-------\|
30	\| React \| `@astrojs/react` \| Requires react + react-dom \|
31	\| Vue \| `@astrojs/vue` \| Requires vue \|
32	\| Svelte \| `@astrojs/svelte` \| Requires svelte \|
33	\| SolidJS \| `@astrojs/solid-js` \| Requires solid-js \|
34	\| Preact \| `@astrojs/preact` \| Lightweight React alternative \|
35	\| AlpineJS \| `@astrojs/alpinejs` \| Minimal JS sprinkles \|
36	\| Lit \| `@astrojs/lit` \| Web components \|
37	\| Qwik \| `@qwikdev/astro` \| Resumability \|
38	\| Angular \| `@analogjs/astro-angular` \| Via AnalogJS \|
39
40	---
41
42	## Quick Setup
43
44	```bash
45	# Official integrations via CLI (recommended)
46	npx astro add react
47	npx astro add vue
48	npx astro add svelte
49	npx astro add solid-js
50	npx astro add preact
51	```
52
53	The CLI auto-installs packages and updates `astro.config.ts`.
54
55	---
56
57	## Reference Guide
58
59	\| Need \| Reference \|
60	\|------\|-----------\|
61	\| Architecture overview \| [overview.md](references/overview.md) \|
62	\| React setup + options \| [react.md](references/react.md) \|
63	\| Vue setup + options \| [vue.md](references/vue.md) \|
64	\| Svelte setup + options \| [svelte.md](references/svelte.md) \|
65	\| SolidJS setup + options \| [solid.md](references/solid.md) \|
66	\| Preact setup + options \| [preact.md](references/preact.md) \|
67	\| Lit, Qwik, Alpine, Angular \| [others.md](references/others.md) \|
68	\| Multi-framework config \| [multi-framework.md](references/multi-framework.md) \|
69	\| React full setup \| [templates/react-setup.md](references/templates/react-setup.md) \|
70	\| Multi-framework project \| [templates/multi-framework.md](references/templates/multi-framework.md) \|
71
72	---
73
74	## Best Practices
75
76	1. Use `astro add` CLI — Auto-configures everything correctly
77	2. Separate directories per framework — `src/components/react/`, `src/components/vue/`
78	3. `include` for multiple JSX frameworks — Avoid React/Preact/Solid conflicts
79	4. Apply client directives — All framework components need hydration directive for interactivity
80	5. Prefer single framework — Mix only when truly necessary for performance

People who liked this also viewed

6 picks

Type