Prompts
Explore a curated collection of AI prompts, UI patterns, and full‑stack examples for React and TypeScript. Browse, search, and filter high-quality prompts, templates, and implementation tips to accelerate UI design, component development, and production-ready full‑stack workflows.
backend | database
Design Database Relationships Using AI
Use this AI prompt to automatically design one-to-many and many-to-many database relationships between entities, including relational mappings and foreign keys.
Claude 3 Opus or GPT-4o
backend | database
Optimize MongoDB Queries for Performance
Use this AI prompt to analyze MongoDB queries, detect performance issues, and suggest indexing or aggregation optimizations for faster execution.
Claude 3 Opus
backend | database
Generate Mongoose Schema for MongoDB Collections
Use this AI prompt to generate MongoDB Mongoose schemas with validation, indexes, timestamps, and references between collections for scalable data modeling.
GPT-4o or Claude 3.5 Sonnet
backend | nodejs
Implement JWT Authentication in Node.js and Express
Use this AI prompt to generate complete JWT authentication for Node.js with login, signup, and middleware-based token verification for protected routes.
GPT-4o or Claude 3.5 Sonnet
backend | nodejs
Add Centralized Error Handling Middleware in Express
Use this AI prompt to create a global error-handling middleware for Express that formats error responses, logs issues, and prevents crashes in production.
Claude 3.5 Sonnet or GPT-4o
backend | nodejs
Optimize Node.js and Express API Performance
Use this AI prompt to analyze your Express app and get AI-generated recommendations for performance improvements such as caching, async optimization, and route-level profiling.
Claude 3 Opus or GPT-4o
backend | nodejs
Generate REST API Endpoints in Node.js with Express
Use this AI prompt to scaffold complete REST API routes and controllers in Node.js using Express. Includes route setup, CRUD operations, and proper response formatting.
Claude 3.5 Sonnet or GPT-4o
backend | nodejs
Add Input Validation Middleware in Express using Zod
Use this AI prompt to create Zod-based validation middleware for Express APIs to ensure type safety and clean error responses.
Claude 3 Opus or GPT-4o
backend | database
Generate Prisma Schema for SQL or MongoDB Databases
Use this AI prompt to generate Prisma schema files defining models, relationships, and enums, optimized for SQL or MongoDB connections.
Claude 3 Opus or GPT-4o
backend | database
Generate Seed Script for Prisma Database
Use this AI prompt to generate a Prisma database seed script to populate sample data across multiple models using async operations.
GPT-4o-mini or Claude 3.5 Sonnet
frontend | nextjs
Create a Next.js API Route with Validation
Use this AI prompt to generate an API route inside Next.js app router with input validation using Zod and proper response types.
Claude 3.5 Sonnet
frontend | nextjs
Optimize Images in Next.js Using next/image
Use this AI prompt to refactor or create Next.js components that use the next/image component for lazy loading, responsive resizing, and SEO-friendly images.
Claude 3.5 Sonnet or GPT-4o-mini
frontend | nextjs
Generate SEO Metadata for Next.js Pages
Use this AI prompt to create optimized SEO metadata for Next.js routes with title, description, canonical URL, and Open Graph tags.
GPT-4o or Claude 3.5 Sonnet
frontend | tailwind
Add Dark Mode Toggle Using TailwindCSS
Use this AI prompt to add a dark mode toggle to your TailwindCSS project, supporting persisted user preferences with localStorage.
Claude 3.5 Sonnet or GPT-4o-mini
frontend | tailwind
Design Responsive Layouts with TailwindCSS
Use this AI prompt to generate grid and flex-based responsive layouts in TailwindCSS for consistent mobile-first design patterns.
Claude 3.5 Sonnet or GPT-4o
frontend | tailwind
Extend TailwindCSS Theme for Custom Design Tokens
Use this AI prompt to extend your TailwindCSS configuration file with custom tokens for brand colors, typography, spacing, and breakpoints.
GPT-4o or Claude 3 Opus
frontend | tailwind
Generate Modern UI Components with TailwindCSS
Use this AI prompt to generate responsive, minimalistic, and visually appealing UI components using TailwindCSS classes. Ideal for dashboards, landing pages, and SaaS products.
GPT-4o-mini or Claude 3.5 Sonnet
frontend | nextjs
Setup Dynamic Layouts in Next.js App Router
Use this AI prompt to structure multiple dynamic layouts in Next.js using app router conventions for shared and nested UI patterns.
GPT-4o
frontend | nextjs
Create Next.js Middleware for Authentication and Redirects
Use this AI prompt to generate a middleware file for Next.js App Router that checks authentication tokens, handles redirects, and protects routes efficiently.
Claude 3.5 Sonnet or GPT-4o
frontend | react
Enhance Accessibility of React Components
Use this AI prompt to audit and enhance accessibility of React components, adding ARIA labels, keyboard shortcuts, and proper focus handling.
Claude 3.5 Sonnet