gk:nexus-ui

Add Nexus UI components to your project — a VNG-internal component library built on Radix UI and Tailwind CSS.

When to Use

Activate this skill whenever you want to add UI components to a project using Nexus UI:

/gk:nexus-ui
/gk:nexus-ui button
/gk:nexus-ui "I need a modal and a data table"

Prerequisites

Install the CLI

# Set registry (one time)
npm config set @gpp:registry https://registry-aawp.vnggames.net/

# Install CLI globally
npm install -g @gpp/vng-nexus-cli

No GitLab token needed. No VPN required.

Verify installation:

nexus-ui --version

Workflow Overview

graph LR
A[Check CLI] —> B{Initialized?}
B — No —> C[Select theme]
C —> D[nexus-ui init —theme]
B — Yes —> E[What do you need?]
D —> E
E —> F[Browse / select components]
F —> G[nexus-ui add …]
G —> H[Auto-fix peer deps]
H —> I[Show usage example]

Step 1: Initialize (First Time Only)

If nexus-ui-config.json doesn’t exist in your project root, the skill will ask you to pick a theme:

Then runs:

nexus-ui init --theme <selected_theme> --path src/components --no-local --yes

Files created by init:

Step 2: Browse & Select Components

The skill presents an interactive component picker. You can also describe what you need in plain language:

Full Component List (57 components)

accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb,
button, calendar, card, chart, checkbox, code, collapsible, combobox, command,
context-menu, data-table, date-picker, date-range-picker, dialog, drawer,
dropdown-menu, event-calendar, file-uploader, filter-multi-select,
filter-multi-select-search, follower-select, hover-card, input, kbd, label,
navigation-menu, pagination, permission-selector, popover, progress,
radio-group, scroll-area, rich-text-editor, search-input, select,
select-with-chips, separator, service-selector, sheet, skeleton, spinner,
switch, table, tabs, textarea, toast, tooltip, typography

Step 3: Install Components

Single or multiple components

nexus-ui add button
nexus-ui add button card badge tabs

Components install to src/components/<name>/<name>.tsx.

Install all components at once

nexus-ui add accordion alert alert-dialog aspect-ratio avatar badge breadcrumb button calendar card chart checkbox code collapsible combobox command context-menu data-table date-picker date-range-picker dialog drawer dropdown-menu event-calendar file-uploader filter-multi-select filter-multi-select-search follower-select hover-card input kbd label navigation-menu pagination permission-selector popover progress radio-group scroll-area rich-text-editor search-input select select-with-chips separator service-selector sheet skeleton spinner switch table tabs textarea toast tooltip typography

Peer dependencies

The skill automatically detects and installs missing peer deps after nexus-ui add — no manual action required. Example output:

pnpm add @radix-ui/react-tabs @radix-ui/react-dialog

Usage Examples

After installation the skill shows you how to import and use each component:

// Button
import { Button } from '@/components/button/button'
<Button variant="default">Click me</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

// Card
import { Card, CardHeader, CardTitle, CardContent } from '@/components/card/card'

// Tabs
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/tabs/tabs'

// Badge
import { Badge } from '@/components/badge/badge'
<Badge variant="default">Active</Badge>
<Badge variant="secondary">Draft</Badge>

// Avatar
import { Avatar, AvatarFallback } from '@/components/avatar/avatar'

Error Reference

Related Guides

• Activating & Using Skills — syntax and flags
• Skills Catalog — full list of available skills