core-components
使用設計系統模式建構一致的 UI
在建構介面時沒有設計標準會導致不一致的樣式和維護問題。本技能提供元件模式和設計 token，以建立統一、可維護的使用者介面。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "core-components". Create a list item with avatar, title, and subtitle
Résultat attendu:
- 具有 $3 間距和居中對齊的 HStack 容器
- 具有 md 大小以保持一致尺寸的 Avatar 元件
- 使用 $semibold 權重的標題的 VStack
- 使用 $textSecondary 色彩 token 的副標題文字
- 使用 $textTertiary 的 Chevron 圖示作為細微指示器
Utilisation de "core-components". Build a primary action button
Résultat attendu:
- 具有實心變體的主要動作按鈕
- 標準觸控目標的 md 大小
- 用於非同步狀態回饋的 isLoading prop
- 用於驗證狀態的 isDisabled prop
Audit de sécurité
SûrThis skill is purely documentation containing design system patterns and code examples. All 95 static findings are false positives caused by pattern matching against Markdown formatting (backticks), design token names ($md, $sm, $lg), and metadata fields. No executable code, network access, or security risks present.
Facteurs de risque
🌐 Accès réseau (1)
📁 Accès au système de fichiers (1)
⚙️ Commandes externes (49)
Score de qualité
Ce que vous pouvez construire
建構一致的 UI 元件
應用設計 token 和元件模式，在您的 React 應用程式中建立統一的介面
記錄元件標準
將這些模式作為您自己設計系統文件和元件指南的模板
建立行動裝置 UI 版面配置
使用 Box、HStack 和 VStack 應用跨平台元件模式，以建立一致的行動裝置介面
Essayez ces prompts
向我展示如何使用設計 token 建立具有實心和輪廓變體的 Button
使用 VStack 和設計 token 建立具有標題、可捲動內容和一致內距的畫面版面配置
使用 Input 元件、適當的間距 token 和使用 statusError token 的錯誤狀態處理來建構表單
使用 Box 和設計 token 為內距和邊框圓角建立具有凸起和輪廓變體的 Card 元件
Bonnes pratiques
- 始終使用設計 token 而非硬編碼值來處理色彩、間距和排版
- 從您的元件庫匯入核心元件，而非使用原始平台元件
- 使用語義化色彩 token 如 $textPrimary 和 $statusError 來實現主題感知樣式
Éviter
- 硬編碼像素值或十六進位色彩而非使用設計 token
- 使用來自 react-native 的原始 View 和 Text 而非來自核心的 Box 和 Text
- 使用 style prop 套用內聯樣式而非基於 token 的 props