# AI Frontend Implementation Rules (SDM)

These rules are mandatory for all new frontend pages, components, and table views.

## 1) Responsive-first (all screens)
- Build mobile-first and scale to larger breakpoints.
- No hidden primary actions on any viewport.
- Action buttons must wrap safely (`flex-wrap`) when width is constrained.
- Use horizontal scrolling for dense data tables on small screens.
- Verify usability at minimum widths: 320px, 375px, 768px, 1024px, 1280px, 1536px.

## 2) Tables: always sortable + paginated
- Every data table must support column sorting.
- Every data table must include pagination controls.
- Keep sort state and page size explicit in component state.
- On filter changes, reset to page 1.
- Show empty-state rows/messages consistently when no records exist.

## 3) Design language consistency
- Reuse existing SDM UI patterns (`Card`, `Table`, `Badge`, `Button`, `Sheet`, `Input`).
- Keep spacing, radius, typography, and interaction styles aligned with current screens.
- Do not introduce a new visual style unless explicitly requested.

## 4) Color theming consistency
- Use existing theme tokens/classes (`primary`, `muted-foreground`, `border`, etc.).
- Avoid ad-hoc one-off color palettes that break existing brand look.
- Preserve current status color semantics (success, warning, destructive, neutral).

## 5) Delivery checklist (before finalizing)
- Desktop and mobile layout validated.
- Primary actions visible and reachable on all breakpoints.
- Table sorting works for intended columns.
- Pagination works with correct counts and bounds.
- Empty/loading/error states are present.
- UI matches existing SDM design language and theme.