---
description: React and Next.js UI patterns for FinanceOne
globs: **/*.{tsx,css}
alwaysApply: false
---

# Web UI

- Next.js App Router: default to Server Components; add `"use client"` only for interactivity.
- Accessible markup: labels on inputs, semantic headings, keyboard-friendly controls.
- Tailwind: reuse spacing and color patterns from nearby components; avoid one-off magic values when a token exists.
- Forms: validate on client for UX and on server for security; show clear error messages.
- Loading and empty states for lists (accounts, transactions).