Paginates unbounded SolidJS lists and grids using createPager with fixed page sizes.
npx skills add https://github.com/lxsmnsyc/overwander --skill paged-lists-lxsmnsyc
Please help me install this Agent Skill. Skill: paged-lists Source: https://github.com/lxsmnsyc/overwander/tree/main/.agents/skills/paged-lists Command: npx skills add https://github.com/lxsmnsyc/overwander --skill paged-lists-lxsmnsyc
For over the whole list renders too much, and a fixed grid silently drops entries past its last slot. This Skill enforces a single pagination pattern so every player-controlled collection is paged, never drawn whole. ## Core Features & Use Cases - createPager pattern: Uses createPager(items, size, unit?) from src/components/styled/pager.tsx to own the page signal, slice, arrow controls, and the clamp that pulls the page back when the list shrinks. - Standard page sizes: LIST_PAGE (20) for text rows, BOX_SIZE (30) for the six-by-five pokemon box, and GRID_SIZE for the item tray inside ItemGrid. - Grid furniture: Routes pokemon squares through CatchGrid (search, box paging, empty states over CatchBox) and items through ItemGrid, never handing a raw CatchBox an unpaged list. - Use Case: When building a friends list or auction bid history in this SolidStart app, wrap the rows in createPager(() => rows(), LIST_PAGE), render paged.shown(), and place paged.controls() after the list. ## Quick Start Ask the AI to render any growing collection in this SolidJS app through createPager with the correct page size constant instead of a bare For loop.High-intent search queries and answers about installing and using this skill.
Call createPager with a reactive items accessor and a page size, then render paged.shown() inside your For loop and place paged.controls() after the list. The pager owns the page signal, slice, arrow controls, and clamping when the list shrinks.
Use LIST_PAGE (20) for lists of text rows, BOX_SIZE (30) for the six-by-five pokemon box, and GRID_SIZE for the item tray. The item tray pages itself inside ItemGrid, so do not page around it.
Components like CatchBox draw exactly BOX_SIZE squares, so entries beyond the last slot are not drawn, announced, or reachable. Feed the grid a page from createPager or route through CatchGrid instead of passing the whole list.
Use CatchGrid whenever pokemon squares need search, box paging, or empty states; it wraps a bare CatchBox with that furniture. Pass bare when the caller narrows with its own search, or search/onSearch when the query drives a store read.
createPager includes a clamp that pulls the page back when the underlying list shrinks under the reader, such as when a search narrows results or a row settles. This prevents showing an empty out-of-range page.
vallafedericoManage asynchronous data fetching with caching and deduplication in SolidJS applications.
sdcorejsWire Angular Portal list and detail page actions with permission gating.
borderuxDefines house rules for designing filter bars in enterprise web applications.
mohamedgshoaibImplement list virtualization with react-window to render visible subsets of large datasets.