What problem does it solve? React codebases often accumulate subtle bugs from incomplete hook dependency arrays, leaked animation tweens, unnecessary re-renders, and disorganized component files. This Skill provides concrete rules and references for writing and reviewing React components and hooks correctly. ## Core Features & Use Cases - Hook dependency enforcement: Ensures every value referenced inside useEffect, useCallback, and useMemo appears in its dependency array, with restructuring guidance instead of linter suppression. - Component structure standards: Defines file splitting rules, body ordering (config, state, derived, effects, handlers, return), and fast-refresh-compatible module organization. - GSAP and animation integration: Covers mandatory tween cleanup, useGSAP dependency tracking, GPU acceleration, and ref-based continuous animation instead of per-frame setState. - Use Case: When reviewing a React component that animates elements with GSAP and re-renders excessively, load the relevant references to fix missing effect dependencies, kill leaked tweens in cleanup, and move continuous values to ref mutation. ## Quick Start Ask the AI to review your React component for hook dependency, structure, and animation cleanup issues using the ankyr-react skill.
