# UI Rules

## Nuxt UI first

Nuxt UI first.

Priority:
1. Nuxt UI directly
2. Nuxt UI props/slots/theme
3. Thin domain component composed from Nuxt UI
4. Fully custom only when necessary

Do not recreate Nuxt UI Button/Input/Table/Modal/Form/etc.

Tailwind is primarily for layout and small refinements.

## Design workflow

Use the frontend skills per the global AGENTS.md before major screen
implementation and for review:
- `ui-ux-pro-max` — design intelligence + product/UX reasoning
- `design-taste-frontend` — visual direction, anti-slop, brief/design-system discipline
- `nuxt-ui` — Nuxt UI implementation
- `impeccable` — critique, technical audit, polish

Order: understand product/audience/constraints → design-system direction →
shape the UX → implement → accessibility/responsive review → critique/audit →
polish.

Respect the project's existing design direction (`DESIGN.md`, `DESIGN-DIRECTION.md`).
Do not impose a generic AI-dashboard aesthetic; this is a polished B2B purchasing
product — fast, dense but readable, clear, predictable, restrained.

## UI state completeness

A screen is not complete when only the happy state works. Consider:
- loading
- empty
- error
- success
- disabled
- validation failure
- permission denied
- offline/network failure
- long content
- small screens
- keyboard navigation

Every important interaction must communicate its current state clearly.

## Accessibility

Accessibility is a functional requirement, not an afterthought:
- semantic HTML
- keyboard navigation
- focus management and focus visibility
- screen-reader behavior
- labels
- contrast
- reduced-motion preference
- touch target size
- clear error messaging

## Responsive design

Check narrow mobile, intermediate, desktop, and large desktop widths; long
text, dynamic content, tables, forms, navigation, and touch interactions.

Do not assume a desktop layout automatically becomes a good mobile layout.
Avoid hardcoded dimensions when content can vary.

## Motion

Motion must communicate hierarchy or state. Prefer transform/opacity.
Respect reduced-motion preferences. Do not animate layout properties
(top/left/width/height) when transform/opacity gives the same effect.
Animation must not make the interface slower or harder to use.