skills

React and frontend performance optimization guidelines. Use when writing, reviewing, or refactoring React code to improve rendering behavior, bundle cost, async concurrency, and browser performance. Treat useEffect as a last resort: do not use it for derived state, prop-to-state syncing, user-event logic, or data fetching that belongs in loaders, server functions, or shared caches.

Motion (Framer Motion) React animation library plus local polish and bar-raising guidance. Use for drag-and-drop, scroll animations, gestures, SVG morphing, motion audits, or refining the quality bar of interactive UI work.

High-bar guidance for creating UI animation across CSS, native platform primitives, and animation libraries. Use when the task involves transitions, micro-interactions, page motion, scroll effects, motion polish, or raising the animation quality bar so the result does not feel sloppy or generic.