Menü
Jeff's display-formatting conventions for money, numbers, dates, and date visuals. Use whenever rendering API values in UI.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
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 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.
| name | jeff-display-formatting |
| description | Jeff's display-formatting conventions for money, numbers, dates, and date visuals. Use whenever rendering API values in UI. |
Render user-facing values with consistent formatting across routes.
formatAmount() from @/lib/utils.font-mono tabular-nums where alignment matters.date-fns formatting or shared helpers.dd MMM yyyy, h:mm a).yyyy-MM-dd strings.<DynamicDateIcon date={...} /> in list/table contexts where a date icon improves scanability.