Claude-skill-registry gp-ui

Use when building React UIs for TheGP applications, migrating existing UIs to @gp/ui components, integrating Tailwind v4 with @gp/ui theme, or answering questions about available components, design tokens, icons, or setup. Activate when user mentions @gp/ui, TheGP design system, or asks about GP-specific UI patterns and components.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/gp-ui" ~/.claude/skills/majiayu000-claude-skill-registry-gp-ui && rm -rf "$T"

manifest: skills/data/gp-ui/SKILL.md

@gp/ui Design System

TheGP's shared React component library with Tailwind theme integration.

Quick Reference

Import:

import { Button, Card, Layout } from '@gp/ui'

Theme:

@import "@gp/ui/theme";

in CSS Icons:

import { SearchIcon, UserIcon } from '@gp/ui'

Available Components

Component	Purpose
Button	Primary actions with variants: primary, secondary, ghost, destructive
Badge	Status indicators: success, warning, error, info, neutral
Card	Container with Card.Header, Card.Body, Card.Footer
StatCard	Metric display with optional trend indicator
StatGrid	Key-value grid with formatting and copy support
Alert	Notifications: info, warning, error, success
Input	Text input with label, icons, validation states
TextArea	Multi-line input with auto-resize
Modal	Dialog overlays (Radix-based) with sizes, controlled/uncontrolled state
Dropdown	Menu system (Radix-based) with items, checkboxes, submenus
Tooltip	Hover hints (Radix-based)
TabBar	Horizontal tab navigation
Layout	App shell with header, sidebar, user menu
Sidebar	Collapsible navigation with responsive behavior
Skeleton	Loading placeholders
LoginPage	Full-screen login with branding
GPLogo	TheGP logo SVG

Resources

Load these as needed:

references/components.md: Complete component API reference with props and examples
references/setup.md: Installation, Tailwind v4 integration, peer dependencies
references/design-guide.md: Colors, typography, spacing conventions
references/icons.md: Available icon exports and naming conventions

Key Patterns

Class Merging

Always use

cn()

for combining classes:

import { cn } from '@gp/ui'
<div className={cn('base-class', condition && 'conditional-class', className)} />

Compound Components

Card, Dropdown, Tooltip use dot notation:

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
</Card>

Semantic Icons

Icons named by purpose, not appearance:

import { BackIcon, SpinnerIcon, DeleteIcon } from '@gp/ui'

Theme Tokens

Custom Tailwind colors available after importing theme:

```
orange-50
```
to
```
orange-900
```
(brand orange)
```
navy-50
```
to
```
navy-950
```
(dark navy)
```
cream
```
(off-white background)

Peer Dependencies

Apps must install:

react

react-dom

lucide-react

@radix-ui/react-dialog

@radix-ui/react-dropdown-menu

@radix-ui/react-tooltip

@radix-ui/react-label