From fragmented code to consistent output with AI rules

 
Next.js 15 app with TypeScript, Tailwind CSS, and Supabase.
 
## Tech Stack
- Framework: Next.js 15 (App Router)
- Database: Supabase (PostgreSQL)
- Styling: Tailwind CSS
- Auth: Supabase Auth
 
## Folder Structure
- /app - Next.js app router pages
- /components - React components
- /lib - Utilities and helpers
 
## Commands
- pnpm dev - Start development server
- pnpm build - Build for production

description: Project folder structure and organization
alwaysApply: true
---
 
# Project Structure
 
src/app/
├── (marketing)/              # Public pages group
│   ├── _components/          # Route-specific components
│   ├── blog/
│   │   ├── _components/
│   │   ├── [slug]/
│   │   │   └── page.tsx
│   │   └── page.tsx
│   ├── contact/
│   │   ├── _components/
│   │   ├── _lib/
│   │   │   └── server/
│   │   │       └── server-actions.ts
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
│
├── (auth)/                   # Auth pages group
│   ├── sign-in/
│   │   └── page.tsx
│   ├── sign-up/
│   │   └── page.tsx
│   └── layout.tsx
│
├── (app)/                    # Logged-in user pages
│   ├── _components/
│   ├── _lib/
│   │   └── server/
│   │       └── workspace.loader.ts
│   ├── settings/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
 
## Key Patterns
 
- `_components/` for route-specific components
- `_lib/` for route-specific utilities
- `_lib/server/` for server-side data loaders
- `(group)` for route groups without URL segments
- `[param]` for dynamic routes
 
## Special Files
 
- `layout.tsx` defines layouts
- `loading.tsx` defines loading states
- `error.tsx` handles errors
- `page.tsx` is the page component
- `route.ts` is an API route handler

description: TypeScript conventions and patterns
globs: src/**/*.ts,src/**/*.tsx
alwaysApply: false
---
 
# TypeScript
 
- Write clean, clear, well-designed, explicit TypeScript
- Make sure types are validated strictly
- Use implicit type inference, unless impossible
- Consider using classes for server-side services, but export a function instead of the class
 
// service.ts
class OrderService {
  getOrder(id: number) {
    // ... implementation ...
    return { id, status: 'pending' };
  }
}
 
export function createOrderService() {
    return new OrderService();
}
 
- Follow the Single Responsibility Principle
- Favor composition over inheritance
- Avoid using `any` type. If necessary, use `unknown`

description: Writing forms with React Hook Form, Server Actions, Zod
globs: apps/**/*.tsx,packages/**/*.tsx
alwaysApply: false
---
 
# Forms
 
- Use React Hook Form for form validation and submission
- Use Zod for form validation
- Use the `zodResolver` function to resolve the Zod schema
- Use Server Actions for server-side code handling
- Never add generics to `useForm`, use Zod resolver to infer types
 
Follow this example to create all forms:
 
## Define the schema
 
Zod schemas should be in the `schema` folder and exported for reuse:
 
// _lib/schema/create-order.schema.ts
import { z } from 'zod';
 
export const CreateOrderSchema = z.object({
  productId: z.string().min(1),
  quantity: z.number().min(1),
});
 
## Create the Server Action
 
// actions/create-order.action.ts
'use server';
 
import { enhanceAction } from '@/lib/actions';
import { CreateOrderSchema } from '../schema/create-order.schema';
 
export const createOrderAction = enhanceAction(
  async function (data, user) {
    // data has been validated against the Zod schema
    // user is the authenticated user
    // ... your code here
    return { success: true };
  },
  {
    auth: true,
    schema: CreateOrderSchema,
  },
);
 
## Create the Form Component
 
// components/create-order-form.tsx
'use client';
 
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { useTransition } from 'react';
import { toast } from 'sonner';
 
import { CreateOrderSchema } from '../schema/create-order.schema';
import { createOrderAction } from '../actions/create-order.action';
 
export function CreateOrderForm() {
  const [pending, startTransition] = useTransition();
 
  const form = useForm({
    resolver: zodResolver(CreateOrderSchema),
    defaultValues: { productId: '', quantity: 1 },
  });
 
  const onSubmit = (data) => {
    startTransition(async () => {
      await toast.promise(createOrderAction(data), {
        loading: 'Creating order...',
        success: 'Order created',
        error: 'Failed to create order',
      });
    });
  };
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        {/* FormField components here */}
      </form>
    </Form>
  );
}

description: Next.js API Route Handlers
globs: src/**/route.ts
alwaysApply: false
---
 
# Route Handlers
 
- Use Route Handlers when fetching data from Client Components
- Always use the `enhanceRouteHandler` wrapper for consistent error handling and auth
 
// app/api/orders/route.ts
import { z } from 'zod';
import { enhanceRouteHandler } from '@/lib/routes';
import { NextResponse } from 'next/server';
 
const OrderSchema = z.object({
  productId: z.string(),
  quantity: z.number().min(1),
});
 
export const POST = enhanceRouteHandler(
  async function({ body, user, request }) {
    // 1. "body" is validated against OrderSchema
    // 2. "user" is the authenticated user
    // 3. "request" is NextRequest
    return NextResponse.json({ success: true });
  },
  {
    schema: OrderSchema,
  },
);
 
// Unauthenticated route
export const GET = enhanceRouteHandler(
  async function({ request }) {
    // No auth required, user is null
    return NextResponse.json({ success: true });
  },
  {
    auth: false,
  },
);