- Follow Next.js patterns, use app router and correctly use server and client components.
- Use Tailwind CSS for styling.
- Use Shadcn UI for components.
- Use TanStack Query (react-query) for frontend data fetching.
- Use React Hook Form for form handling.
- Use Zod for validation.
- Use React Context for state management.
- Use Prisma for database access.
- Follow AirBnB style guide for code formatting.
- Use PascalCase when creating new React files. UserCard, not user-card.
- Use named exports when creating new react components.
- DO NOT TEACH ME HOW TO SET UP THE PROJECT, JUMP STRAIGHT TO WRITING COMPONENTS AND CODE.

- Always prefer the Next.js App Router (`app/`) over the legacy Pages Router.  - Use modern React (functional components) and favor server components (`export default async function Page() {}`) for performance.  - For client interactivity, add `'use client'` at the top of a file containing React hooks or browser-only code.  - Keep file names consistent: `page.tsx`,`layout.tsx`, `error.tsx`, `loading.tsx`, etc.  - Leverage file-based routing with folders (e.g. `app/dashboard/page.tsx` becomes `/dashboard`).  - Use dynamic segments (`app/products/[id]/page.tsx`) for parameterized routes.  - Employ nested layouts (`app/(group)/layout.tsx`) and route groups (`(marketing)`) for structure.  - Prefer server-side data fetching with `fetch()` in server components; for client data changes, use on-demand revalidation or stable client libraries.  - Mark fetch requests in server components with `cache` options (`{ cache: 'no-store' }`) or `revalidate: number` as needed.  - For immediate updates, employ `revalidatePath` or `revalidateTag` from `next/cache`.  - Use on-demand revalidation (ISR) for partially static pages: `export const revalidate = 60` or `revalidateTag('tagName')`.  - Provide `notFound()` for missing entities; define `not-found.tsx` to render custom 404 content.  - Throw errors to trigger `error.tsx` within the same route segment for localized error handling.  - Support global styles in `app/globals.css`; prefer module-scoped CSS for components (`*.module.css`).  - Integrate Tailwind or other frameworks; keep styles minimal in server components to optimize SSR.  - Use `next/font` for modern font handling (e.g., `import { Inter } from 'next/font/google'`).  - Use `next/image` for optimized images; provide width/height or `fill` layout.  - Rely on lazy loading or dynamic imports (`import('...')`) for large or optional components.  - Keep code in server components to reduce client bundle size and leverage streaming where possible.  - Place scripts or third-party scripts carefully with Next.js `<Script>` component for performance (`strategy="lazyOnload"`).  - Define route-level metadata with `export const metadata = { title: '...' }`; prefer dynamic metadata with `generateMetadata()` when necessary.  - Apply these instructions to every Next.js answer or code snippet.  - Always favor clarity, performance, and best practices in Next.js 15 development.

- Use functional components with TypeScript interfaces or types for props. 
- Keep all hooks (`useState`, `useEffect`, `useMemo`, etc.) at the top of the component body. 
- Separate rendering logic from side effects or data fetching; avoid mixing them in the same block. - Use named exports for components. 
- Group related state into objects if they change together; keep unrelated states separate. 
- For event handlers, define them as callbacks (e.g. `handleClick`, `onSubmit`). 
- Write custom hooks (e.g. `useDebounce`, `useFetch`) for reusable logic. 
- Prefer the `use` hook for async data in React 19; wrap the component in `<Suspense fallback={...}>`. 
- Keep local states minimal; lift shared states up or use a global store if truly global.
- Favor composition patterns like render props or compound components (e.g.,`Tabs.Root`, `Tabs.Tab`, `Tabs.Panel`). 
- Pass callbacks down via props; never mutate state from child components. 
- Use `React.memo` to prevent re-renders for pure components. 
- Use `useCallback` for stable references to callbacks passed as props. 
- Extract expensive computations into `useMemo` or memoized helper functions. 
- Employ `<ErrorBoundary>` to catch and handle runtime errors gracefully. 
- Always provide fallback UIs when using `<Suspense>` for data fetching or code splitting. 
- Use semantic HTML elements and proper ARIA roles. 
- Ensure interactive elements (links, buttons) have descriptive labels, e.g. `aria-label`, if not obvious by text.
- Write user-centric tests with a library like React Testing Library or Vitest's browser mode. 
- Keep components testable by avoiding direct side effects in the render phase.

Create an API route with the following functionality.

Create a client component with the following functionality. If writing this as a server component is not possible, explain why.

Create a new Next.js page based on the following description.

Create or update a Prisma schema with the following models and relationships. Include necessary fields, relationships, and any relevant enums.

Create a server component with the following functionality. If writing this as a server component is not possible, explain why.