core-components by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill core-components使用核心库中的组件,而非原始平台组件。这确保了样式和行为的统一性。
切勿硬编码数值。始终使用设计令牌。
// CORRECT - Use tokens
<Box padding="$4" marginBottom="$2" />
// WRONG - Hard-coded values
<Box padding={16} marginBottom={8} />
| 令牌 | 值 |
|---|---|
$1 | 4px |
$2 | 8px |
$3 | 12px |
$4 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 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)" />
| 语义令牌 | 用途 |
|---|---|
$textPrimary | 主要文本 |
$textSecondary | 辅助文本 |
$textTertiary | 禁用/提示文本 |
$primary500 | 品牌/强调色 |
$statusError | 错误状态 |
$statusSuccess | 成功状态 |
<Text fontSize="$lg" fontWeight="$semibold" />
| 令牌 | 尺寸 |
|---|---|
$xs | 12px |
$sm | 14px |
$md | 16px |
$lg | 18px |
$xl | 20px |
$2xl | 24px |
支持令牌的基础布局组件:
<Box
padding="$4"
backgroundColor="$backgroundPrimary"
borderRadius="$lg"
>
{children}
</Box>
水平和垂直弹性布局:
<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
fontSize="$lg"
fontWeight="$semibold"
color="$textPrimary"
>
Hello World
</Text>
带变体的交互式按钮:
<Button
onPress={handlePress}
variant="solid"
size="md"
isLoading={loading}
isDisabled={disabled}
>
Click Me
</Button>
| 变体 | 用途 |
|---|---|
solid | 主要操作 |
outline | 次要操作 |
ghost | 三级/次要操作 |
link | 内联操作 |
带验证的表单输入框:
<Input
value={value}
onChangeText={setValue}
placeholder="Enter text"
error={touched ? errors.field : undefined}
label="Field Name"
/>
内容容器:
<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">
创建组件时,使用基于令牌的属性:
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>
);
每周安装量
143
代码仓库
GitHub 星标数
23.4K
首次出现
2026年1月25日
安全审计
安装于
opencode122
claude-code119
gemini-cli114
cursor109
codex109
github-copilot105
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>
);
Weekly Installs
143
Repository
GitHub Stars
23.4K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode122
claude-code119
gemini-cli114
cursor109
codex109
github-copilot105
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
118,000 周安装
dotnet-install:自动化 .NET SDK 和运行时安装指南 - 支持 Windows/macOS/Linux
85 周安装
UltraThink Orchestrator - 已弃用的AI工作流编排工具,推荐使用dev-orchestrator替代
85 周安装
数据库管理员技能:PostgreSQL/MySQL/MongoDB高可用架构、性能调优与灾难恢复
86 周安装
PDF编程技能:使用PDFKit、PDF.js、Puppeteer生成、解析、合并PDF文档
86 周安装
Spring Boot 3 工程师技能指南:微服务、云原生与响应式编程最佳实践
86 周安装
第一性原理思维教练:苏格拉底式提问,拆解难题,从零重建创新解决方案
86 周安装