100 AI Prompts for Web Developers — Complete Guide

Write a reusable React component for [component name] that accepts [list of props]. Include TypeScript types, PropTypes as fallback, and a brief JSDoc comment. Use functional component syntax with hooks where needed.

I have a CSS layout problem: [describe the issue]. Here is my current CSS: [paste CSS]. The expected behavior is [describe expected]. Diagnose the root cause and provide a corrected version with an explanation.

Convert the following vanilla CSS to Tailwind CSS utility classes. Preserve all visual properties including responsive breakpoints. If a style has no direct Tailwind equivalent, suggest the closest alternative or a custom utility. CSS: [paste CSS]

Build a fully responsive navigation bar in [React/Vue/Vanilla JS] that includes a desktop horizontal menu and a mobile hamburger menu with smooth animation. Include accessibility attributes (aria-expanded, aria-label) and keyboard navigation support.

Analyze this Next.js/React page component for Core Web Vitals issues (LCP, FID, CLS). Identify the top 3 performance bottlenecks and provide specific code-level fixes with before/after examples. Component code: [paste code]

Create an accessible HTML form for [form purpose] that follows WCAG 2.1 AA standards. Include proper label associations, error messages with aria-describedby, focus management, and a visible focus indicator. Validate [list of fields] client-side.

Implement an infinite scroll feature in [React/Vue] using the Intersection Observer API. The component should fetch paginated data from [API endpoint], show a loading skeleton during fetch, handle errors gracefully, and stop loading when all data is consumed.

Build a drag-and-drop list component in React using the HTML5 Drag and Drop API (no external library). Items should be reorderable, show a visual drop indicator, and emit an onChange callback with the new order. Handle touch events for mobile support.

Design a CSS custom properties (variables) token system for a design system covering colors, typography, spacing, border-radius, and shadows. Include light and dark mode tokens, semantic naming conventions, and a JavaScript utility to consume them at runtime.

Implement a virtualized list component in React that can render 100,000+ items without performance degradation. Use a windowing approach, calculate visible item range dynamically based on scroll position, and support variable item heights. Include scroll restoration.

Write Storybook 7 stories for the following React component: [paste component]. Include stories for all major states (default, loading, error, empty), use Args controls for all props, and add a11y addon checks. Follow the Component Story Format (CSF3).

My web app bundle is [X KB]. Here is my webpack/Vite config and main dependencies: [paste config and package.json]. Identify the top opportunities to reduce bundle size through code splitting, tree shaking, lazy loading, and dependency replacement. Provide actionable changes.

Design a RESTful API for a [application type] application. Define all endpoints with HTTP methods, URL structure, request/response schemas, status codes, and pagination strategy. Follow REST best practices and include versioning in the URL path.

Write a [PostgreSQL/MySQL/SQLite] database migration to [describe the schema change]. Include both the up migration and a safe down migration. Add appropriate indexes for the new columns and ensure the migration can run on a live database with minimal locking.

Implement JWT authentication in [Node.js/Python/Go] with access tokens (15 min expiry) and refresh tokens (7 days). Include token generation, validation middleware, refresh endpoint, and secure token storage recommendations. Handle edge cases like token revocation.

Write a [Prisma/Drizzle/TypeORM/SQLAlchemy] query to [describe the data retrieval need]. The query should [describe filters, joins, aggregations needed]. Optimize it to avoid N+1 problems and include the equivalent raw SQL for comparison.

Implement rate limiting middleware for a [Express/Fastify/Django] API using a sliding window algorithm with Redis. Allow [X] requests per [time window] per IP. Return proper 429 headers (Retry-After, X-RateLimit-*) and whitelist internal service IPs.

Design a multi-layer caching strategy for [describe the application and its data patterns]. Include in-memory cache (e.g., Redis), HTTP cache headers, and CDN caching rules. Define TTL for each data type, cache invalidation strategy, and cache warming approach.

Design and implement a reliable webhook delivery system in [language/framework]. Include endpoint registration, event payload signing (HMAC-SHA256), retry logic with exponential backoff, delivery logs, and a way for subscribers to verify payloads.

The following SQL query is taking [X seconds] on a [Y million rows] table: [paste query]. Here is the EXPLAIN ANALYZE output: [paste output]. Identify the bottleneck, suggest index changes, and rewrite the query for maximum performance.

Implement a background job queue in [Node.js/Python] using [BullMQ/Celery/pg-boss] for processing [job type] tasks. Include job definition, worker setup, retry configuration, dead letter queue, progress tracking, and a simple admin UI endpoint to monitor jobs.

Generate OpenAPI 3.0 documentation for the following API routes: [paste route definitions]. Include request/response schemas with examples, authentication requirements, error responses, and markdown descriptions for each endpoint. Output valid YAML.

Write comprehensive unit tests for the following function using [Jest/Vitest/pytest]: [paste function]. Cover happy path, edge cases, and error cases. Use descriptive test names, mock external dependencies, and aim for 100% branch coverage.

Review the following [language] code for bugs, logic errors, security vulnerabilities, and performance issues. For each issue found, explain the problem, its potential impact, and provide a corrected code snippet. Code: [paste code]

Refactor the following code for improved readability and maintainability without changing behavior. Apply [SOLID principles / clean code principles], extract magic numbers into named constants, improve variable naming, and reduce nesting depth. Code: [paste code]

Write integration tests for the following API endpoint using [Supertest/Pytest/Go httptest]: [paste route handler]. Test authentication, validation errors, successful responses, and database side effects. Use a test database and clean up after each test.

