Loading...
Loading...
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>
);
core-components is an expert AI persona designed to improve your coding workflow. Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library. It provides senior-level context directly within your IDE.
To install the core-components skill, download the package, extract the files to your project's .cursor/skills directory, and type @core-components in your editor chat to activate the expert instructions.
Yes, the core-components AI persona is completely free to download and integrate into compatible Agentic IDEs like Cursor, Windsurf, Github Copilot, and Anthropic MCP servers.
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Download Skill Package.cursor/skills@core-components in editor chat.Copy the instructions from the panel on the left and paste them into your custom instructions setting.
"Adding this core-components persona to my Cursor workspace completely changed the quality of code my AI generates. Saves me hours every week."
Developers who downloaded core-components also use these elite AI personas.
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.
You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
Explore our most popular utilities designed for the modern Indian creator.