How do I install the Infinity List skill?

Run npx skillmds@latest add reaviz/infinity-list in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Infinity List skill do?

InfinityList It is listed under Coding & Dev Tools on SkillMD.

Is Infinity List safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Infinity List?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Infinity List free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Infinity List?

reaviz (@reaviz) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Infinity List by reaviz — Agent Skill

Name: Infinity List
Author: reaviz

File contents

InfinityList

Progressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports useInfinityList hook for custom implementations.

Import

import { InfinityList } from 'reablocks';
// or hook only
import { useInfinityList } from 'reablocks';

InfinityList Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Items to display
`size`	`number`	`10`	Number of items per page
`threshold`	`number`	`3`	Fuzzy threshold — if total items are within `size + threshold`, show all
`nextSize`	`number`	—	Items to show on next click (defaults to `size`, use `Infinity` to show all)
`buttonClassName`	`string`	—	CSS class for the "Show more" button

Basic Usage

<InfinityList>
  {items.map(item => (
    <div key={item.id}>{item.name}</div>
  ))}
</InfinityList>

useInfinityList Hook

For custom rendering and control:

import { useInfinityList } from 'reablocks';

function MyList({ items }) {
  const { data, hasMore, remaining, showNext } = useInfinityList({
    items,
    size: 10,
    threshold: 3
  });

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
      {hasMore && (
        <button => showNext()}>
          Show {Math.min(10, remaining)} more
        </button>
      )}
    </div>
  );
}

Hook API

Inputs

Prop	Type	Default	Description
`items`	`any[]`	—	Array of items
`size`	`number`	`10`	Page size
`threshold`	`number`	`3`	Fuzzy threshold for showing all remaining
`nextSize`	`number`	—	Override next page size (`Infinity` to show all)

Returns

Property	Type	Description
`data`	`any[]`	Currently visible items
`hasMore`	`boolean`	Whether more items exist
`remaining`	`number`	Count of remaining items
`showNext`	`(amount?: number) => void`	Load next batch

---name: infinity-listdescription: InfinityList---# InfinityListProgressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports `useInfinityList` hook for custom implementations.## Import```tsximport { InfinityList } from 'reablocks';// or hook onlyimport { useInfinityList } from 'reablocks';```## InfinityList Props| Prop | Type | Default | Description ||------|------|---------|-------------|| `children` | `ReactNode` | — | Items to display || `size` | `number` | `10` | Number of items per page || `threshold` | `number` | `3` | Fuzzy threshold — if total items are within `size + threshold`, show all || `nextSize` | `number` | — | Items to show on next click (defaults to `size`, use `Infinity` to show all) || `buttonClassName` | `string` | — | CSS class for the "Show more" button |## Basic Usage```tsx<InfinityList> {items.map(item => ( <div key={item.id}>{item.name}</div> ))}</InfinityList>```## useInfinityList HookFor custom rendering and control:```tsximport { useInfinityList } from 'reablocks';function MyList({ items }) { const { data, hasMore, remaining, showNext } = useInfinityList({ items, size: 10, threshold: 3 }); return ( <div> {data.map(item => <div key={item.id}>{item.name}</div>)} {hasMore && ( <button onClick={() => showNext()}> Show {Math.min(10, remaining)} more </button> )} </div> );}```## Hook API### Inputs| Prop | Type | Default | Description ||------|------|---------|-------------|| `items` | `any[]` | — | Array of items || `size` | `number` | `10` | Page size || `threshold` | `number` | `3` | Fuzzy threshold for showing all remaining || `nextSize` | `number` | — | Override next page size (`Infinity` to show all) |### Returns| Property | Type | Description ||----------|------|-------------|| `data` | `any[]` | Currently visible items || `hasMore` | `boolean` | Whether more items exist || `remaining` | `number` | Count of remaining items || `showNext` | `(amount?: number) => void` | Load next batch |

Frequently asked questions

Infinity List