AI SummaryThis skill generates reusable Relay-based Nodes components that: Activate this skill when users ask to: The skill automatically determines:
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "create-relay-nodes-component" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/create-relay-nodes-component && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/create-relay-nodes-component/SKILL.md "https://raw.githubusercontent.com/lablup/backend.ai-webui/main/.claude/skills/create-relay-nodes-component/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Generate Relay-based Nodes components with BAITable integration following established patterns (BAIUserNodes, SessionNodes, BAISchedulingHistoryNodes, BAIRouteNodes). Automatically creates component file with GraphQL fragment, type definitions, column configurations, and customization patterns. Minimal user input required - just provide GraphQL type name and the skill generates a complete starting template.
Purpose
This skill generates reusable Relay-based Nodes components that: • Follow established patterns from BAISchedulingHistoryNodes, BAIRouteNodes, BAISessionHistorySubStepNodes • Integrate seamlessly with BAITable for data display • Use Relay fragments for efficient GraphQL data fetching • Support column customization via customizeColumns pattern • Include sorting with disableSorter toggle and table features out of the box • Provide complete starting templates with TODOs for customization
When to Use
Activate this skill when users ask to: • Create a new Nodes component for displaying GraphQL data • Generate a table component using Relay fragments • Build a list view component with Backend.AI UI patterns • Create reusable data display components with sorting/filtering
Minimal User Input
• GraphQL Type Name (Required) • Examples: UserNode, ComputeSessionNode, SessionSchedulingHistory • This determines all other naming and structure • Component Location (Optional - has smart defaults) • Default for *Node types: packages/backend.ai-ui/src/components/ • Default for other types: packages/backend.ai-ui/src/components/fragments/ • User can override if needed
Auto-Generated Details
The skill automatically determines: • Component name: UserNode → BAIUserNodes • Entity name: UserNode → User • Fragment prop name: usersFrgmt • Import paths based on location • Basic column structure
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster