Build stunning UIs with React, CSS, Tailwind, and modern tools

You are a senior React developer who writes clean, production-grade code. Build a [COMPONENT NAME] React component with the following requirements: Functionality: - [DESCRIBE WHAT IT SHOULD DO] - [LIST KEY INTERACTIONS] Props: - [PROP 1]: [type] — [description] - [PROP 2]: [type] — [description] Technical requirements: - TypeScript with proper types/interfaces - Tailwind CSS for styling (or CSS Modules if specified: [STYLING CHOICE]) - Accessible — correct ARIA attributes, keyboard navigation - Mobile responsive - No external dependencies unless necessary Include: 1. The component code 2. Usage example with all props 3. Notes on any edge cases I should handle

Design a fully responsive layout for a [PAGE TYPE] page. Layout requirements: - Desktop: [DESCRIBE DESKTOP LAYOUT] - Tablet: [DESCRIBE TABLET LAYOUT] - Mobile: [DESCRIBE MOBILE LAYOUT] Breakpoints: [Tailwind defaults / custom: specify] Include: - CSS Grid or Flexbox approach (recommend the best for this layout) - Tailwind utility classes OR pure CSS (specify: [CHOICE]) - Smooth transitions between breakpoints - No horizontal scroll on any screen size Special requirements: [DARK MODE / RTL / PRINT STYLES / etc.] Also provide: common pitfalls to avoid for this specific layout.

Create a [COMPONENT TYPE: card / button / modal / navbar / form / etc.] component using only Tailwind CSS classes. Style: - Theme: [dark / light / glassmorphism / neumorphism / minimal / bold] - Color palette: [primary color / use project colors: specify] - Border radius: [sharp / medium / rounded / pill] - Shadow: [none / soft / strong] Variants needed: - Default state - Hover state - Active/pressed state - [Disabled state if applicable] - [Error state if applicable] Output: 1. Full HTML + Tailwind classes (no custom CSS needed) 2. React/JSX version 3. Dark mode version using dark: prefix 4. Explain any non-obvious Tailwind choices

Audit this frontend code for performance issues and provide specific fixes. [PASTE YOUR CODE HERE] Analyse for: 1. Unnecessary re-renders (React.memo, useMemo, useCallback opportunities) 2. Large bundle size (code splitting, lazy loading) 3. Image optimisation issues 4. Expensive DOM operations 5. Memory leaks (event listeners not cleaned up, infinite loops) 6. Slow network requests (caching, debouncing, batching) For each issue found: - Severity: [critical / major / minor] - Explanation: why this hurts performance - Fix: the corrected code - Metric impact: what this improves (LCP, FID, CLS, etc.) Also give me a prioritised action list — fix these in order for maximum impact.

Review this UI code for accessibility (WCAG 2.1 AA compliance) and fix all issues. [PASTE YOUR HTML/JSX HERE] Check for: 1. Missing or incorrect ARIA labels/roles 2. Keyboard navigation (tab order, focus management, escape key) 3. Colour contrast ratios (flag anything below 4.5:1) 4. Screen reader experience (alt text, live regions, announcements) 5. Form accessibility (labels, error messages, required fields) 6. Focus indicators (visible focus rings) 7. Semantic HTML structure Output: - Issue list with WCAG criteria reference - Corrected code for each issue - Testing checklist (how to manually verify the fixes) - Tools I can use to automate future checks

Create [ANIMATION TYPE] animations for [ELEMENT / INTERACTION]. Animation brief: - What triggers it: [hover / click / scroll / page load / route change] - What should animate: [position / opacity / scale / rotation / color / path] - Feel: [snappy / smooth / bouncy / dramatic / subtle] - Duration: [fast 150ms / medium 300ms / slow 600ms / custom] Technique: [CSS keyframes / CSS transitions / Framer Motion / GSAP — specify] Provide: 1. The animation code (CSS or JS) 2. Easing function recommendation and why 3. Performance tip (will-change, transform vs top/left, etc.) 4. Reduced motion version (prefers-reduced-motion media query) 5. Mobile performance consideration

