jeff-page-shell

Estrellas0

Forks0

Actualizado13 de febrero de 2026 a las 01:26

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

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Fuente

yemyat

yemyat/tanstack-router-starter-kit

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

SKILL.md

readonly

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.

Jeff's Page Shell

Use consistent page composition for predictable UX and maintenance.

Apply when

Building or refactoring route page layout.
Implementing list/table pages.

Standard layout

<>
  <PageHeader ... />
  <div className="flex-1 overflow-auto bg-card">...</div>
  <TableFooter ... />
</>

Rules

Use shared <PageHeader> and <TableFooter> components.
Prefer one scroll container (flex-1 overflow-auto) for both axes.
Avoid nested overflow-auto wrappers around tables.
Keep loading/empty/error states explicit and consistent.
When using keepPreviousData, use subtle isFetching UI transitions.

Data table expectations

Always handle loading, error, and empty states.
Keep horizontal scroll behavior stable (min-w-max table behavior where needed).
Use shared page-size constants from src/lib/constants.
Keep filter UI colocated in -{feature}-filters.tsx files.

Validation checklist

Header controls are in expected slots.
Footer pagination/page-size behavior is consistent.
No nested scroll traps.

Más de este repositorio

mismo repositorio

jeff-design-skill

yemyat/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

2026-02-130

jeff-route-prefetch

yemyat/tanstack-router-starter-kit

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

2026-02-130

jeff-cls-stability

yemyat/tanstack-router-starter-kit

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.

2026-02-130

jeff-display-formatting

yemyat/tanstack-router-starter-kit

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

2026-02-130

jeff-forms-and-overlays

yemyat/tanstack-router-starter-kit

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

2026-02-130

jeff-module-patterns

yemyat/tanstack-router-starter-kit

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.

2026-02-130

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.

Jeff's Page Shell

Use consistent page composition for predictable UX and maintenance.

Apply when

Building or refactoring route page layout.
Implementing list/table pages.

Standard layout

<>
  <PageHeader ... />
  <div className="flex-1 overflow-auto bg-card">...</div>
  <TableFooter ... />
</>

Rules

Use shared <PageHeader> and <TableFooter> components.
Prefer one scroll container (flex-1 overflow-auto) for both axes.
Avoid nested overflow-auto wrappers around tables.
Keep loading/empty/error states explicit and consistent.
When using keepPreviousData, use subtle isFetching UI transitions.

Data table expectations

Always handle loading, error, and empty states.
Keep horizontal scroll behavior stable (min-w-max table behavior where needed).
Use shared page-size constants from src/lib/constants.
Keep filter UI colocated in -{feature}-filters.tsx files.

Validation checklist

Header controls are in expected slots.
Footer pagination/page-size behavior is consistent.
No nested scroll traps.