工程开发
core-components avatar

core-components

核心组件库与设计系统模式,通过设计令牌 (design tokens) 确保 UI 开发的一致性。

简介

core-components 技能为 React Native 项目中维持高质量且一致的用户界面提供了关键指引。它是开发人员与 AI 代理的主要参考资料,确保所有 UI 实作皆遵循既定的设计系统模式。通过强制使用中心化的组件库而非原始平台组件,此技能消除了视觉上的差异并简化了维护工作。该技能强调设计令牌 (design tokens) 的严格应用,特别是间距、颜色与排版,以防止硬编码数值所导致的技术债与脆弱的布局结构。

  • 标准化核心布局组件的使用,包括 Box、HStack、VStack 与 Card,以维持结构的一致性。

  • 针对互动式元素 (如 Button 与 Input) 强制执行基于令牌的属性,确保变体与验证行为的一致。

  • 提供复杂布局的清晰模板,例如 Screen 标头、表单结构与列表项目模式,以减少重复编码任务。

  • 通过明确对比硬编码样式与建议的令牌化实作,防止常见的反模式设计。

  • 提供组件属性模式的指导,鼓励开发人员构建严格使用现有设计令牌架构的新型可重复使用组件。

  • 优先使用组件抽象层 (如 <Box />) 而非原生 React Native 原型 (如 <View />) 以确保主题合规性。

  • 应用语义颜色令牌 (如 $textPrimary, $statusError) 而非十六进制或 RGB 码,以支持主题切换与无障碍功能。

  • 使用提供的间距与排版比例进行所有布局计算,以维持整个应用程序视觉节奏的一致性。

  • 在实作新的 UI 功能、构建表单布局或重构现有视图层时,请参考此技能,以确保它们符合专案的设计语言。

  • 结合其他技能使用,例如 react-ui-patterns 处理加载状态,以及 testing-patterns 在单元测试中模拟这些组件。

仓库统计

Star 数
5,855
Fork 数
545
Open Issue 数
13
主要语言
JavaScript
默认分支
main
同步状态
空闲
最近同步时间
2026年4月30日 12:52
在 GitHub 查看