ChatGPT Prompts for Web Development

Build a responsive CSS layout for the following design requirement.

**Layout description:**
[describe the layout, e.g., "A dashboard with a fixed sidebar on the left (250px on desktop, hidden on mobile with a hamburger toggle), a top navigation bar, and a scrollable main content area with a 3-column card grid"]

**Requirements:**
- Breakpoints: mobile (<640px), tablet (640px-1024px), desktop (>1024px)
- Use [CSS Grid / Flexbox / both] as the primary layout method
- Mobile-first approach
- No CSS framework — vanilla CSS or CSS Modules only
- Container should have a max-width of [e.g., 1280px] and be centered

**Provide:**
1. The complete HTML structure with semantic elements (header, nav, main, aside, footer)
2. The full CSS with media queries for each breakpoint
3. Explain any layout decisions and how the grid/flex containers adapt at each breakpoint
4. Note any browser compatibility concerns

Create a production-ready React component with the following specification.

**Component name:** [e.g., DataTable]
**Purpose:** [describe what it does, e.g., "A sortable, filterable data table with pagination that accepts an array of objects"]

**Props interface:**
- [prop name]: [type] — [description]
- [prop name]: [type] — [description]

**Functional requirements:**
- [e.g., "Click column headers to sort ascending/descending"]
- [e.g., "Search input filters rows across all visible columns"]
- [e.g., "Pagination with configurable page size (10, 25, 50)"]

**Technical requirements:**
- TypeScript with strict types (no `any`)
- React [version, e.g., 18] with functional components and hooks
- Styling approach: [Tailwind CSS / CSS Modules / styled-components]
- Must be accessible (keyboard navigation, ARIA attributes, screen reader support)
- Include loading and empty states

Provide the component file, its TypeScript types, and a usage example showing how to integrate it with sample data.

Write a complete API integration layer for a [framework, e.g., React / Next.js / Vue] application that connects to the following REST API.

