astro-islands

Name: astro-islands
Author: fusengine

21stars3forks

How to install astro-islands?

fusengine/agents/astro-islands

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

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Astro Islands Expert
2
3	Partial hydration architecture: zero JS by default, selective interactivity via directives.
4
5	## Agent Workflow (MANDATORY)
6
7	Before ANY implementation, use `TeamCreate` to spawn 3 agents:
8
9	1. fuse-ai-pilot:explore-codebase - Analyze existing components and hydration patterns
10	2. fuse-ai-pilot:research-expert - Verify latest Islands docs via Context7/Exa
11	3. mcp__context7__query-docs - Get client directive and server:defer 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 interactive React/Vue/Svelte/Solid components to Astro pages
22	- Deferring dynamic server content without blocking page load
23	- Persisting component state during View Transitions
24	- Optimizing Time to Interactive with lazy hydration
25
26	### Why Islands Architecture
27
28	\| Concept \| Benefit \|
29	\|---------\|---------\|
30	\| Zero JS by default \| Maximum performance, minimal payload \|
31	\| Selective hydration \| Only interactive components ship JS \|
32	\| `server:defer` \| Dynamic server content without SSR blocking \|
33	\| `client:visible` \| Lazy-load below-fold components \|
34	\| `transition:persist` \| State survives page navigation \|
35
36	---
37
38	## Client Directives
39
40	\| Directive \| When JS Loads \| Use Case \|
41	\|-----------\|--------------\|----------\|
42	\| `client:load` \| Immediately on page load \| Critical interactive UI \|
43	\| `client:idle` \| After `requestIdleCallback` \| Non-critical UI \|
44	\| `client:visible` \| When component enters viewport \| Below-fold components \|
45	\| `client:media="(query)"` \| When media query matches \| Responsive components \|
46	\| `client:only="framework"` \| Client-only, no SSR \| Components using browser APIs \|
47
48	## Server Islands
49
50	`server:defer` renders the component on the server after the page loads:
51
52	- Uses `slot="fallback"` for placeholder content
53	- Ideal for personalized or auth-gated content
54	- Does not block initial page render
55	- Requires a server adapter
56
57	---
58
59	## Reference Guide
60
61	\| Need \| Reference \|
62	\|------\|-----------\|
63	\| Architecture overview \| [overview.md](references/overview.md) \|
64	\| Client directive details \| [client-directives.md](references/client-directives.md) \|
65	\| server:defer patterns \| [server-islands.md](references/server-islands.md) \|
66	\| transition:persist \| [transitions.md](references/transitions.md) \|
67	\| View Transitions (complete) \| [view-transitions.md](references/view-transitions.md) \|
68	\| Prop serialization rules \| [prop-serialization.md](references/prop-serialization.md) \|
69	\| Interactive component \| [templates/interactive-island.md](references/templates/interactive-island.md) \|
70	\| Server island with fallback \| [templates/server-island.md](references/templates/server-island.md) \|
71
72	---
73
74	## Best Practices
75
76	1. Default to no directive — Ship zero JS unless interactivity is required
77	2. Prefer `client:visible` — Defer below-fold components automatically
78	3. `client:only` for browser APIs — localStorage, window, canvas
79	4. `server:defer` for personalized content — Avatars, prices, auth state
80	5. `transition:persist` — Preserve media players or forms during navigation

People who liked this also viewed

6 picks

Type

astro-islands

21stars3forks

View on GitHub

How to install astro-islands?

fusengine/agents/astro-islands

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Astro Islands Expert
2
3	Partial hydration architecture: zero JS by default, selective interactivity via directives.
4
5	## Agent Workflow (MANDATORY)
6
7	Before ANY implementation, use `TeamCreate` to spawn 3 agents:
8
9	1. fuse-ai-pilot:explore-codebase - Analyze existing components and hydration patterns
10	2. fuse-ai-pilot:research-expert - Verify latest Islands docs via Context7/Exa
11	3. mcp__context7__query-docs - Get client directive and server:defer 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 interactive React/Vue/Svelte/Solid components to Astro pages
22	- Deferring dynamic server content without blocking page load
23	- Persisting component state during View Transitions
24	- Optimizing Time to Interactive with lazy hydration
25
26	### Why Islands Architecture
27
28	\| Concept \| Benefit \|
29	\|---------\|---------\|
30	\| Zero JS by default \| Maximum performance, minimal payload \|
31	\| Selective hydration \| Only interactive components ship JS \|
32	\| `server:defer` \| Dynamic server content without SSR blocking \|
33	\| `client:visible` \| Lazy-load below-fold components \|
34	\| `transition:persist` \| State survives page navigation \|
35
36	---
37
38	## Client Directives
39
40	\| Directive \| When JS Loads \| Use Case \|
41	\|-----------\|--------------\|----------\|
42	\| `client:load` \| Immediately on page load \| Critical interactive UI \|
43	\| `client:idle` \| After `requestIdleCallback` \| Non-critical UI \|
44	\| `client:visible` \| When component enters viewport \| Below-fold components \|
45	\| `client:media="(query)"` \| When media query matches \| Responsive components \|
46	\| `client:only="framework"` \| Client-only, no SSR \| Components using browser APIs \|
47
48	## Server Islands
49
50	`server:defer` renders the component on the server after the page loads:
51
52	- Uses `slot="fallback"` for placeholder content
53	- Ideal for personalized or auth-gated content
54	- Does not block initial page render
55	- Requires a server adapter
56
57	---
58
59	## Reference Guide
60
61	\| Need \| Reference \|
62	\|------\|-----------\|
63	\| Architecture overview \| [overview.md](references/overview.md) \|
64	\| Client directive details \| [client-directives.md](references/client-directives.md) \|
65	\| server:defer patterns \| [server-islands.md](references/server-islands.md) \|
66	\| transition:persist \| [transitions.md](references/transitions.md) \|
67	\| View Transitions (complete) \| [view-transitions.md](references/view-transitions.md) \|
68	\| Prop serialization rules \| [prop-serialization.md](references/prop-serialization.md) \|
69	\| Interactive component \| [templates/interactive-island.md](references/templates/interactive-island.md) \|
70	\| Server island with fallback \| [templates/server-island.md](references/templates/server-island.md) \|
71
72	---
73
74	## Best Practices
75
76	1. Default to no directive — Ship zero JS unless interactivity is required
77	2. Prefer `client:visible` — Defer below-fold components automatically
78	3. `client:only` for browser APIs — localStorage, window, canvas
79	4. `server:defer` for personalized content — Avatars, prices, auth state
80	5. `transition:persist` — Preserve media players or forms during navigation

People who liked this also viewed

6 picks

Type