frontend-mobile-development-component-scaffold
使用 TypeScript 和测试脚手架 React 组件
此技能生成生产就绪的 React 和 React Native 组件，具有完整的 TypeScript 类型定义、无障碍功能、测试设置和多种样式选项。它确保组件库中代码质量的一致性。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“frontend-mobile-development-component-scaffold”。 Create a Button component with variant, size, and disabled props
预期结果:
一个完整的 React 组件，包含 TypeScript 接口、CSS Modules 样式、无障碍属性和测试文件
正在使用“frontend-mobile-development-component-scaffold”。 Generate a Card component for React Native with image, title, and description
预期结果:
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] 的函数式 React 组件，包含 [prop1]、[prop2] 的属性。使用 TypeScript 和 CSS Modules 进行样式设置。
生成一个完整的 TypeScript React 组件，包括：组件文件、属性类型、CSS Modules 样式、使用 Testing Library 的 Jest 测试，以及 Storybook 故事文件。确保其具备无障碍功能。
创建一个适用于 iOS 和 Android 的 [ComponentName] React Native 组件。包含 TypeScript 接口、StyleSheet 样式和无障碍属性。
最佳实践
- 始终使用 TypeScript 接口定义组件属性，以确保应用程序的类型安全
- 从一开始就包含无障碍属性，而不是稍后添加
- 与组件一起生成测试以保持高测试覆盖率
避免
- 避免生成没有属性类型的组件 - 这会导致运行时错误
- 不要跳过无障碍功能，因为它们在实现后更难添加
- 避免在同一组件中混合使用样式方案