下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「core-components」。 建立包含標題和圖示的設定畫面頁首
預期結果:
一個 ScreenHeader 元件，標題文字使用 $textPrimary 顏色，圖示定位在包含 $3 gap 的 HStack 中，外層包裹具有 $4 padding 和 $backgroundPrimary background 的 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
- 為間距、顏色或字體排版硬編碼像素值
- 建立內聯樣式物件而非使用基於語彙的屬性