技能 core-components
🧩

core-components

安全 🌐 網路存取📁 檔案系統存取⚙️ 外部命令

通过设计系统模式构建一致的UI

也可從以下取得: sickn33

没有设计标准构建界面会导致样式不一致和维护问题。本技能提供组件模式和设计令牌，用于构建统一、可维护的用户界面。

支援: Claude Codex Code(CC)
📊 70 充足
1

下載技能 ZIP

2

在 Claude 中上傳

前往 設定 → 功能 → 技能 → 上傳技能

3

開啟並開始使用

測試它

正在使用「core-components」。 创建带有头像、标题和副标题的列表项

預期結果:

  • HStack容器，间距$3，居中对齐
  • Avatar组件，大小md以保持一致尺寸
  • VStack用于文本，标题使用$semibold字重
  • 副标题文本使用$textSecondary颜色令牌
  • Chevron图标使用$textTertiary作为细微指示器

正在使用「core-components」。 构建主要操作按钮

預期結果:

  • Button，variant为solid用于主要操作
  • 大小md用于标准触摸目标
  • isLoading属性用于异步状态反馈
  • isDisabled属性用于验证状态

品質評分

38
架構
100
可維護性
87
內容
23
社群
100
安全
91
規範符合性

你能建構什麼

构建一致的UI组件

应用设计令牌和组件模式，在您的React应用程序中创建统一的界面

记录组件标准

将这些模式用作您自己的设计系统文档和组件指南的模板

创建移动端UI布局

使用Box、HStack和VStack应用跨平台组件模式，创建一致的移动端界面

試試這些提示

基础组件使用 
展示如何使用设计令牌创建具有实心和轮廓变体的Button
布局结构 
使用VStack和设计令牌创建具有标题栏、可滚动内容和一致内边距的屏幕布局
带验证的表单 
使用Input组件、适当的间距令牌和statusError令牌构建带有错误状态处理的表单
自定义卡片组件 
使用Box和设计令牌创建具有悬浮和轮廓变体的Card组件，用于内边距和圆角

最佳實務

  • 始终使用设计令牌而不是硬编码值来处理颜色、间距和排版
  • 从组件库导入核心组件而不是原始平台组件
  • 使用语义化颜色令牌如$textPrimary和$statusError来实现主题感知样式

避免

  • 硬编码像素值或十六进制颜色而不是使用设计令牌
  • 使用react-native中的原始View和Text而不是核心组件中的Box和Text
  • 使用style属性应用内联样式而不是基于令牌的属性

常見問題

哪些平台支持此技能？
此技能适用于Claude、Codex和Claude Code，为React和React Native组件提供指导。
有哪些可用的设计令牌？
间距令牌$1到$8，语义化颜色令牌，以及从$xs到$2xl的排版令牌。
如何将这些模式适配到我的代码库？
将示例导入替换为您的组件库导出。令牌命名和模式保持不变。
使用此技能时我的数据安全吗？
是的。此技能仅包含文档和模式。不执行代码，也不传输数据。
为什么使用设计令牌而不是硬编码值？
令牌确保一致的样式实现，启用主题切换，并使设计更改更易于维护。
这适用于CSS-in-JS库吗？
是的。这些模式和令牌适用于styled-components、Emotion或任何CSS-in-JS方法。

開發者詳情

作者

ChrisWiles

授權

MIT

儲存庫

https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/core-components

引用

main

檔案結構

📄 SKILL.md