frontend-mobile-development-component-scaffold
Générer des composants React avec TypeScript et tests
Cette skill génère des composants React et React Native prêts pour la production avec une saisie TypeScript complète, des fonctionnalités d'accessibilité, une configuration de tests et plusieurs options de style. Elle assure une qualité de code cohérente dans toute votre bibliothèque de composants.
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 "frontend-mobile-development-component-scaffold". Create a Button component with variant, size, and disabled props
Résultat attendu:
A complete React component with TypeScript interface, CSS Modules styles, accessibility attributes, and test file
Utilisation de "frontend-mobile-development-component-scaffold". Generate a Card component for React Native with image, title, and description
Résultat attendu:
React Native component with StyleSheet, TouchableOpacity, accessibilityLabel, and proper TypeScript types
Audit de sécurité
SûrAll 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.
Score de qualité
Ce que vous pouvez construire
Prototype rapide de composants
Générer rapidement des fichiers de composants complets avec tests et documentation pour accélérer le flux de travail de développement
Standardisation du code d'équipe
S'assurer que tous les membres de l'équipe créent des composants en suivant des modèles et bonnes pratiques cohérents
Développement axé sur l'accessibilité
Générer des composants avec des fonctionnalités d'accessibilité intégrées pour répondre aux exigences de conformité WCAG
Essayez ces prompts
Create a functional React component called [ComponentName] with props for [prop1], [prop2]. Use TypeScript and CSS Modules for styling.
Generate a complete React component with TypeScript, including: component file, prop types, CSS Modules styles, Jest tests with Testing Library, and Storybook story. Make it accessible.
Create a React Native component for [ComponentName] that works on iOS and Android. Include TypeScript interfaces, StyleSheet styles, and accessibility props.
Generate a set of related components for a [ComponentName] feature including: main component, sub-components, types, styles, tests, and index file for clean imports.
Bonnes pratiques
- Toujours utiliser des interfaces TypeScript pour les props des composants afin de garantir la sécurité des types dans votre application
- Inclure les attributs d'accessibilité dès le début plutôt que de les ajouter plus tard
- Générer les tests en même temps que les composants pour maintenir une couverture de tests élevée
Éviter
- Éviter de générer des composants sans types de props - cela entraîne des erreurs d'exécution
- Ne pas sauter les fonctionnalités d'accessibilité car elles sont plus difficiles à ajouter après l'implémentation
- Éviter de mélanger les approches de style dans le même composant