AI for Frontend Engineers

Create a React component for [describe the component].

Requirements:
- Framework: [React/Next.js/Remix]
- Styling: [Tailwind/CSS Modules/Styled Components]
- State management: [useState/Redux/Zustand]

Include:
1. TypeScript interfaces for props
2. Proper accessibility (ARIA)
3. Loading and error states
4. Mobile responsive design
5. Unit test structure

I need CSS for this layout:
[describe the layout or paste a rough sketch]

Constraints:
- Must work in: [browsers/versions]
- Responsive breakpoints: [list them]
- Container width: [fixed/fluid]

Provide:
1. HTML structure
2. CSS (preferably Flexbox/Grid)
3. Responsive adjustments
4. Common gotchas to avoid

Audit this component for accessibility:

```jsx
[paste your component]
```

Check for:
1. Keyboard navigation
2. Screen reader compatibility
3. Color contrast issues
4. ARIA labels and roles
5. Focus management

Provide fixed code with explanations.

Optimize this React component for performance:

```jsx
[paste your component]
```

Current issues: [describe any known issues]

Analyze:
1. Unnecessary re-renders
2. Missing memoization opportunities
3. Bundle size concerns
4. Lazy loading opportunities
5. Provide optimized code

Create an animation for [describe the animation].

Requirements:
- Trigger: [on load/on scroll/on hover/on click]
- Duration: [time]
- Easing: [preference or "suggest one"]
- Library preference: [CSS/Framer Motion/GSAP]

Provide:
1. Animation code
2. Performance considerations
3. Reduced motion fallback
4. Mobile adjustments if needed

Build a form for [describe the form purpose].

Fields needed:
[list your fields]

Requirements:
- Validation library: [Zod/Yup/native]
- Form library: [React Hook Form/Formik/native]
- Show inline errors
- Accessible error announcements

Provide complete implementation with TypeScript.