[ PROMPT_NODE_24585 ]
Core Components
[ SKILL_DOCUMENTATION ]
# 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
// WRONG - Hard-coded values
```
| Token | Value |
|-------|-------|
| `$1` | 4px |
| `$2` | 8px |
| `$3` | 12px |
| `$4` | 16px |
| `$6` | 24px |
| `$8` | 32px |
### Color Tokens
```tsx
// CORRECT - Semantic tokens
// WRONG - Hard-coded colors
```
| 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
```
| Token | Size |
|-------|------|
| `$xs` | 12px |
| `$sm` | 14px |
| `$md` | 16px |
| `$lg` | 18px |
| `$xl` | 20px |
| `$2xl` | 24px |
## Core Components
### Box
Base layout component with token support:
```tsx
{children}
```
### HStack / VStack
Horizontal and vertical flex layouts:
```tsx
Username
Title
Content
```
### Text
Typography with token support:
```tsx
Hello World
```
### Button
Interactive button with variants:
```tsx
```
| Variant | Use For |
|---------|---------|
| `solid` | Primary actions |
| `outline` | Secondary actions |
| `ghost` | Tertiary/subtle actions |
| `link` | Inline actions |
### Input
Form input with validation:
```tsx
```
### Card
Content container:
```tsx
Card Title
Card content
```
## Layout Patterns
### Screen Layout
```tsx
const MyScreen = () => (
{/* Content */}
);
```
### Form Layout
```tsx
```
### List Item Layout
```tsx
{title}
{subtitle}
```
## Anti-Patterns
```tsx
// WRONG - Hard-coded values
// CORRECT - Design tokens
// WRONG - Raw platform components
import { View, Text } from 'react-native';
// CORRECT - Core components
import { Box, Text } from 'components/core';
// WRONG - Inline styles
// CORRECT - Token props
```
## Component Props Pattern
When creating components, use token-based props:
```tsx
interface CardProps {
padding?: '$2' | '$4' | '$6';
variant?: 'elevated' | 'outlined' | 'filled';
children: React.ReactNode;
}
const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (
{children}
);
```
## Integration with Other Skills
- **react-ui-patterns**: Use core components for UI states
- **testing-patterns**: Mock core components in tests
- **storybook**: Document component variants