Does this skill support infinite scrolling?

Yes, it includes patterns for implementing infinite scroll using the Intersection Observer API integrated with Relay's pagination fragments.

Does it handle optimistic updates for new items?

Yes, it provides patterns for using @prependEdge and @appendEdge directives to ensure newly created items appear instantly in your paginated lists.

Can I use it for bidirectional pagination?

Absolutely. The skill covers implementation details for both forward and backward pagination using the standard GraphQL Connection specification.

What is the Relay Pagination skill for Claude Code?

It is a specialized capability that enables Claude to write and refactor advanced GraphQL cursor-based pagination logic using the Relay framework's best practices.

Relay Pagination Master

Name: Relay Pagination Master
Author: TheBushidoCollective

byTheBushidoCollective

•

API Development

Implements complex GraphQL Cursor Connections and advanced Relay pagination patterns for high-performance data loading.

This skill equips Claude with the expertise to architect and implement sophisticated pagination logic using the Relay framework and GraphQL Cursor Connections Specification. It provides a comprehensive suite of implementation patterns, from basic 'load more' buttons and infinite scrolling via Intersection Observer to complex bidirectional navigation and virtualized lists. It specifically addresses advanced requirements like maintaining scroll position, handling optimistic UI updates for connection edges, and managing paginated content across filtered views or tabbed interfaces, ensuring your application remains performant even with massive datasets.

Key Features

0172 GitHub stars

02Optimistic UI updates for seamless connection and edge management

03Bidirectional navigation patterns for complex data exploration

04Declarative cursor-based pagination using the usePaginationFragment hook

05Search and filter integration within paginated GraphQL connections

06Infinite scroll implementation with Intersection Observer integration

Use Cases

01Implementing complex e-commerce product grids with bidirectional navigation

02Building high-performance social media feeds or activity logs with infinite scroll

03Developing searchable and filterable administrative dashboards for large datasets

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han relay-pagination

For use in Claude.ai and ChatGPT

Download Skill