Generate TypeScript interfaces/types for this data. [PASTE YOUR JSON, API RESPONSE, OR DESCRIPTION HERE] Requirements: - Create named interfaces (not inline types) - Use proper union types for optional/nullable fields - Add JSDoc comments explaining non-obvious fields - Suggest whether to use interface vs type for each and why - Handle nested objects as separate interfaces - Handle arrays correctly - Mark optional fields with ? - Create utility types if useful (Partial, Pick, Omit variants) Also provide: - A type guard function for the main type - Zod schema for runtime validation (if applicable)

Debug this JavaScript/React error and explain the root cause. Error message: [PASTE EXACT ERROR] Stack trace: [PASTE STACK TRACE] Code causing the error: [PASTE RELEVANT CODE] Context: [What were you doing when it occurred? What did you expect?] Environment: [Browser / Node / React version / etc.] I need: 1. Root cause: what exactly is going wrong and why 2. The fix: corrected code with inline comments 3. Why your original code caused this: conceptual explanation 4. How to prevent this class of error in the future 5. Related errors to watch for

Write a custom React hook called use[NAME] that handles [WHAT IT DOES]. Functionality: - [DESCRIBE THE LOGIC THIS HOOK SHOULD ENCAPSULATE] - [INPUT PARAMETERS WITH TYPES] - [WHAT IT RETURNS] Technical requirements: - TypeScript with proper generics if needed - Handle loading, error, and success states - Cleanup on unmount (event listeners, subscriptions, timers) - Stable references (useMemo / useCallback where needed) - Works with React 18 strict mode (no double-invocation side effects) Include: 1. The hook code (fully typed) 2. Usage example in a component 3. What to do if the hook is used before the component mounts 4. Jest test for the core behaviour

Write complete SEO and social meta tags for this page. Page details: - Title: [PAGE TITLE] - Description: [WHAT THIS PAGE IS ABOUT — 2 sentences] - URL: [FULL URL] - Image: [URL of hero image — dimensions: 1200×630px recommended] - Type: [website / article / product] - Author (if article): [AUTHOR NAME] - Published date (if article): [DATE] Generate: 1. Standard HTML meta tags (title, description, robots, canonical) 2. Open Graph tags (og:title, og:description, og:image, og:url, og:type) 3. Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) 4. JSON-LD structured data for [webpage / article / product] 5. Next.js 13+ metadata object (export const metadata = {...}) Also: 3 title variations under 60 characters for A/B testing.

Implement a complete dark mode system for a [React / Next.js / vanilla JS] app. Current setup: - Styling: [Tailwind / CSS variables / CSS modules / styled-components] - State management: [React context / Zustand / Redux / none] - SSR: [yes — Next.js / no — SPA] Requirements: - Respect system preference by default (prefers-color-scheme) - Allow manual toggle (overrides system preference) - Persist choice in localStorage - No flash of wrong theme on page load (SSR-safe) - Smooth transition between modes Deliver: 1. Theme provider/context setup 2. useTheme hook (returns current theme + toggle function) 3. Toggle button component 4. CSS variable definitions for both modes 5. How to use dark: classes in Tailwind 6. How to prevent SSR theme flash (Next.js specific if applicable)

Build a [FORM TYPE] form in React with full validation. Fields needed: [LIST EACH FIELD: name, type, required/optional, validation rules] Example: - email: string, required, must be valid email format - password: string, required, min 8 chars, must contain uppercase and number - phone: string, optional, must match [REGION] format Validation library: [React Hook Form + Zod / Formik + Yup / custom] Requirements: - Real-time validation (on blur, not on submit) - Error messages specific enough to be helpful (not just "invalid") - Loading state on submit (disable button, show spinner) - Success state (clear form or redirect) - Accessible: errors announced to screen readers, labels linked to inputs Also include: - The Zod / Yup schema - The submit handler (show me how to connect to an API) - How to handle server-side validation errors (field-level)