What problem does it solve? Building interactive React components inside an Astro site often leads to over-hydration, browser API crashes during server rendering, leaked event listeners, and inaccessible controls. This Skill provides a disciplined workflow for creating, editing, and reviewing hydrated React islands in the CITEC frontend so components stay typed, accessible, and correctly hydrated. ## Core Features & Use Cases - Hydration Strategy Guidance: Choose between client:load, client:visible, and lighter Astro directives based on whether interaction is above the fold or deferrable. - Browser-Safe Component Rules: Guard window, document, localStorage, and media queries behind effects or typeof window checks, and clean up listeners, timers, GSAP timelines, ScrollTriggers, and animation frames on unmount. - Accessibility & Icon Standards: Use lucide-react icons with aria-hidden for decorative cases, label icon-only buttons, preserve keyboard access, and keep focus states visible. - Use Case: When adding a mobile filter menu to an Astro page, use this Skill to build a typed, self-contained island with client:visible hydration, proper effect cleanup, and keyboard-accessible controls, then validate with bun run check. ## Quick Start Use the citec-react-islands skill to review my hydrated React component in src/islands for hydration, cleanup, and accessibility issues.
