skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

add-island

Creates React island components for Astro pages with hydration directives and SSR guards.

Updated Mar 28, 2026
Search Tags:#frontend#react#astro#ssr#hydration#motion#islands
One-click install
npx skills add https://github.com/po4yka/blog --skill add-island-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-island
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/add-island
Command: npx skills add https://github.com/po4yka/blog --skill add-island-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding interactive React components to Astro pages often causes hydration mismatches, SSR crashes from browser API access, and missing hydration directives that silently break interactivity. This Skill provides a structured workflow for creating islands with the correct hydration strategy, motion integration, and SSR-safe patterns. ## Core Features & Use Cases - Hydration Directive Selection: Decision table for choosing between client:visible, client:load, client:idle, or no directive based on interactivity priority. - SSR Guard Patterns: Ready-made guards for window/document access, Zustand persisted stores, and lazy imports to prevent server-render crashes. - Motion Integration: Conventions for MotionProvider, useInView scroll-triggered animations, and staggered delay props consistent with the project's animation system. - Use Case: When adding a new interactive section to the homepage, generate the component in src/components/, wire it into the .astro page with section-reveal wrappers and data-section-name attributes, and verify with npx astro check. ## Quick Start Add a new interactive React island called TerminalSection to the homepage with scroll-triggered animation and the correct hydration directive.

Frequently Asked Questions about add-island

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a React component to an Astro page?▼

Create the component in src/components/, import it into the .astro file, and render it with a client directive such as client:visible. Wrap it in a div with class section-reveal and a data-section-name attribute for scroll-reveal integration.

Which Astro client directive should I use for hydration?▼

Use client:visible as the default for below-the-fold or non-critical sections, client:load for above-the-fold interactivity needed immediately, and client:idle for low-priority widgets. Omit the directive entirely for static content.

Why does my React island crash during Astro SSR?▼

The crash happens when browser-only APIs like window or localStorage run during server rendering. Guard access with typeof window checks, move DOM side-effects into useEffect, or lazy-load the component with React.lazy and Suspense.

Why is my Astro island not interactive after page load?▼

A missing client:* directive means the component renders server HTML but never hydrates, with no error shown. Add client:visible or client:load to the component tag in the .astro file to enable hydration.

Can I pass functions or Dates as props from Astro to React islands?▼

No, Astro serializes island props to HTML attributes, so only serializable primitives can be passed from .astro files. Functions, Dates, and class instances must be created inside the React component instead.

Related Skills

Explore More Software Engineering Skills→
staruhubstaruhub
662

react-component-generator

Generate React components with TypeScript, Tailwind CSS, and Zustand templates.

Community
Intermediate
siviter-xyzsiviter-xyz
21

astroflare

Deploy Astro projects with Tailwind on Cloudflare Workers using the Cloudflare adapter.

Official
Intermediate
HollowvynHollowvyn

react-selective-hydration

Enable selective hydration for React 18 streaming SSR pages.

Official
Advanced
jcsoftdevjcsoftdev

islands-architecture

Implement partial hydration by marking interactive islands on static pages.

Community
Intermediate