メニュー
Use when designing pagination for tables, search results, lists. Covers when to use pagination vs infinite scroll vs load-more, and the user expectations for each.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills-fleetsafety --skill pagination-and-infinite-scrollコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
SOC 職業分類に基づく
| name | pagination-and-infinite-scroll |
| description | Use when designing pagination for tables, search results, lists. Covers when to use pagination vs infinite scroll vs load-more, and the user expectations for each. |
Pagination is for navigable data. Infinite scroll is for browsable content. Pick by use case.
Use for: tables, search results, things users navigate by exact position. Pattern: prev/next + page numbers + 'Showing 1-25 of 350' counter.
Use for: social feeds, image galleries, content browse. NOT for tables or search where users need to find a specific item.
Hybrid. Loads next batch on click. Good middle ground for content that user might want to read sequentially but also wants control.
25 / 50 / 100 / All. Default 25. Save preference.
Pagination state in URL (?page=3). Sharable, bookmarkable, back-button-friendly. Critical.
Infinite scroll on data tables (lose your place). No URL state (back button breaks). No total count. 'All' option that loads 100K rows.
Applied across the X3 Compass design system.