# Project Guidelines & Standards

## Web Development Standards

### Responsive Design (Required)
All web applications must be responsive by default:
- **Mobile-first approach** — Design for smallest screens, enhance for larger
- **Breakpoints:** Use `sm:`, `md:`, `lg:`, `xl:` Tailwind prefixes consistently
- **Touch targets:** Minimum 44px for buttons/links on mobile
- **Readable text:** No tiny fonts on mobile (minimum 14px/0.875rem)
- **Dialog/modals:** Use `w-[95vw]` or `max-w-full` with padding, never fixed widths
- **Forms:** Stack fields vertically on mobile (`flex-col` → `sm:flex-row`)
- **Navigation:** Collapse or reposition for mobile viewports
- **Test:** Always verify at 320px, 768px, and 1440px widths

### UI Components
- Use shadcn/ui or Radix primitives for accessibility
- Dark mode support preferred
- Consistent spacing (4px grid system)

### State Management
- Zustand for local state
- localStorage for persistence when appropriate

### Git Workflow
- Commit after significant changes
- Meaningful commit messages with context
- Create branches for experiments

---
*Last updated: 2026-02-18*