下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「core-components」。 创建一个带有标题和图标的设置屏幕标题
預期結果:
一个 ScreenHeader 组件，标题文本使用$textPrimary 颜色，图标在 HStack 中定位，$3 gap，包裹在带有$4 padding 和$backgroundPrimary 背景的 Box 中。
正在使用「core-components」。 设置禁用状态的按钮样式
預期結果:
一个 Button 组件，variant 设置为 solid，isDisabled 属性设置为 true，这会自动应用使用$textTertiary 作为标签颜色的弱化样式。
安全審計
安全Static analyzer flagged 57 patterns (49 external_commands, 8 blocker) that are all false positives. The backtick detections are Markdown code fence delimiters (```tsx) used for syntax highlighting in documentation, not shell execution. No cryptographic code exists in this file. This is a documentation-only skill teaching React Native component library usage with design tokens. No security risks detected.
品質評分
你能建構什麼
构建新功能的正面开发人员
开发人员需要添加一个带有表单和列表的新设置屏幕。他们使用此技能来应用一致的间距令牌、颜色令牌和组件模式，以匹配现有的设计系统。
标准化 UI 组件的团队
团队注意到他们应用中的样式不一致。他们使用此技能通过设计令牌建立布局、排版和交互元素的共享模式。
执行标准的代码审查人员
在代码审查期间，开发人员识别出硬编码的值和原始平台组件。他们参考此技能来引导贡献者正确使用令牌和核心组件。
試試這些提示
展示如何使用核心组件库和适当的设计令牌创建带有标题和内容的卡片组件。
使用 VStack、Input 组件和适当的间距令牌创建一个包含电子邮件和密码输入框的登录表单。包括一个提交按钮。
构建一个列表项组件，显示用户头像、姓名和副标题，并带有箭头图标。使用 HStack、适当的 gap 令牌和用于文本层级的语义颜色令牌。
审查此组件代码并识别任何应使用设计令牌的硬编码值。展示使用正确的间距、颜色和排版令牌的修正版本。
最佳實務
- 始终使用设计令牌（$4、$textPrimary）而不是硬编码的值（16、#333333）
- 从 components/core 导入而不是原始 react-native 基元
- 使用 HStack 和 VStack 进行布局，而不是手动配置 flexbox
避免
- 使用 react-native 的 View 和 Text 而不是核心组件的 Box 和 Text
- 为间距、颜色或排版硬编码像素值
- 创建内联样式对象而不是使用基于令牌的属性