AgentSkillsCN

jeff-page-shell

Jeff为路由页面所制定的页面壳层规范——包含PageHeader、表格内容容器以及TableFooter等组件。无论是新建路由页面，还是对现有列表/详情路由页面进行重构，都可沿用这些规范。

SKILL.md
--- frontmatter
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

tsx
<>
  <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.