Create an ESLint configuration for a [React/Node.js/TypeScript] project that enforces [list code style preferences]. Include rules for import ordering, unused variables, accessibility (eslint-plugin-jsx-a11y), and security (eslint-plugin-security). Provide the .eslintrc.json file.

My codebase has [X%] test coverage. Here are the most critical modules: [list modules]. Prioritize which areas to test first based on business impact and risk. For each priority area, describe what types of tests to write and what edge cases to cover.

Implement property-based tests for the following function using [fast-check/Hypothesis/QuickCheck]: [paste function]. Define meaningful properties that must hold for all valid inputs, generate appropriate arbitraries, and add shrinking for better failure messages.

Set up a pre-commit hooks configuration using Husky + lint-staged (or pre-commit for Python) that runs: type checking, linting, unit tests for staged files, and secret scanning. Ensure hooks run in under 30 seconds and provide clear error messages.

Set up mutation testing for my [JavaScript/Python] project using [Stryker/mutmut]. Explain which mutation operators are most relevant for my codebase: [describe codebase]. Interpret the mutation score results and identify which tests need strengthening.

Write comprehensive JSDoc/docstring documentation for the following function. Include a description, @param with types and descriptions, @returns, @throws for all error cases, @example with realistic usage, and complexity notes if relevant. Function: [paste function]

Design a microservices architecture for [application description]. Define service boundaries, communication patterns (sync REST vs async messaging), data ownership per service, API gateway responsibilities, and service discovery strategy. Identify top 3 risks and mitigations.

I need to choose a database for [describe the use case: data structure, read/write ratio, scale requirements, consistency needs]. Compare the top 3 suitable options (SQL, NoSQL, NewSQL, etc.) with pros/cons for my specific requirements and give a clear recommendation.

Design an event-driven architecture for [business process]. Define the domain events, their schemas, producer/consumer relationships, and message broker choice. Include event versioning strategy, idempotency handling, and how to handle failures in the event pipeline.

I have a monolithic [language/framework] application with [describe main modules]. Create a phased migration plan to microservices using the Strangler Fig pattern. Define extraction order, data migration strategy, feature flag rollout, and rollback plan for each phase.

Design a multi-tenant architecture for a SaaS application that needs to support [expected tenant count] tenants. Compare row-level isolation, schema-per-tenant, and database-per-tenant approaches for my use case. Provide the recommended approach with implementation details.

Write an Architecture Decision Record (ADR) for the decision to [describe the architectural decision]. Use the MADR format: title, status, context, decision, consequences, and alternatives considered. Be specific about the tradeoffs that led to this decision.

Design a feature flag system for [application type] that supports percentage rollouts, user segment targeting, and A/B testing. Define the data model, evaluation logic, SDK interface, admin API, and how to safely clean up old flags without breaking production.

Review the following system design for scalability bottlenecks: [describe or diagram the system]. The system needs to handle [target load]. Identify the top 5 bottlenecks in order of impact, and for each one provide a concrete solution with estimated improvement.

Design an API versioning strategy for a public API used by [number] external clients. Compare URL versioning, header versioning, and content negotiation for my use case. Define the deprecation policy, migration guide template, and sunset header implementation.

Design a disaster recovery plan for a [application type] with RTO of [X hours] and RPO of [Y minutes]. Define backup strategy, multi-region failover architecture, data replication approach, runbook for failover activation, and regular DR drill procedure.

Audit the following database query code for SQL injection vulnerabilities. For each vulnerable pattern found, explain the attack vector, show a proof-of-concept exploit, and provide the parameterized query fix. Code: [paste code]

Generate the complete set of OWASP-recommended security headers for a [framework] web application. Include Content-Security-Policy, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy. Explain each header's purpose and provide the middleware implementation.

Write comprehensive input validation for a [language/framework] API endpoint that accepts [describe the input fields]. Use [Zod/Joi/Pydantic/Yup] for schema validation. Cover type checking, length limits, format validation, and sanitization. Include validation error response format.

Perform a STRIDE threat model for the following system component: [describe component, its inputs, outputs, and trust boundaries]. For each threat category (Spoofing, Tampering, Repudiation, Information Disclosure, Denial of Service, Elevation of Privilege), identify specific threats and mitigations.

Design a secrets management strategy for a [cloud provider] production environment. Cover secret storage (Vault/AWS Secrets Manager), secret rotation, injection into services at runtime, audit logging of secret access, and how to handle secret leaks in git history.

Audit the following authentication implementation for security vulnerabilities: [paste auth code]. Check for: timing attacks, brute force protection, session fixation, insecure password storage, enumeration vulnerabilities, and missing MFA support. Provide fixes for each issue.

Implement a Role-Based Access Control (RBAC) system in [language/framework] for an application with roles: [list roles] and resources: [list resources]. Design the permission model, database schema, authorization middleware, and a way to check permissions in service-layer code.

Set up automated dependency vulnerability scanning in a [Node.js/Python/Java] project CI pipeline. Compare npm audit / Snyk / Dependabot / OWASP Dependency-Check for my use case. Provide the CI configuration, define severity thresholds that block the build, and set up auto-PRs for fixes.

Implement a strict Content Security Policy using nonces for inline scripts in a [Next.js/Express] application. Generate a cryptographic nonce per request, inject it into the CSP header and script tags, and verify the policy blocks XSS in common attack scenarios. Handle third-party scripts.

Create a security incident response runbook for a web application that handles [type of sensitive data]. Cover detection (alerting rules), triage steps, containment actions, evidence preservation, customer notification template, post-mortem structure, and how to test the runbook quarterly.