Compétences ui-component-patterns
📦

ui-component-patterns

Sûr

Créer des composants UI réutilisables

Créez des composants React maintenables avec des modèles de conception modernes. Cette compétence fournit des modèles pour la conception d'API de props, les composants composés, les render props, les hooks personnalisés et l'optimisation des performances.

Prend en charge: Claude Codex Code(CC)
📊 71 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "ui-component-patterns". Create a Button component with variant, size, and disabled props

Résultat attendu:

  • interface ButtonProps {
  • children: React.ReactNode;
  • variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  • size?: 'sm' | 'md' | 'lg';
  • disabled?: boolean;
  • onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  • }

Utilisation de "ui-component-patterns". Build a Modal with useModal hook

Résultat attendu:

  • function useModal(initialOpen = false) {
  • const [isOpen, setIsOpen] = useState(initialOpen);
  • const open = useCallback(() => setIsOpen(true), []);
  • const close = useCallback(() => setIsOpen(false), []);
  • const toggle = useCallback(() => setIsOpen(prev => !prev), []);
  • return { isOpen, open, close, toggle };
  • }

Audit de sécurité

Sûr
v1 • 3/11/2026

All 56 static findings are false positives. The skill contains only documentation and educational code examples for UI component patterns. Template literals in code examples were misidentified as shell commands. Reference URLs are documentation links. No malicious patterns detected.

2
Fichiers analysés
545
Lignes analysées
3
résultats
1
Total des audits
Problèmes à risque faible (3)
SKILL.md:33-529
External Commands Detection (False Positive)
JavaScript template literals (`${variable}`) in code examples were misidentified as Ruby/shell backtick command execution. This is a documentation skill with no actual command execution.
SKILL.md:511-515
Hardcoded URLs Detection (False Positive)
Reference URLs in the documentation are legitimate links to React pattern resources, not malicious network requests.
SKILL.md:525-526
Path Traversal Detection (False Positive)
Relative paths to related skills in the same repository are not path traversal vulnerabilities.
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
34
Communauté
99
Sécurité
87
Conformité aux spécifications

Ce que vous pouvez construire

Créer une bibliothèque de composants

Construisez un ensemble de composants UI réutilisables avec des API et des patterns cohérents pour votre organisation.

Implémenter des systèmes de conception

Appliquez des patterns UI cohérents dans votre application avec des composants bien structurés.

Refactoriser des composants hérités

Améliorez le code React existant en appliquant des patterns de composants modernes et des bonnes pratiques.

Essayez ces prompts

Créer un composant Button 
Create a Button component with these props: variant (primary/secondary/outline/ghost), size (sm/md/lg), disabled, isLoading. Use TypeScript and follow the pattern from ui-component-patterns skill.
Construire un composant Card 
Create a compound Card component with Card.Header, Card.Body, and Card.Footer subcomponents using the composition pattern.
Extraire la logique Modal 
Create a useModal custom hook that returns isOpen, open, close, and toggle functions. Then create a Modal component that uses this hook.
Optimiser la liste de produits 
Refactor a ProductList component that renders ProductCard items. Apply React.memo, useMemo for filtering, and useCallback for click handlers to prevent unnecessary re-renders.

Bonnes pratiques

  • Définissez les Props avec des interfaces TypeScript pour la sécurité des types et l'autocomplete IDE
  • Préférez la composition aux props - utilisez les children pour une construction UI flexible
  • Séparez la logique métier de l'UI en utilisant des hooks personnalisés
  • Memoizez les calculs coûteux avec useMemo et les callbacks avec useCallback

Éviter

  • Évitez le props drilling excessif à plus de 5 niveaux de profondeur - utilisez Context ou Composition à la place
  • Ne placez pas les appels API ou la logique métier complexe directement dans les composants UI
  • Évitez les objets ou fonctions inline dans JSX - ils provoquent des re-rendus inutiles

Foire aux questions

Quelle est la différence entre les composants composés et la composition ?
Les composants composés sont un pattern où des composants apparentés fonctionnent ensemble en partageant un état implicitement, comme Tabs/Tab. La composition est un principe plus large de construction d'UI complexes à partir de composants plus simples en utilisant les props children.
Quand dois-je utiliser les render props vs children as function ?
Les deux patterns servent des objectifs similaires. Les render props passent une fonction de rendu comme prop. Children as function passe une fonction comme children. Children est plus idiomatique en React tandis que les render props offrent une API plus explicite.
Comment éviter les re-rendus inutiles dans React ?
Utilisez React.memo pour la memoization des composants, useMemo pour les calculs coûteux, et useCallback pour les références de fonctions. Assurez-vous également que l'état est remonté au bon ancêtre commun.
Qu'est-ce que le principe de responsabilité unique pour les composants ?
Chaque composant doit faire une chose correctement. Un Button gère le comportement du bouton, un Form gère l'état du formulaire. Ne combinez pas des fonctionnalités non liées dans un seul composant.
Comment gérer les props qui changent fréquemment ?
Utilisez des composants contrôlés où le parent gère l'état, ou des composants non contrôlés avec des refs. Pour les props qui changent fréquemment comme les tableaux de données, enveloppez le composant dans React.memo avec une comparaison appropriée.
Quels sont les bénéfices de TypeScript dans la conception de composants ?
TypeScript fournit une vérification de types à la compilation, un meilleur support IDE avec autocomplete, du code auto-documenté et attrape les bugs avant l'exécution. Définissez toujours les interfaces de Props.

Détails du développeur

Licence

MIT

Dépôt

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/ui-component-patterns/

Réf

main

Structure de fichiers

📄 SKILL.md

📄 SKILL.toon