What problem does it solve? Building paginated list views in the Toollab Nuxt/Laravel stack involves subtle pitfalls: header/row grid misalignment, per-page selectors that do nothing, SSR-unsafe localStorage access, and client-side filtering that only filters the current page. This Skill encodes the full front-to-API pagination contract so lists are built correctly the first time. ## Core Features & Use Cases - End-to-end pagination contract: Defines the API response shape (snake_case pagination object) and its conversion to the camelCase format the DataTable component expects, done in the page. - Standard page pattern: Provides a complete Vue page template wiring DataTable with sorting, debounced search, page changes, and per-page changes, including the useTablePerPage composable for persisting page size in localStorage. - Server-side rules: Documents the Laravel pagination conventions (default 10, cap 100, lower-bound guard), when in-memory filtering is acceptable, and the one-row-per-entity rule. - Use Case: When adding a new admin list page (e.g., a paginated table of families with sortable columns and a status filter), invoke this Skill to generate the page, wire all DataTable events, and add the matching paginated API endpoint without the documented pitfalls. ## Quick Start Create a new paginated list page for the Toollab admin showing items with sortable columns, server-side search, and a per-page selector following the datatable-pagination conventions.
