From 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.
npx claudepluginhub thegpvc/gp-ui --plugin gp-uiThis skill uses the workspace's default tool permissions.
TheGP's shared React component library with Tailwind theme integration.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
TheGP's shared React component library with Tailwind theme integration.
Import: import { Button, Card, Layout } from '@gp/ui'
Theme: @import "@gp/ui/theme"; in CSS
Icons: import { SearchIcon, UserIcon } from '@gp/ui'
| 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 |
Load these as needed:
Always use cn() for combining classes:
import { cn } from '@gp/ui'
<div className={cn('base-class', condition && 'conditional-class', className)} />
Card, Dropdown, Tooltip use dot notation:
<Card>
<Card.Header>Title</Card.Header>
<Card.Body>Content</Card.Body>
</Card>
Icons named by purpose, not appearance:
import { BackIcon, SpinnerIcon, DeleteIcon } from '@gp/ui'
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)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