# AGENTS.md

## Project Overview

This is a Next.js 14 e-commerce application using the App Router,
Server Components, and Drizzle ORM with PostgreSQL.

## Code Conventions

- Use TypeScript strict mode throughout
- Prefer Server Components; use "use client" only when necessary
- Name files with kebab-case: `product-card.tsx`, not `ProductCard.tsx`
- Co-locate tests: `product-card.test.tsx` next to `product-card.tsx`

## Architecture

- `app/`           — Next.js App Router pages and layouts
- `components/`    — Shared UI components
- `lib/`           — Utilities, database client, auth helpers
- `actions/`       — Server Actions for mutations

## Testing

- Use Vitest for unit tests, Playwright for E2E
- Mock database calls using `lib/test-utils.ts` helpers
- Every new component needs at least one test

## Build Commands

```bash
pnpm dev          # Start dev server
pnpm build        # Production build
pnpm test         # Run Vitest
pnpm test:e2e     # Run Playwright
pnpm lint         # ESLint check
```

---
description: React component conventions and patterns
globs: "*.tsx,*.jsx"
alwaysApply: false
---
# React Component Rules

1. Use functional components with TypeScript interfaces for props
2. Prefer server components by default — add "use client" only for interactivity
3. Colocate component tests in adjacent __tests__/ directories
4. Use named exports, not default exports
5. Extract custom hooks into hooks/ directory when reused across components

## Styling
- Use Tailwind CSS v4 utility classes
- Follow mobile-first responsive design
- Keep component-specific styles colocated

## State Management
- Use React 19 use() for async data in server components
- Prefer URL state (searchParams) over client state where possible
- Use Zustand for complex client-side state