Identifiez et extrayez des composants réutilisables, des design tokens et des patterns depuis votre codebase dans un design system structuré. Cette skill consolide le code UI dispersé en assets systématiques et documentés.
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 "extract". extract target=buttons
Résultat attendu:
- Trouvé 3 implémentations de boutons dans la codebase :
- - PrimaryButton (utilisé 12 fois)
- - SecondaryButton (utilisé 8 fois)
- - IconButton (utilisé 5 fois)
- Recommandation : Créer un composant Button unifié avec prop variant
Utilisation de "extract". extract target=colors
Résultat attendu:
- 15 valeurs de couleurs uniques extraites :
- - Primary: #3B82F6 (utilisé 45 fois)
- - Secondary: #8B5CF6 (utilisé 23 fois)
- - 13 couleurs additionnelles pour des cas d'usage spécifiques
- Tokens créés : color-primary, color-secondary, color-success, color-warning, color-error
Audit de sécurité
SûrAll 19 static findings are false positives. The skill is a benign design system extraction tool that analyzes code for reusable patterns. The flagged 'weak cryptographic algorithm' patterns are simply markdown text in descriptions and instructions (e.g., YAML frontmatter, section headers). No actual cryptographic code or security vulnerabilities exist.
Score de qualité
Ce que vous pouvez construire
Consolidation de composants
Trouver et extraire les patterns UI répétés (boutons, cartes, inputs et autres) dispersés dans la codebase vers une unique bibliothèque de composants.
Création de design tokens
Extraire les couleurs hard-codées, l'espacement, la typographie et les valeurs d'ombres dans un système de design tokens structuré.
Automatisation de la migration
Remplacer systématiquement les anciennes implémentations par de nouveaux composants de design system tout en maintenant la fonctionnalité.
Essayez ces prompts
Utilisez la skill extract pour trouver les patterns réutilisables dans la feature d'authentification. Recherchez les boutons répétés, les inputs de formulaire et les patterns de layout.
Exécutez extract pour identifier toutes les valeurs de couleurs hard-codées, les unités d'espacement et les styles de typographie dans la codebase et les organiser en design tokens.
Utilisez extract pour analyser le répertoire ui/, identifier les composants qui devraient être partagés, et créer un plan pour les consolider.
Exécutez extract sans cible pour scanner toute la codebase, identifier toutes les opportunités d'extraction, et prioriser par fréquence d'usage et bénéfice de maintenance.
Bonnes pratiques
- Extraire les patterns utilisés 3+ fois ou ayant clairement un potentiel de réutilisation
- Suivre les conventions de naming et de structure du design system existant
- Toujours créer les types TypeScript appropriés et la documentation pour les nouveaux composants
Éviter
- Extraire des implémentations ponctuelles sans généralisation
- Créer des composants trop génériques difficiles à utiliser
- Zapper l'accessibilité (ARIA, navigation clavier) dans les composants extraits