core-componentslisted
Install: claude install-skill PINGySHITBOX/claude-code-showcase
# Core Components
## Design System Overview
Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.
## Design Tokens
**NEVER hard-code values. Always use design tokens.**
### Spacing Tokens
```tsx
// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />
// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />
```
| Token | Value |
|-------|-------|
| `$1` | 4px |
| `$2` | 8px |
| `$3` | 12px |
| `$4` | 16px |
| `$6` | 24px |
| `$8` | 32px |
### Color Tokens
```tsx
// CORRECT - Semantic tokens
<Text color="$textPrimary" />
<Box backgroundColor="$backgroundSecondary" />
// WRONG - Hard-coded colors
<Text color="#333333" />
<Box backgroundColor="rgb(245, 245, 245)" />
```
| Semantic Token | Use For |
|----------------|---------|
| `$textPrimary` | Main text |
| `$textSecondary` | Supporting text |
| `$textTertiary` | Disabled/hint text |
| `$primary500` | Brand/accent color |
| `$statusError` | Error states |
| `$statusSuccess` | Success states |
### Typography Tokens
```tsx
<Text fontSize="$lg" fontWeight="$semibold" />
```
| Token | Size |
|-------|------|
| `$xs` | 12px |
| `$sm` | 14px |
| `$md` | 16px |
| `$lg` | 18px |
| `$xl` | 20px |
| `$2xl` | 24px |
## Core Components
### Box
Base layout component with token support:
```tsx
<Box
padding="$4"
backgroundColor="$backgroundPrimary"
borderRadius="$lg"
>
{children}
</Box>
```
### HStack / VStack
Horizontal and vertica