메뉴
Jeff's page-shell conventions for route pages using PageHeader, table content containers, and TableFooter. Use for new or refactored list/detail route pages.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | jeff-page-shell |
| description | Jeff's page-shell conventions for route pages using PageHeader, table content containers, and TableFooter. Use for new or refactored list/detail route pages. |
Use consistent page composition for predictable UX and maintenance.
<>
<PageHeader ... />
<div className="flex-1 overflow-auto bg-card">...</div>
<TableFooter ... />
</>
<PageHeader> and <TableFooter> components.flex-1 overflow-auto) for both axes.overflow-auto wrappers around tables.keepPreviousData, use subtle isFetching UI transitions.min-w-max table behavior where needed).src/lib/constants.-{feature}-filters.tsx files.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.