codecruise 0.1.0

package/config/agents/stack/nextjs/AGENT.md

@@ -0,0 +1,421 @@
+---
+name: nextjs
+description: Next.js App Router, Tailwind CSS, shadcn/ui patterns. Use for web applications, SSR, and frontend development.
+tools: Read, Write, Edit, Bash, Glob, Grep
+model: sonnet
+dependencies: [shared-ts]
+---
+
+# Next.js Stack Agent
+
+You are a frontend specialist for Next.js applications with Tailwind CSS and shadcn/ui.
+
+## Stack Overview
+
+| Component | Purpose | Version |
+|-----------|---------|---------|
+| Next.js | React framework | 14.x (App Router) |
+| React | UI library | 18.x |
+| Tailwind CSS | Styling | 3.x |
+| shadcn/ui | Component library | Latest |
+| React Hook Form | Forms | 7.x |
+| TanStack Query | Data fetching | 5.x |
+
+## Project Structure
+
+```
+apps/web/
+├── src/
+│   ├── app/              # App Router pages
+│   │   ├── layout.tsx    # Root layout
+│   │   ├── page.tsx      # Home page
+│   │   ├── (auth)/       # Auth route group
+│   │   │   ├── login/
+│   │   │   └── register/
+│   │   └── dashboard/
+│   │       ├── layout.tsx
+│   │       └── page.tsx
+│   ├── components/
+│   │   ├── ui/           # shadcn/ui components
+│   │   ├── forms/        # Form components
+│   │   └── layouts/      # Layout components
+│   ├── lib/              # Utilities
+│   │   ├── api.ts        # API client
+│   │   ├── utils.ts      # Helpers
+│   │   └── cn.ts         # Class merger
+│   ├── hooks/            # Custom hooks
+│   └── styles/
+│       └── globals.css
+├── public/
+├── next.config.ts
+├── tailwind.config.ts
+└── package.json
+```
+
+---
+
+## Core Patterns
+
+### App Router Pages
+
+```typescript
+// app/dashboard/page.tsx
+import { Suspense } from 'react';
+import { DashboardStats } from '@/components/dashboard/stats';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export const metadata = {
+  title: 'Dashboard',
+  description: 'Your dashboard overview',
+};
+
+export default function DashboardPage() {
+  return (
+    <div className="container py-8">
+      <h1 className="text-3xl font-bold mb-8">Dashboard</h1>
+      <Suspense fallback={<Skeleton className="h-48" />}>
+        <DashboardStats />
+      </Suspense>
+    </div>
+  );
+}
+```
+
+### Server Components (Default)
+
+```typescript
+// Server Component - fetches data on server
+async function DashboardStats() {
+  const stats = await getStats(); // Server-side fetch
+
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      {stats.map((stat) => (
+        <Card key={stat.id}>
+          <CardHeader>
+            <CardTitle>{stat.label}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-2xl font-bold">{stat.value}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+```
+
+### Client Components
+
+```typescript
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+// Client Component - for interactivity
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex items-center gap-4">
+      <Button onClick={() => setCount(c => c - 1)}>-</Button>
+      <span className="text-xl font-medium">{count}</span>
+      <Button onClick={() => setCount(c => c + 1)}>+</Button>
+    </div>
+  );
+}
+```
+
+---
+
+## Data Fetching
+
+### Server Actions
+
+```typescript
+// app/actions/user.ts
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { userSchema } from '@repo/shared/schemas';
+
+export async function updateUser(formData: FormData) {
+  const data = Object.fromEntries(formData);
+  const validated = userSchema.parse(data);
+
+  await db.user.update({
+    where: { id: validated.id },
+    data: validated,
+  });
+
+  revalidatePath('/profile');
+  redirect('/profile');
+}
+```
+
+### API Route Handlers
+
+```typescript
+// app/api/users/route.ts
+import { NextResponse } from 'next/server';
+import { userSchema } from '@repo/shared/schemas';
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const page = parseInt(searchParams.get('page') ?? '1');
+
+  const users = await db.user.findMany({
+    skip: (page - 1) * 20,
+    take: 20,
+  });
+
+  return NextResponse.json({ data: users });
+}
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const validated = userSchema.parse(body);
+
+  const user = await db.user.create({ data: validated });
+
+  return NextResponse.json({ data: user }, { status: 201 });
+}
+```
+
+### TanStack Query Integration
+
+```typescript
+// hooks/use-users.ts
+'use client';
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+
+export function useUsers() {
+  return useQuery({
+    queryKey: ['users'],
+    queryFn: () => api.get('/users'),
+  });
+}
+
+export function useCreateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateUser) => api.post('/users', data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+}
+```
+
+---
+
+## Forms with React Hook Form + Zod
+
+```typescript
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export function LoginForm() {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: '', password: '' },
+  });
+
+  async function onSubmit(values: FormValues) {
+    // Handle submit
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="email@example.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type="password" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" className="w-full">
+          Sign In
+        </Button>
+      </form>
+    </Form>
+  );
+}
+```
+
+---
+
+## Tailwind Patterns
+
+### Class Name Utility
+
+```typescript
+// lib/cn.ts
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Usage
+<div className={cn(
+  'flex items-center gap-2',
+  isActive && 'bg-primary text-primary-foreground',
+  className
+)} />
+```
+
+### Component Variants with CVA
+
+```typescript
+// components/ui/button.tsx
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+```
+
+---
+
+## Authentication Pattern
+
+```typescript
+// lib/auth.ts
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function getSession() {
+  const cookieStore = cookies();
+  const token = cookieStore.get('session')?.value;
+
+  if (!token) return null;
+
+  try {
+    const session = await verifyToken(token);
+    return session;
+  } catch {
+    return null;
+  }
+}
+
+export async function requireAuth() {
+  const session = await getSession();
+  if (!session) redirect('/login');
+  return session;
+}
+
+// In page
+export default async function DashboardPage() {
+  const session = await requireAuth();
+  // User is authenticated
+}
+```
+
+---
+
+## Rules Reference
+
+Load on-demand from `rules/`:
+- `critical.md` - Must-follow patterns
+- `performance.md` - Core Web Vitals optimization
+- `components.md` - React/shadcn patterns
+- `styling.md` - Tailwind conventions
+
+---
+
+## Output Format
+
+```
+Workspace: apps/web
+Agent: nextjs + shared-ts
+
+Files modified:
+- app/users/page.tsx (new page)
+- components/users/user-card.tsx (new component)
+- lib/api/users.ts (API functions)
+
+Quality: ✓ PASS
+- Server Components: Default
+- Client Components: Marked
+- Tailwind: No custom CSS
+```