Create a smooth transition animation for [describe the element] when it [describe the action]. Use CSS transitions or Framer Motion, ensuring the animation works well across devices and doesn't harm performance.

Implement a data fetching pattern for [describe the data] using React Query. Include proper loading states, error handling, optimistic updates, and data synchronization strategies.

Create a form with validation for [describe form fields and validation rules]. Use react-hook-form with zod schema validation, proper error handling, and submission handling that includes loading states.

Optimize this React component to prevent unnecessary re-renders: [paste component]. Use memo, useMemo, and useCallback where appropriate. Add explanatory comments about why each optimization is needed.

Refactor this component to use React Context instead of prop drilling: [paste component]. Create a proper context provider with typed state and actions, and separate the business logic from UI rendering.

Create a custom React hook called use[Name] that handles [functionality]. It should handle proper state initialization, cleanup, memoization of values, and TypeScript typing. Include example usage and error handling.