fusengine/astro-integrations
plugins/astro-expert/skills/astro-integrations/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents astro-integrationsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 2:43 AM74.9s11 files scanned
SKILL.md
- 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:
- 7
- user-invocable:
- true
- references:
- references/overview.md, references/react.md, references/vue.md, references/svelte.md, references/solid.md, references/preact.md, references/others.md, references/multi-framework.md, references/templates/react-setup.md, references/templates/multi-framework.md
- related-skills:
- astro-7, astro-islands, astro-styling
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 addCLI — Auto-configures everything correctly - Separate directories per framework —
src/components/react/,src/components/vue/ includefor 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
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026