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.
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
frontend | react
Create a Custom React Error Boundary
Use this AI prompt to create a robust React Error Boundary component that catches runtime errors, displays fallback UI, and integrates gracefully into your app.
Claude 3.5 Sonnet or GPT-4o
frontend | react
Create React Form with Validation using React Hook Form
Use this AI prompt to build forms with React Hook Form, client-side validation, and TailwindCSS styling for responsive, accessible inputs.
Claude 3 Haiku or GPT-4o-mini for faster generation.
frontend | react
Generate a Reusable React Component
Learn how to generate reusable, production-ready React components using AI tools like Cursor, Windsurf, Claude, and v0.dev. Includes prompt, example, best practices, and FAQs.
Claude 3.5 Sonnet or GPT-4o
frontend | react
Choose the Right State Management for Your React App
Use this AI prompt to determine which state management solution fits your React project — Context API, Redux, Zustand, or Signals. The AI compares trade-offs, complexity, and performance for your use case.
Claude 3.5 Sonnet or GPT-4o for reasoning-based recommendations.
frontend | react
Optimize React Component State for Better Performance
Use this AI prompt to optimize React state and performance by minimizing re-renders, using memoization, and restructuring component logic. Ideal for developers working with large or complex React apps.
Claude 3 Opus or GPT-4o for advanced refactoring tasks.