---
description: SFERA UI rules
globs:
  - "src/**/*.tsx"
  - "src/**/*.ts"
alwaysApply: true
---

# SFERA UI Rules

Use:
- Next.js
- React
- TypeScript
- Tailwind
- shadcn/ui
- lucide-react
- TanStack Table
- Zod
- React Hook Form

Do not use:
- Bootstrap
- random colors
- inline styles
- huge components
- business logic inside JSX

Every page must include:
- loading state
- error state
- empty state
- permission state where applicable

Visual style:
- enterprise
- minimal
- rounded-2xl
- soft shadows
- clear hierarchy
- dark/light ready

AI actions must show:
- selected model
- token usage
- project/user limits
- audit log entry