Frontend & UI Standards
The frontend is the user's entire experience of the product. Every state must be handled. Every error must be shown. Every action must give feedback. Every permission must be reflected — but enforced on the backend.
Contents
| File | What It Covers |
|---|---|
| 01 — Forms & Validation | Form structure, field standards, required markers, validation timing, error display, Add/Edit consistency, password, phone, disabled fields |
| 02 — Data Display | Tables, lists, cards, sorting, filtering, search (debounce, URL params, backend-sent), pagination, infinite scroll, empty states |
| 03 — UI Components | Modals (open/close, focus trap, accessibility), notifications and toasts (types, timing, stacking), loading states, skeleton screens, buttons |
| 04 — Error & Feedback | Error types and where they appear, API error code mapping, empty states, destructive action confirmation (3 risk levels), no silent failures |
| 05 — Permissions & Auth UI | Role-based UI (hide vs disable), reading role from backend, page-level access, partial access, real-time role changes |
| 06 — Settings & Profile | Settings page structure, save behavior, password change, avatar upload, notification preferences, danger zone |
The Non-Negotiables
Related
- Frontend & UI Standards (original) — Original single-file reference (form standards, notifications, loading, delete confirmation, design system, error contract)
- Code Reusability Standards — When to extract components, hooks, and services
- Backend-First Logic — What belongs on the backend vs frontend
- Frontend Checklists — Run these before marking any frontend task done