Best AI Prompts for Coding & Tech in 2026

Write an accessible, reusable Design System `Button` component in React using TypeScript, Tailwind CSS, and `clsx` / `tailwind-merge`. Requirements: - Variants: `primary`, `secondary`, `outline`, `danger`, `ghost`. - Sizes: `sm`, `md`, `lg`. - States: `isLoading`, `isDisabled`. - When `isLoading` is true, display accessible loading spinner, disable interactions, and set `aria-busy="true"`.

Act as a Senior React Developer. Write a responsive Navigation Bar component using React 18, TypeScript, and Tailwind CSS. Requirements: - Include desktop navigation links and a mobile hamburger menu. - Use React `useState` to control mobile drawer visibility. - Close the drawer on ESC key press and when clicking outside. - Ensure proper ARIA attributes (`aria-expanded`, `aria-label`). - Export explicit TypeScript interface for navigation items (`{ label: string; href: string; icon?: React.ReactNode }`). - Provide pure, runnable code with…

The following component throws a "Text content does not match server-rendered HTML" hydration mismatch error in Next.js. Explain why this issue happens (e.g., `localStorage`, `window` checks, dates) and fix the component cleanly using a custom `useIsMounted` hook or safe standard React 18 layout effect. [INSERT SSR CODE HERE]

Act as a TypeScript expert. Create typed React Props and Zod validation schemas for the following backend JSON response. Ensure nested objects and array elements are strongly typed with proper optionality. [INSERT JSON RESPONSE HERE]

Write a complete unit test file for the provided custom hook using `@testing-library/react` (`renderHook` and `act`). Test initial value setup, state updates on action triggers, and edge case resets. [INSERT HOOK CODE HERE]

Create a reusable Modal Dialog component in React using TypeScript and Tailwind CSS. Requirements: - Props: `isOpen` (boolean), `onClose` () => void, `title` (string), `children` (React.ReactNode). - Trap focus within the modal when open using pure React refs (or focus-trap pattern). - Prevent background page scrolling when modal is open. - Handle Keyboard events: 'Escape' key must trigger `onClose`. - Include smooth transition backdrop animations.

Explain and fix the stale closure bug present inside this custom hook's `setInterval` / `useCallback` loop. Ensure updated state values are correctly captured across re-renders without causing infinite re-render loops. [INSERT BUGGY HOOK HERE]

Write a strongly typed generic Dropdown React component (`Select`). Requirements: - Props: `items: T[]`, `selectedItem: T | null`, `onSelect: (item: T) => void`, `placeholder?: string`. - Ensure component fully preserves generic type inferencing when rendered by parent components.

Write a unit test for a navigation drawer component using React Testing Library and `jest-axe`. Verify that the component passes automated WCAG accessibility audits when open and closed.

Write a functional React component in TypeScript that implements an infinite scroll list using the Intersection Observer API. Requirements: - Do not use external libraries for scrolling. - Fetch paginated mock data asynchronously when the sentinel element enters the viewport. - Include explicit visual loading indicators, end-of-list indicator, and error recovery buttons. - Handle cleanup for the Intersection Observer properly inside `useEffect`.

Fix the React browser console warning: "A component is changing an uncontrolled input to be controlled". Refactor the form handling code to ensure initial state values are always defined string primitives. [INSERT FORM CODE HERE]

Create a polymorphic `Button` component in React using TypeScript. Requirements: - Accept dynamic `as` prop (e.g., render as ``, ``, or Next.js ``). - Dynamically merge HTML attributes specific to the rendered tag using `React.ComponentPropsWithoutRef`. - Support forwarded refs (`React.forwardRef`).

Write a test simulating full end-to-end user interaction flow: click button -> open modal -> type text in modal input -> submit modal form -> verify modal closes and main page updates. Use React Testing Library and Vitest.

Act as a React Lead. Build a 3-step User Onboarding Form component using React 18, TypeScript, and React Hook Form with Zod validation schema. Requirements: - Step 1: Account Info (Email, Password). - Step 2: Profile Details (Full Name, Avatar URL). - Step 3: Confirmation and Summary. - Allow users to move back and forth without losing step data. - Validate inputs per step before allowing navigation to the next step.

Write a fully accessible Accordion UI component in React and TypeScript. Requirements: - Implement appropriate ARIA attributes: `aria-expanded`, `aria-controls`, `aria-disabled`, `role="region"`. - Keyboard interaction support: Arrow Up, Arrow Down, Home, End keys move focus across accordion headers. - Space and Enter keys toggle expanded states.