A guide for implementing data tables with Relay fragments, covering column customization, sorting, and pagination.
Install
mkdir -p .claude/skills/react-relay-table && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12199" && unzip -o skill.zip -d .claude/skills/react-relay-table && rm skill.zipInstalls to .claude/skills/react-relay-table
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when creating a `*Nodes` component bound to a Relay fragment, wiring a page to one with `customizeColumns` / URL state / pagination, adding row selection and bulk actions, or setting up CSV export. Covers the query orchestrator + fragment split and `BAITable` conventions.Key capabilities
- →Create new Relay-bound data tables
- →Wire page orchestrators to table components
- →Manage URL-based state for pagination, sorting, and filtering
- →Implement row selection and bulk actions
- →Set up CSV export for table data
How it works
The skill standardizes the creation of `*Nodes` components bound to Relay fragments, defining a two-file architecture where the orchestrator handles fetching and URL state, and the `*Nodes` component renders the table.
Inputs & outputs
When to use react-relay-table
- →Create a new Relay-bound data table
- →Add column visibility and customization
- →Implement server-side pagination
- →Setup CSV export for table data
About react-relay-table
Standardizes the creation of *Nodes components bound to Relay fragments. It covers wiring page orchestrators to table components, URL-based state management, and bulk action handling.
>
When not to use it
- →When the `*Nodes` file needs to trigger refetches
- →When the `*Nodes` component needs to own URL state
- →When `tablePaginationOption.current` and `baiPaginationOption.offset` are swapped
Limitations
- →`*Nodes` component is dumb about fetching
- →Duplicate column `key` silently breaks column-visibility settings
- →`exportKey` is required when `dataIndex` doesn't match the GraphQL field name
How it compares
This skill enforces a specific two-file architecture and conventions for Relay-bound tables, ensuring consistency in data fetching, state management, and component responsibilities.
Compared to similar skills
react-relay-table side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-relay-table (this skill) | 0 | 2mo | No flags | Advanced |
| create-react-component | 0 | 3mo | No flags | Intermediate |
| screenshot-to-code | 204 | 2mo | No flags | Beginner |
| zustand | 113 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
create-react-component
OpenCTI-Platform
Use when: creating a new Relay-connected React component, defining a GraphQL fragment, or wiring a component to a query
screenshot-to-code
OneWave-AI
Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
react
lobehub
React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.