用途
Core Components 是一套核心组件库与设计系统模式，用于在构建 UI 时统一使用核心库中的组件，而不是平台原生组件，从而保证样式与行为的一致性。它同时强调：绝不要硬编码数值，始终使用设计令牌（Design Tokens）。
主要能力
设计令牌
间距令牌：提供 $1（4px）、$2（8px）、$3（12px）、$4（16px）、$6（24px）、$8（32px）等间距值。正确用法如 <Box padding="$4" marginBottom="$2" />，错误用法为硬编码 <Box padding={16} marginBottom={8} />。
颜色令牌：使用语义化令牌，如 $textPrimary（主文本）、$textSecondary（辅助文本）、$textTertiary（禁用/提示文本）、$primary500（品牌/强调色）、$statusError（错误状态）、$statusSuccess（成功状态）。正确用法如 <Text color="$textPrimary" />，错误用法为硬编码颜色值。
排版令牌：提供 $xs（12px）、$sm（14px）、$md（16px）、$lg（18px）、$xl（20px）、$2xl（24px）等字号，配合 fontWeight 使用，如 <Text fontSize="$lg" fontWeight="$semibold" />。
核心组件
- Box：支持令牌的基础布局组件，可设置 padding、backgroundColor、borderRadius 等。
- HStack / VStack：水平与垂直弹性布局，支持 gap、alignItems、padding 等属性。
- Text：支持 fontSize、fontWeight、color 等令牌属性的排版组件。
- Button：交互按钮，支持 variant（solid 用于主要操作、outline 用于次要操作、ghost 用于三级/弱化操作、link 用于内联操作）、size、isLoading、isDisabled 等属性。
- Input：带校验的表单输入，支持 value、onChangeText、placeholder、error、label 等属性。
- Card：内容容器，包含 CardHeader、CardBody 等子组件，支持 padding、gap 等属性。
布局模式
提供屏幕布局（Screen / ScreenHeader / ScreenContent）、表单布局（VStack 包裹多个 Input 与 Button）、列表项布局（HStack 组合 Avatar、VStack、Icon）等常见模式示例。
反模式
明确列出应避免的写法：硬编码数值、使用平台原生组件（如直接 import react-native 的 View/Text）、使用内联样式；并给出对应的正确写法（使用 Box/Text 等核心组件与令牌属性）。
组件属性模式
创建组件时使用基于令牌的 props，例如 CardProps 中 padding 限定为 '$2' | '$4' | '$6'，variant 限定为 'elevated' | 'outlined' | 'filled'，并提供默认值。
使用方式
在构建 UI、使用设计令牌或与组件库协作时应用本规范：从核心库导入组件（如 import { Box, Text } from 'components/core'），通过令牌属性而非硬编码值设置样式，并遵循提供的布局模式与属性模式。
与其他技能的集成
- react-ui-patterns：使用核心组件处理 UI 状态。
- testing-patterns：在测试中 mock 核心组件。
- storybook：记录组件变体。
适用场景
适用于需要统一设计系统、保持界面样式与行为一致的前端/移动端 UI 开发，尤其是使用令牌化组件库的项目。
限制
资料未提供该技能的具体安装命令、依赖环境、支持的框架版本、收费或价格信息，暂未提供。