Beyond Generated UI. Production-Grade Components.

Create a data table with sorting, filtering, and pagination. Use shadcn/ui and Tailwind.

You are a senior frontend engineer building production data-table components.

Create a data table for: [Next.js App Router / Remix / Vite + React]
- Styling: [Tailwind CSS + shadcn/ui / Radix Primitives]
- Data layer: [React Query / SWR / server components]

Requirements:
1. Column sorting (asc/desc/none cycle) with aria-sort attributes
2. Debounced text filter (300ms) with URL search-param sync
3. Pagination: page size selector [10/25/50], keyboard-navigable page controls
4. Row selection with shift-click range select and "Select All" across pages
5. Loading skeleton matching exact row/column dimensions (no layout shift)
6. Empty state with contextual action CTA
7. Responsive: horizontal scroll on mobile with sticky first column
8. Virtualized rendering for 1000+ rows via @tanstack/react-virtual

Accessibility: focus trap in filter popover, roving tabindex in header cells, live-region for sort/filter announcements.
Performance: React.memo on row components, useMemo on sorted/filtered dataset.

Build a multi-step signup form with validation, progress indicator, and a review step before submission.

You are a UX engineer implementing production multi-step forms.

Build a multi-step form for: [Next.js / Remix / React SPA]
- Validation: [Zod + react-hook-form / Yup + Formik]
- Styling: [Tailwind CSS / CSS Modules]

Generate:
1. Step container with animated slide transitions (150ms ease-out)
2. Progress bar: numbered steps with completed/active/upcoming states
3. Per-step validation — block "Next" until current step is valid
4. Field-level errors appearing on blur (not on mount)
5. Review step: summary card with inline "Edit" links back to each step
6. Form persistence: save draft to sessionStorage on every change
7. Submission: optimistic UI with loading spinner, error toast on failure, retry button
8. Keyboard: Enter advances step, Escape returns to previous

Accessibility: aria-current="step" on progress, live-region announcing step changes, focus moved to first input on step transition.
Edge cases: handle browser back/forward, warn on unsaved changes via beforeunload.

Design a modern admin dashboard with sidebar navigation, stats cards, and a chart section.

You are a senior UI architect building production admin dashboards.

Design dashboard layout for: [Next.js App Router / Remix]
- Styling: [Tailwind CSS / CSS Modules]
- Charts: [Recharts / Chart.js / Nivo]
- Auth: [Auth.js / Clerk] (role-based visibility)

Generate:
1. Collapsible sidebar: icon-only mode on collapse, tooltip labels, keyboard toggle (Ctrl+B)
2. Top bar: breadcrumbs (auto-generated from route), global search (Cmd+K), notification bell with badge
3. Stats grid: 4 KPI cards with sparkline trends, loading skeleton, and % change badges
4. Chart section: line + bar combo chart with date range picker, export CSV button
5. Responsive: sidebar becomes bottom sheet on mobile, stats stack to 2-col grid
6. Theme: respect system preference, toggle in top bar, CSS variables for all tokens
7. Performance: lazy-load chart library, suspense boundaries per widget
8. Layout persistence: sidebar state and date range saved to localStorage

Accessibility: skip-nav link, landmark regions (nav, main, complementary), reduced-motion media query disables transitions.
Performance targets: LCP < 1.2s, CLS 0, no hydration mismatch warnings.