You are an expert React developer who writes clean,
modern functional components using hooks. Help me build
a user profile component.

Generate a React component. Return only the code with no
explanations. Use TypeScript. Include prop types and JSX.

Create a modal component with these constraints:
- Use only React hooks, no class components
- Style with Tailwind CSS utility classes
- Must be accessible (ARIA labels, keyboard navigation)
- Maximum 50 lines of code
- No external dependencies beyond React

Create a search feature for a blog. Follow these steps:
1. Create a SearchBar component with an input field
2. Add debouncing to the search input (300ms delay)
3. Create a custom hook useSearch that filters posts
4. Show loading state while searching
5. Display results in a SearchResults component

I'm getting this error: "Cannot read property 'map' of undefined"

Here's my component:

function PostList({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <Post key={post.id} {...post} />
      ))}
    </div>
  );
}

What's wrong and how do I fix it?

Transform this component to use TypeScript with proper types:

[paste your JavaScript component here]

Add interfaces for props and state.

I have this component using useState for form handling:

[current code]

Refactor it to use React Hook Form library instead.
Maintain the same validation logic.

Create a React component called ProductCard with these requirements:

- Accept props: title, price, imageUrl, onAddToCart
- Display product image, title, and formatted price
- Include an "Add to Cart" button that calls onAddToCart
- Use TypeScript for prop types
- Style with CSS modules
- Add hover effects on the card
- Make it responsive (mobile-first)

Return the complete component with imports.

import React from 'react';
import styles from './ProductCard.module.css';

interface ProductCardProps {
  title: string;
  price: number;
  imageUrl: string;
  onAddToCart: () => void;
}

const ProductCard: React.FC<ProductCardProps> = ({
  title,
  price,
  imageUrl,
  onAddToCart
}) => {
  const formattedPrice = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(price);

  return (
    <div className={styles.card}>
      <img src={imageUrl} alt={title} className={styles.image} />
      <div className={styles.content}>
        <h3 className={styles.title}>{title}</h3>
        <p className={styles.price}>{formattedPrice}</p>
        <button className={styles.button} onClick={onAddToCart}>
          Add to Cart
        </button>
      </div>
    </div>
  );
};

export default ProductCard;

Convert this JavaScript React component to TypeScript:

[paste your component]

Add:
- Interface for props with JSDoc comments
- Proper types for all state variables
- Type for event handlers
- Return type for the component

Create a custom React hook called useLocalStorage that:

- Accepts a key and initial value
- Syncs state with localStorage
- Returns [value, setValue] like useState
- Handles JSON serialization automatically
- Includes error handling for localStorage failures
- Works with TypeScript (generic type)

Include usage example.

import { useState, useEffect } from 'react';

function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error loading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(`Error saving localStorage key "${key}":`, error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

Optimize this component for performance:

[paste your component]

Apply these optimizations:
- Use React.memo where appropriate
- Add useCallback for event handlers
- Use useMemo for expensive calculations
- Explain each optimization added

Debug this React component. It's not working correctly:

[paste component code]

The issue is: [describe the problem]

Provide:
1. Explanation of what's wrong
2. Fixed code
3. Why the fix works

Refactor this component for better readability:

[paste component]

Focus on:
- Breaking into smaller functions
- Better variable names
- Removing duplication
- Adding helpful comments
- Improving structure

Write tests for this React component using Jest and React Testing Library:

[paste component]

Include tests for:
- Component renders correctly
- Props are displayed properly
- User interactions work
- Edge cases and error states
- Accessibility

Convert this class component to a functional component with hooks:

[paste class component]

Requirements:
- Use useState for state
- Use useEffect for lifecycle methods
- Maintain the same functionality
- Add comments explaining the conversion

Improve the accessibility of this component:

[paste component]

Add:
- ARIA labels and roles
- Keyboard navigation support
- Focus management
- Screen reader announcements
- Proper semantic HTML

Generate documentation for this React component:

[paste component]

Include:
- Component description
- Props table with types and descriptions
- Usage examples (basic and advanced)
- Notes about behavior
- Accessibility information