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.
Use when creating a new React component under `react/src/` or `packages/backend.ai-ui/src/`, or refactoring one's file layout, import order, `'use memo'` placement, hook call order, or prop interface. Covers naming conventions (`BAI*`, `*Nodes`, `*Page`) and React 19 rules.
Use when refactoring logic out of a fat component into a custom hook, deciding hook vs helper, applying `useEffectEvent` to avoid stale closures, or designing a hook's return shape. Covers hook placement, naming, and parameterization conventions.
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.
Create Relay-based infinite scroll select components extending BAISelect. Supports name-based values (usePaginationFragment) and id-based values (useLazyLoadQuery + useLazyPaginatedQuery) with search, optimistic updates, and multiple selection modes.
Start the project's development server. For backend.ai-webui this means `pnpm dev` (no separate wsproxy needed by default). For other projects, read the project's README.md and package.json to determine the right command. When a Claude Code `/color <name>` slash command is visible in the current conversation history, set VITE_THEME_HEADER_COLOR to the matching hex so the dev server's header reflects this Claude session's color. When `/rename <name>` is visible, slugify the name and pass it as PORTLESS_APP_NAME so the dev URL reflects the session name (falls back to FR-XXXX from the branch, then to the current PR number). When the current branch's PR description names a backend test server (bare IP, `host:port`, or full URL), set VITE_DEFAULT_API_ENDPOINT so the login screen pre-fills that endpoint and any stale session targeting a different backend is logged out. Trigger on: "start dev server", "run dev", "pnpm dev 띄워", "개발 서버 띄워", "dev 서버 시작", "boot the dev environment", "실행해줘 dev".
Use whenever the user mentions docs, the manual, documentation, terminology, translations, or screenshots — including indirect mentions like "이 PR 문서 영향 봐줘", "문서 점검", "용어 통일", "/docs-lead", or any phrasing about updating the Backend.AI WebUI user manual under packages/backend.ai-webui-docs/. Single entry point that runs docs-lint diagnosis, surfaces a prioritized queue via AskUserQuestion, and orchestrates the four docs worker subagents (planner / writer / screenshot-capturer / reviewer) through approval gates.
Use when creating or editing a modal/drawer, adding a form inside one, debugging stale state or close-animation issues, or deciding between `BAIModal` and `modal.confirm`. Covers `BAIUnmountAfterClose` wrapping, `onRequestClose` convention, and id-based open state.