50 Best ChatGPT Prompts for Web Development (2026)

Analyze this website's component architecture and suggest how to decompose it into reusable React components with TypeScript interfaces.

Create a responsive navigation component using React and Tailwind CSS that collapses into a hamburger menu on mobile.

Build a pricing card grid component with React that supports highlighted/featured tiers using the compound component pattern.

Generate a custom React hook for managing form state with validation, including TypeScript generics for type safety.

Create a React component library structure for a design system, including Button, Input, Card, and Modal with variants.

Write a React context provider for theme management (light/dark mode) with TypeScript and localStorage persistence.

Build an accessible accordion/FAQ component using React with proper ARIA attributes and keyboard navigation.

Create a React data table component with sorting, filtering, pagination, and TypeScript generics for row data types.

Generate a React lazy-loading image component with blur placeholder, intersection observer, and WebP/AVIF support.

Build a React component for an animated step-by-step wizard with progress indicator and form validation.

Set up a Next.js 14 App Router project structure for a SaaS landing page with proper file organization and metadata.

Create a Next.js dynamic route with generateStaticParams for a blog section including MDX support and reading time.

Build a Next.js API route handler for a waitlist signup form with Zod validation and rate limiting.

Generate a Next.js layout component hierarchy with shared navigation, footer, and nested layouts for /blog and /docs.

Create a Next.js middleware for A/B testing that assigns users to variants based on cookies.

Build a Next.js sitemap.ts that dynamically generates XML sitemaps including static pages and dynamic routes.

Create Next.js loading.tsx and error.tsx for each route segment with skeleton UI and error messages.

Generate a Next.js server action for handling form submissions with optimistic updates and error handling.

Build a Next.js image optimization pipeline using next/image with custom loader and responsive sizes.

Create Next.js parallel routes for a dashboard with simultaneous loading of sidebar, main content, and notifications.

Audit this React component for performance — identify unnecessary re-renders and missing memoization.

Create a Lighthouse CI configuration for automated performance testing in a GitHub Actions pipeline.

Write React.lazy and Suspense implementation for code-splitting with route-based and component-based splitting.

Generate a service worker for Next.js that caches static assets, API responses, and provides offline fallback.

Optimize this React component tree for Core Web Vitals — reduce LCP, minimize CLS, and improve INP.

Create a custom React hook for debounced API calls with AbortController cancellation and loading states.

Write a Next.js script loading strategy that defers analytics and third-party scripts until after interaction.

Build virtual scrolling for a long list (10,000+ items) using React with fixed and variable row heights.

Generate a Web Vitals monitoring setup for Next.js that reports CWV metrics to a custom analytics endpoint.

Create an image optimization pipeline generating WebP/AVIF formats, responsive srcsets, and blur placeholders.