技能 core-components
🧩

core-components

安全 🌐 网络访问📁 文件系统访问⚙️ 外部命令

使用設計系統模式建構一致的 UI

也可从以下获取: sickn33

在建構介面時沒有設計標準會導致不一致的樣式和維護問題。本技能提供元件模式和設計 token，以建立統一、可維護的使用者介面。

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

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“core-components”。 Create a list item with avatar, title, and subtitle

预期结果:

  • 具有 $3 間距和居中對齊的 HStack 容器
  • 具有 md 大小以保持一致尺寸的 Avatar 元件
  • 使用 $semibold 權重的標題的 VStack
  • 使用 $textSecondary 色彩 token 的副標題文字
  • 使用 $textTertiary 的 Chevron 圖示作為細微指示器

正在使用“core-components”。 Build a primary action button

预期结果:

  • 具有實心變體的主要動作按鈕
  • 標準觸控目標的 md 大小
  • 用於非同步狀態回饋的 isLoading prop
  • 用於驗證狀態的 isDisabled prop

质量评分

38
架构
100
可维护性
87
内容
21
社区
100
安全
91
规范符合性

你能构建什么

建構一致的 UI 元件

應用設計 token 和元件模式，在您的 React 應用程式中建立統一的介面

記錄元件標準

將這些模式作為您自己設計系統文件和元件指南的模板

建立行動裝置 UI 版面配置

使用 Box、HStack 和 VStack 應用跨平台元件模式，以建立一致的行動裝置介面

试试这些提示

基本元件使用方式 
向我展示如何使用設計 token 建立具有實心和輪廓變體的 Button
版面配置結構 
使用 VStack 和設計 token 建立具有標題、可捲動內容和一致內距的畫面版面配置
帶驗證的表單 
使用 Input 元件、適當的間距 token 和使用 statusError token 的錯誤狀態處理來建構表單
自訂卡片元件 
使用 Box 和設計 token 為內距和邊框圓角建立具有凸起和輪廓變體的 Card 元件

最佳实践

  • 始終使用設計 token 而非硬編碼值來處理色彩、間距和排版
  • 從您的元件庫匯入核心元件，而非使用原始平台元件
  • 使用語義化色彩 token 如 $textPrimary 和 $statusError 來實現主題感知樣式

避免

  • 硬編碼像素值或十六進位色彩而非使用設計 token
  • 使用來自 react-native 的原始 View 和 Text 而非來自核心的 Box 和 Text
  • 使用 style prop 套用內聯樣式而非基於 token 的 props

常见问题

哪些平台支援此技能？
此技能適用於 Claude、Codex 和 Claude Code，為 React 和 React Native 元件提供指導。
有哪些可用的設計 token？
間距 token $1 到 $8、語義化色彩 token，以及從 $xs 到 $2xl 的排版 token。
如何将这些模式适应到我的代码库？
將範例匯出替換為您元件庫的匯出。Token 命名和模式保持不變。
使用此技能時我的資料安全嗎？
是的。本技能僅包含文件和模式。不會執行任何程式碼，也不會傳輸任何資料。
為什麼要使用設計 token 而非硬編碼值？
Token 確保一致的樣式、啟用主題切換，並使設計變更更容易維護。
這適用於 CSS-in-JS 函式庫嗎？
是的。這些模式和 token 適用於 styled-components、Emotion 或任何 CSS-in-JS 方法。

开发者详情

作者

ChrisWiles

许可证

MIT

仓库

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

引用

main

文件结构

📄 SKILL.md