← ClaudeAtlas

create-relay-nodes-componentlisted

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.
lablup/backend.ai-webui · ★ 129 · Web & Frontend · score 79
Install: claude install-skill lablup/backend.ai-webui
# Create Relay Nodes Component Skill ## 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 ## Required Information ### Minimal User Input **1. GraphQL Type Name** (Required) - Examples: `UserNode`, `ComputeSessionNode`, `SessionSchedulingHistory` - This determines all other naming and structure **2. 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