// Select this comment and press Ctrl+K:
// Create a zod schema for user registration with email validation,
// password requirements (8+ chars, 1 uppercase, 1 number),
// and a confirm password field that must match

> In src/components/UserTable.tsx, the sort function on column 
  headers uses string comparison for dates. Fix it to use Date 
  comparison. Only change the sortClickHandler function (line 142-178).
  Add a comment explaining the fix.

> Add a "dark mode" toggle to the settings page:
  1. Check if next-themes is already installed (check package.json)
  2. If not, install it
  3. Create a ThemeToggle component in src/components/ui/
  4. Add it to the navbar in src/components/layout/Navbar.tsx
  5. Run npm run typecheck to verify no type errors

> I'm seeing "Cannot read property 'map' of undefined" in production.
  The error occurs on the Dashboard page.
  
  1. Read src/app/dashboard/page.tsx
  2. Trace every `.map()` call and find the one that could receive undefined
  3. Add null checks or default values
  4. Add an error boundary around the component
  5. Run npm run build to verify

> Refactor the import paths in src/components/:
  - Change all `../../../lib/` imports to `@/lib/`
  - Change all `../../../types/` imports to `@/types/`
  - Don't change imports in src/pages/ or src/app/
  - After changes, run npm run typecheck

# .cursorrules

## Project Commands
- `npm run dev` — Start Vite dev server (port 5173)
- `npm run build` — TypeScript check + Vite build
- `npx vitest run` — Run all tests

## Coding Conventions
- Use TypeScript — no `any`, no implicit returns
- React components use named exports
- Tailwind CSS classes sorted by category (layout → spacing → color → typography)
- API calls use React Query hooks (never useEffect + fetch)

## When Using Agent Mode
- Always run type checks after code changes
- Never modify vite.config.ts without asking
- Create new files in the appropriate feature directory, not root

.cursor/rules/
├── typescript.md         # "alwaysApply: true"
├── react-patterns.md     # "alwaysApply: false, description: React patterns"
└── testing.md            # "alwaysApply: false, globs: **/*.test.*"

---
alwaysApply: true
---
# TypeScript Rules
- Strict mode enabled — no exceptions
- Prefer `interface` over `type` for object shapes
- Use `satisfies` for type validation with inference

> Create a new API endpoint at src/app/api/teams/route.ts that follows 
  the same pattern as src/app/api/users/route.ts. Same auth middleware, 
  same error response format, same pagination pattern.

> I need a form component like the one in src/components/forms/SignupForm.tsx, 
  but for team creation. Same validation library (zod), same UI library (shadcn), 
  same submit handling pattern.

> Tell me about React hooks   ← Use ChatGPT/Claude for this, not Cursor Agent

> Refactor this component to use useCallback for the event handlers   ← Right tool

> Clean up the codebase   ← Too vague. Cursor might touch hundreds of files

> Standardize import paths in src/components/ — replace relative imports 
  with @/ path alias   ← Properly scoped

# Before running Agent mode on a big task
git stash
# Run the task
# Review git diff
# Accept or git stash pop