ReddRadar
Agent skill
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 this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/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-50toorange-900(brand orange)navy-50tonavy-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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?