tanstack-router-starter-kit

Jeff's design language for react-app. Includes the full component-level conventions from the original linear-design skill plus Jeff's-specific direction (typography-first, subtle separators, and strict light/dark parity). Use when building or styling frontend

Jeff's route prefetch conventions for TanStack Router + React Query. Use when implementing or refactoring any data-fetching route, loader, or hooks.

Jeff's layout-stability conventions to prevent cumulative layout shift (CLS). Use when building loading states, image-heavy UIs, cards, tables, maps, and media containers.

Jeff's display-formatting conventions for money, numbers, dates, and date visuals. Use whenever rendering API values in UI.

Jeff's conventions for TanStack Form and overlay UX (Dialog, Sheet, route-driven state). Use for add/edit flows and modal/sheet interactions.

Jeff's cross-module implementation patterns for filter panels, table cells, status display, and employee-linked rows. Use for module-level route work across employees, leaves, dashboard, attendance, and similar list pages.

Jeff's page-shell conventions for route pages using PageHeader, table content containers, and TableFooter. Use for new or refactored list/detail route pages.

Jeff's permission-gating conventions using useCan(action, subject). Use when adding or changing conditional actions and protected UI flows.

Jeff's URL state conventions using nuqs. Use when working on pagination, search, filters, date/view modes, or route-level overlays.