frontend-mobile-development-component-scaffold
使用 TypeScript 和測試建構 React 元件
此技能生成生產就緒的 React 和 React Native 元件，具備完整的 TypeScript 類型定義、輔助功能設定、測試環境及多種樣式選項，確保元件庫的程式碼品質一致。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-mobile-development-component-scaffold". 建立一個具有 variant、size 和 disabled props 的 Button 元件
النتيجة المتوقعة:
一個完整的 React 元件，包含 TypeScript 介面、CSS Modules 樣式、無障礙屬性和測試檔案
استخدام "frontend-mobile-development-component-scaffold". 為 React Native 生成一個具有圖片、標題和描述的 Card 元件
النتيجة المتوقعة:
React Native 元件，使用 StyleSheet、TouchableOpacity、accessibilityLabel 和正確的 TypeScript 類型
التدقيق الأمني
آمنAll static security findings are false positives. The detected patterns (external_commands, weak_crypto, obfuscation) are actually JavaScript template literals and standard array methods used in example code. The skill is a legitimate React component scaffolding tool with no security risks.
درجة الجودة
ماذا يمكنك بناءه
快速元件原型製作
快速生成包含測試和文件的完整元件檔案，以加速開發工作流程
團隊程式碼標準化
確保所有團隊成員建立遵循一致模式和最佳實踐的元件
無障礙優先開發
生成內建無障礙功能的元件，以符合 WCAG 合規要求
جرّب هذه الموجهات
建立一個名為 [ComponentName] 的函式元件，包含 [prop1]、[prop2] 的 props。使用 TypeScript 和 CSS Modules 進行樣式設定。
生成一個完整的 TypeScript React 元件，包括：元件檔案、prop 類型、CSS Modules 樣式、使用 Testing Library 的 Jest 測試，以及 Storybook 故事檔案。確保無障礙。
為 [ComponentName] 建立一個可在 iOS 和 Android 上運作的 React Native 元件。包含 TypeScript 介面、StyleSheet 樣式和無障礙 props。
為 [ComponentName] 功能生成一組相關元件，包括：主要元件、子元件、類型、樣式、測試，以及用於清晰匯入的 index 檔案。
أفضل الممارسات
- 始終使用 TypeScript 介面定義元件 props，以確保應用程式中的類型安全
- 從一開始就包含無障礙屬性，而不是稍後才添加
- 與元件一起生成測試以保持高的測試覆蓋率
تجنب
- 避免生成沒有 prop 類型的元件 — 這會導致執行階段錯誤
- 不要跳過無障礙功能，因為在實作後更難添加
- 避免在同一個元件中混合使用不同的樣式方法