Menu
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | core-components |
| description | Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library. |
Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.
NEVER hard-code values. Always use design tokens.
// 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 |
// 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 |
<Text fontSize="$lg" fontWeight="$semibold" />
| Token | Size |
|---|---|
$xs | 12px |
$sm | 14px |
$md | 16px |
$lg | 18px |
$xl | 20px |
$2xl | 24px |
Base layout component with token support:
<Box
padding="$4"
backgroundColor="$backgroundPrimary"
borderRadius="$lg"
>
{children}
</Box>
Horizontal and vertical flex layouts:
<HStack gap="$3" alignItems="center">
<Icon name="user" />
<Text>Username</Text>
</HStack>
<VStack gap="$4" padding="$4">
<Heading>Title</Heading>
<Text>Content</Text>
</VStack>
Typography with token support:
<Text
fontSize="$lg"
fontWeight="$semibold"
color="$textPrimary"
>
Hello World
</Text>
Interactive button with variants:
<Button
onPress={handlePress}
variant="solid"
size="md"
isLoading={loading}
isDisabled={disabled}
>
Click Me
</Button>
| Variant | Use For |
|---|---|
solid | Primary actions |
outline | Secondary actions |
ghost | Tertiary/subtle actions |
link | Inline actions |
Form input with validation:
<Input
value={value}
onChangeText={setValue}
placeholder="Enter text"
error={touched ? errors.field : undefined}
label="Field Name"
/>
Content container:
<Card padding="$4" gap="$3">
<CardHeader>
<Heading size="sm">Card Title</Heading>
</CardHeader>
<CardBody>
<Text>Card content</Text>
</CardBody>
</Card>
const MyScreen = () => (
<Screen>
<ScreenHeader title="Page Title" />
<ScreenContent padding="$4">
{/* Content */}
</ScreenContent>
</Screen>
);
<VStack gap="$4" padding="$4">
<Input label="Name" {...nameProps} />
<Input label="Email" {...emailProps} />
<Button isLoading={loading}>Submit</Button>
</VStack>
<HStack
padding="$4"
gap="$3"
alignItems="center"
borderBottomWidth={1}
borderColor="$borderLight"
>
<Avatar source={{ uri: imageUrl }} size="md" />
<VStack flex={1}>
<Text fontWeight="$semibold">{title}</Text>
<Text color="$textSecondary" fontSize="$sm">{subtitle}</Text>
</VStack>
<Icon name="chevron-right" color="$textTertiary" />
</HStack>
// WRONG - Hard-coded values
<View style={{ padding: 16, backgroundColor: '#fff' }}>
// CORRECT - Design tokens
<Box padding="$4" backgroundColor="$backgroundPrimary">
// WRONG - Raw platform components
import { View, Text } from 'react-native';
// CORRECT - Core components
import { Box, Text } from 'components/core';
// WRONG - Inline styles
<Text style={{ fontSize: 18, fontWeight: '600' }}>
// CORRECT - Token props
<Text fontSize="$lg" fontWeight="$semibold">
When creating components, use token-based props:
interface CardProps {
padding?: '$2' | '$4' | '$6';
variant?: 'elevated' | 'outlined' | 'filled';
children: React.ReactNode;
}
const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (
<Box
padding={padding}
backgroundColor="$backgroundPrimary"
borderRadius="$lg"
{...variantStyles[variant]}
>
{children}
</Box>
);
Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.
GraphQL queries, mutations, and code generation patterns. Use when creating GraphQL operations, working with Apollo Client, or generating types.
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
Four-phase debugging methodology with root cause analysis. Use when investigating bugs, fixing test failures, or troubleshooting unexpected behavior. Emphasizes NO FIXES WITHOUT ROOT CAUSE FIRST.
Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle.