Skill

astro-islands

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.

From fuse-astro

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-astro

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/client-directives.md

references/overview.md

references/prop-serialization.md

references/server-islands.md

references/templates/interactive-island.md

references/templates/server-island.md

references/transitions.md

references/view-transitions.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitMar 26, 2026

Actions

View Source View Plugin View on GitHub View README

Astro Islands Expert

Partial hydration architecture: zero JS by default, selective interactivity via directives.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Analyze existing components and hydration patterns
fuse-ai-pilot:research-expert - Verify latest Islands docs via Context7/Exa
mcp__context7__query-docs - Get client directive and server:defer examples

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

Adding interactive React/Vue/Svelte/Solid components to Astro pages
Deferring dynamic server content without blocking page load
Persisting component state during View Transitions
Optimizing Time to Interactive with lazy hydration

Why Islands Architecture

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

Client Directives

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 Islands

server:defer renders the component on the server after the page loads:

Uses slot="fallback" for placeholder content
Ideal for personalized or auth-gated content
Does not block initial page render
Requires a server adapter

Reference Guide

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

Best Practices

Default to no directive — Ship zero JS unless interactivity is required
Prefer client:visible — Defer below-fold components automatically
client:only for browser APIs — localStorage, window, canvas
server:defer for personalized content — Avatars, prices, auth state
transition:persist — Preserve media players or forms during navigation