**Base URL:** [e.g., https://api.example.com/v1]
**Authentication:** [e.g., Bearer token in Authorization header]

**Endpoints to integrate:**
1. [GET /resource] — list items with pagination
2. [GET /resource/:id] — get single item
3. [POST /resource] — create item
4. [PUT /resource/:id] — update item
5. [DELETE /resource/:id] — delete item

**Requirements:**
- Create a typed API client with error handling (network errors, 4xx, 5xx)
- Implement request/response interceptors for auth token injection and token refresh
- Add retry logic for transient failures (503, 429) with exponential backoff
- TypeScript interfaces for all request and response payloads
- Custom React hooks (e.g., useResource, useCreateResource) with loading, error, and data states
- Handle race conditions and request cancellation on unmount

Show the folder structure, the API client module, type definitions, and at least two custom hooks with usage examples.

Perform a comprehensive accessibility audit on the following HTML/JSX code against WCAG 2.1 AA standards.

**Code to audit:**
[paste your HTML or JSX component]

**Page context:** [e.g., "This is an e-commerce product listing page with filters, a card grid, and a modal for quick view"]

**Audit checklist — check each area:**
1. Semantic HTML — proper heading hierarchy (h1-h6), landmark regions, correct element choices (button vs div)
2. Keyboard navigation — all interactive elements focusable, logical tab order, visible focus indicators, no keyboard traps
3. Screen reader support — ARIA labels, roles, live regions for dynamic content, alt text for images
4. Color and contrast — minimum 4.5:1 for body text, 3:1 for large text and UI components
5. Forms — label associations, error messages linked to inputs, required field indicators
6. Motion and animation — respect prefers-reduced-motion, no auto-playing content

**Provide:**
- A numbered list of issues, each with severity (Critical / Major / Minor)
- The exact code fix for each issue
- A summary of the fixes as a before/after diff

Generate complete SEO meta tags and JSON-LD structured data for the following web page.

**Page type:** [e.g., product page, blog post, FAQ page, local business, recipe]
**Page URL:** [e.g., https://example.com/products/widget-pro]
**Page title:** [your preferred title]
**Page description:** [brief description of the content]

**Page-specific data:**
[provide relevant details like: product price, author name, publish date, FAQ questions, business address, etc.]

**Generate:**
1. Complete `<head>` meta tags: title, description, canonical URL, robots
2. Open Graph tags (og:title, og:description, og:image, og:type, og:url)
3. Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image)
4. JSON-LD structured data appropriate for the page type (e.g., Product, Article, FAQPage, LocalBusiness)
5. Any additional schema.org markup that would enhance rich snippet eligibility

**Also include:**
- The recommended image dimensions for OG and Twitter cards
- A note on any fields that are required vs. recommended for Google rich results
- Validation tips (how to test with Google Rich Results Test and Schema Markup Validator)

Create a CSS animation based on the following description.

**Animation description:**
[describe what you want, e.g., "A notification bell icon that shakes side-to-side when a new notification arrives, then settles with a subtle bounce"]

**Technical requirements:**
- Pure CSS (no JavaScript for the animation itself)
- Duration: [e.g., 600ms]
- Easing: [e.g., ease-out, cubic-bezier if custom]
- Should respect `prefers-reduced-motion: reduce` (provide a fallback)
- Trigger: [e.g., on hover, on class toggle, on page load, infinite loop]
- Must be performant — only animate `transform` and `opacity` (no layout-triggering properties)

**Provide:**
1. The complete `@keyframes` definition with detailed comments on each keyframe step
2. The CSS class that applies the animation with all vendor considerations
3. The `prefers-reduced-motion` media query override
4. A minimal HTML example showing how to trigger the animation
5. Any JavaScript needed to toggle the animation class (if trigger is event-based)
6. Explain why specific easing and timing values were chosen for the desired visual effect

Build a complete client-side form validation system for the following form.

**Form fields:**
[list each field with its type and validation rules, e.g.:
- email: required, valid email format
- password: required, min 8 chars, at least one uppercase, one number, one special character
- confirmPassword: must match password
- phone: optional, valid international format
- dateOfBirth: required, must be 18+ years old]

**Technical requirements:**
- Framework: [vanilla JS / React with hooks / Vue composition API]
- Real-time validation (validate on blur, re-validate on input after first error)
- Show inline error messages below each field
- Disable submit button until all validations pass
- Handle form submission with loading state and server-side error mapping
- TypeScript types for form state, errors, and validation rules

**Provide:**
1. The validation utility functions (reusable, not coupled to any specific form)
2. The form component with state management and error display
3. CSS for error states (red border, error message styling, shake animation on submit with errors)
4. A submission handler that demonstrates how to display server-returned field errors

Implement a complete dark mode system for a [vanilla CSS / Tailwind CSS / CSS-in-JS] website.

**Current setup:**
- Framework: [e.g., Next.js 14, React 18, vanilla HTML]
- Current styling approach: [e.g., CSS custom properties, Tailwind, SCSS]
- Color palette: [list your current light mode colors, e.g., background: #ffffff, text: #1a1a1a, primary: #2563eb, surface: #f3f4f6]

**Requirements:**
1. System preference detection (prefers-color-scheme) as default
2. Manual toggle that overrides system preference
3. Persist user choice in localStorage
4. No flash of incorrect theme on page load (FOUC prevention)
5. Smooth transition when switching themes (200ms on background-color and color)
6. Dark mode colors should maintain WCAG AA contrast ratios

**Provide:**
1. CSS custom properties setup for both light and dark themes
2. The theme toggle component (button with sun/moon icon swap)
3. The JavaScript/React logic for initialization, toggle, and persistence
4. The inline script that must go in `<head>` to prevent FOUC
5. A color mapping table showing each light color and its dark equivalent with contrast ratios
6. Any Tailwind config changes needed (if using Tailwind)

Analyze the following web page or application code and create a comprehensive performance optimization plan.

**Current setup:**
- Framework: [e.g., Next.js, React SPA, vanilla HTML]
- Hosting: [e.g., Vercel, AWS, shared hosting]
- Current Lighthouse performance score: [if known]
- Main performance complaint: [e.g., "First load takes 5+ seconds", "Scrolling is janky", "Large bundle size"]

**Code/config to review:**
[paste relevant code: component tree, webpack/vite config, package.json, or describe the page structure]

**Generate an optimization plan covering:**
1. **Core Web Vitals** — specific fixes for LCP, FID/INP, and CLS
2. **Bundle size** — code splitting strategy, tree shaking issues, heavy dependency alternatives
3. **Images** — format recommendations (WebP/AVIF), lazy loading, responsive srcset, proper sizing
4. **Fonts** — loading strategy (font-display: swap, preload, subset)
5. **JavaScript** — defer/async strategy, hydration optimization, unnecessary re-renders
6. **CSS** — critical CSS extraction, unused CSS removal, render-blocking stylesheets
7. **Caching** — HTTP cache headers, service worker strategy, CDN configuration
8. **Third-party scripts** — audit and loading strategy (defer, facade pattern)

Prioritize fixes by impact (high/medium/low) and implementation effort (easy/medium/hard). Start with quick wins.

Build a complete, production-ready landing page from the following description.

**Product/service:** [e.g., "A SaaS tool that automates social media scheduling"]
**Target audience:** [e.g., "Small business owners and solo marketers"]
**Tone:** [e.g., professional but approachable, bold and playful, minimal and clean]

**Page sections (in order):**
1. Hero — headline, subheadline, CTA button, hero image placeholder
2. Social proof — logo bar of 4-6 company logos
3. Features — 3-4 features with icons, titles, and descriptions
4. How it works — 3-step process with numbered steps
5. Testimonials — 2-3 customer quotes with names and titles
6. Pricing — [describe tiers if applicable]
7. FAQ — 4-5 common questions
8. Final CTA — closing headline with CTA button
9. Footer — links, copyright, social icons

**Technical requirements:**
- Semantic HTML5 with proper heading hierarchy
- Mobile-first responsive CSS (no framework, vanilla CSS)
- CSS custom properties for colors, fonts, spacing
- Smooth scroll for anchor navigation
- Animations on scroll (using Intersection Observer, not a library)
- Total page weight under 50KB (excluding images)

Provide the complete HTML file and CSS file, ready to open in a browser.

Generate a complete REST API from the following database schema.

**Database:** [PostgreSQL / MySQL / MongoDB / SQLite]
**Backend framework:** [Express.js / Fastify / Next.js API routes / Django REST / Flask]
**ORM:** [Prisma / Drizzle / TypeORM / Sequelize / SQLAlchemy / none (raw SQL)]

**Schema:**
[paste your CREATE TABLE statements, Prisma schema, or describe the tables and relationships]

**For each table/model, generate:**
1. CRUD route handlers (GET list with pagination + filtering, GET by ID, POST, PUT/PATCH, DELETE)
2. Input validation and sanitization (using [Zod / Joi / class-validator / manual])
3. Proper HTTP status codes (200, 201, 204, 400, 404, 409, 500)
4. Error handling middleware with consistent error response format
5. TypeScript types for request params, body, query, and response

**Additional requirements:**
- Implement soft delete where appropriate
- Add rate limiting configuration
- Include authentication middleware placeholder
- Handle relational data (eager loading vs. separate endpoints)
- Add request logging

Organize the output by file: routes, controllers, validators, middleware, types.

Create a complete CI/CD pipeline configuration for deploying a [framework, e.g., Next.js / React / Vue] application.

**Project details:**
- Framework: [e.g., Next.js 14 with App Router]
- Package manager: [npm / yarn / pnpm / bun]
- Hosting target: [Vercel / AWS (ECS, Lambda, S3+CloudFront) / DigitalOcean / self-hosted VPS]
- CI platform: [GitHub Actions / GitLab CI / CircleCI]
- Branching strategy: [e.g., main + feature branches, GitFlow]

**Pipeline stages to configure:**
1. **Install** — dependency caching strategy for fast installs
2. **Lint** — ESLint + Prettier checks
3. **Type check** — TypeScript strict mode
4. **Test** — unit tests with coverage threshold (e.g., 80%)
5. **Build** — production build with environment variable injection
6. **Preview deploy** — automatic preview URL for pull requests
7. **Production deploy** — deploy to production on merge to main
8. **Post-deploy** — health check, Lighthouse CI audit, Slack/Discord notification

**Also include:**
- Environment variable management (secrets vs. public vars)
- Docker setup if applicable (Dockerfile + docker-compose.yml)
- Rollback strategy
- Branch protection rules recommendation

Provide the complete CI config file(s) with inline comments explaining each step.