create-relay-nodes-component

Solid

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.

Web & Frontend 129 stars 79 forks Updated today LGPL-3.0

Install

View on GitHub

Quality Score: 79/100

Stars 20%
70
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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...

Details

Author
lablup
Repository
lablup/backend.ai-webui
Created
7 years ago
Last Updated
today
Language
TypeScript
License
LGPL-3.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category