ACTIVATE when integrating React components in Astro, choosing client directives, or implementing interactive islands. ACTIVATE for 'client:load', 'client:visible', 'client:idle', 'client:only', 'React island', 'nanostores'. Covers: client directive selection (load/idle/visible/media/only), props passing, MDX integration, cross-island state sharing with nanostores. DO NOT use for: pure Astro components (see astro-basics), general React patterns.
From astronpx claudepluginhub fabiensalles/claude-marketplace --plugin astroThis skill uses the workspace's default tool permissions.
references/react-integration-examples.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
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.
Analyzes current state and user query to answer BMad questions or recommend the next skill(s) to use. Use when user asks for help, bmad help, what to do next, or what to start with in BMad.
Patterns for using React components in Astro projects (Islands Architecture).
npx astro add react
src/
├── components/
│ ├── Button.astro # Static Astro component
│ ├── Counter.tsx # Interactive React component
│ ├── Chart.tsx # Client-side only component
│ └── SearchBar.tsx # Hydrated on visibility
| Directive | When Hydrates | Use Case |
|---|---|---|
client:load | Page load | Critical interactive UI |
client:idle | Browser idle | Non-critical UI |
client:visible | In viewport | Below-fold, heavy components |
client:media="..." | Media match | Responsive interactions |
client:only="react" | Never SSR | Browser-only APIs |
<Counter client:load initialCount={5} label="Visits" />
<Chart client:visible data={chartData} />
<MobileMenu client:media="(max-width: 768px)" />
<MapComponent client:only="react" coordinates={coords} />
When building React components, passing complex props, or using children/slots, read
references/react-integration-examples.mdfor complete component patterns.
When sharing state between islands with nanostores, read
references/react-integration-examples.mdfor the store setup and useStore pattern.
When using React components in MDX, read
references/react-integration-examples.mdfor MDX integration examples.
client:visible for most componentsclient:load sparingly (increases initial JS)client:only for components with browser-only dependencies