Core Components
Core Components is an design AI skill with a core value of Core component library and design system patterns. It
helps developers solve real-world problems in the design domain, boosting
efficiency, automating repetitive tasks, and optimizing workflows.
Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
Quick Facts
mkdir -p ./skills/core-components && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/core-components/SKILL.md -o ./skills/core-components/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# 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
// 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
// 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
<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:
<Box
padding="$4"
backgroundColor="$backgroundPrimary"
borderRadius="$lg"
>
{children}
</Box>HStack / VStack
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>Text
Typography with token support:
<Text
fontSize="$lg"
fontWeight="$semibold"
color="$textPrimary"
>
Hello World
</Text>Button
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 |
Input
Form input with validation:
<Input
value={value}
onChangeText={setValue}
placeholder="Enter text"
error={touched ? errors.field : undefined}
label="Field Name"
/>Card
Content container:
<Card padding="$4" gap="$3">
<CardHeader>
<Heading size="sm">Card Title</Heading>
</CardHeader>
<CardBody>
<Text>Card content</Text>
</CardBody>
</Card>Layout Patterns
Screen Layout
const MyScreen = () => (
<Screen>
<ScreenHeader title="Page Title" />
<ScreenContent padding="$4">
{/* Content */}
</ScreenContent>
</Screen>
);Form Layout
<VStack gap="$4" padding="$4">
<Input label="Name" {...nameProps} />
<Input label="Email" {...emailProps} />
<Button isLoading={loading}>Submit</Button>
</VStack>List Item Layout
<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>Anti-Patterns
// 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">Component Props Pattern
When creat
🎯 Best For
- UI designers
- Product designers
- Claude users
- Designers
- Creative professionals
💡 Use Cases
- Generating component mockups
- Creating design system tokens
- Design system documentation
- Component specification creation
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply Core Components to Your Work
Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.
- 4
Review and Refine
Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.
❓ Frequently Asked Questions
Does this work with Figma?
Some design skills integrate with Figma plugins. Check the Works With section for supported tools.
Does Core Components generate production-ready design specs?
It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.
How do I install Core Components?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/core-components/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Skipping usability testing
AI-generated designs should be validated with real users before development.
Not reading the full skill
Skills contain important context and edge cases beyond the quick start.