Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-astro
Expert Astro Islands Architecture — client:load, client:idle, client:visible, client:media, client:only, server:defer (Server Islands), fallback slots, transition:persist, prop serialization. Use when adding interactivity to Astro pages or rendering dynamic server content.
npx claudepluginhub fusengine/agents --plugin fuse-astroHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-astro:astro-islandsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Partial hydration architecture: zero JS by default, selective interactivity via directives.
Implements Astro Islands Architecture: ship zero JS by default, hydrate interactive components (React, Vue, Svelte) with client:* directives (load, idle, visible, media, only). Audits over-hydration.
Provides Astro framework patterns for islands architecture, content collections, rendering strategies (SSG, SSR, hybrid), view transitions, partial hydration, and Cloudflare deployment.
Builds content-focused websites with Astro's zero-JS islands architecture, multi-framework components (React/Vue/Svelte), and Markdown/MDX support. Triggers on .astro files, Astro.props, content collections.
Share bugs, ideas, or general feedback.
Partial hydration architecture: zero JS by default, selective interactivity via directives.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| Concept | Benefit |
|---|---|
| Zero JS by default | Maximum performance, minimal payload |
| Selective hydration | Only interactive components ship JS |
server:defer | Dynamic server content without SSR blocking |
client:visible | Lazy-load below-fold components |
transition:persist | State survives page navigation |
| Directive | When JS Loads | Use Case |
|---|---|---|
client:load | Immediately on page load | Critical interactive UI |
client:idle | After requestIdleCallback | Non-critical UI |
client:visible | When component enters viewport | Below-fold components |
client:media="(query)" | When media query matches | Responsive components |
client:only="framework" | Client-only, no SSR | Components using browser APIs |
server:defer renders the component on the server after the page loads:
slot="fallback" for placeholder content| Need | Reference |
|---|---|
| Architecture overview | overview.md |
| Client directive details | client-directives.md |
| server:defer patterns | server-islands.md |
| transition:persist | transitions.md |
| View Transitions (complete) | view-transitions.md |
| Prop serialization rules | prop-serialization.md |
| Interactive component | templates/interactive-island.md |
| Server island with fallback | templates/server-island.md |
client:visible — Defer below-fold components automaticallyclient:only for browser APIs — localStorage, window, canvasserver:defer for personalized content — Avatars, prices, auth statetransition:persist — Preserve media players or forms during navigation