frontend-patterns
Créer des applications React modernes avec des modèles éprouvés
Les développeurs frontend luttent avec une architecture de code incohérente et réinventent des solutions pour des problèmes courants. Cette compétence fournit des modèles React éprouvés pour les composants, les hooks, la gestion d'état et l'optimisation des performances.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-patterns". Create a Toggle switch component with accessibility features
النتيجة المتوقعة:
Un composant Toggle entièrement accessible avec navigation au clavier, attributs ARIA appropriés, gestion du focus et types TypeScript incluant le rappel onChange et les props d'état checked.
استخدام "frontend-patterns". Build a data table with sorting and pagination
النتيجة المتوقعة:
Un composant DataTable avec tri de colonnes avec indicateurs, contrôles de pagination côté client, virtualisation des lignes pour les grands ensembles de données, et rendu de cellules personnalisables à travers des définitions de colonnes compounds.
التدقيق الأمني
آمنThis skill contains educational frontend development patterns for React and Next.js. All static analysis findings were false positives: backtick detections were TypeScript template literals in code examples, dynamic imports are React lazy() patterns for code splitting, and fetch calls are standard browser API usage for data fetching. No security risks identified.
درجة الجودة
ماذا يمكنك بناءه
Construire une bibliothèque de composants réutilisables
Générer des composants compounds pour les cartes, onglets et modales qui appliquent des modèles de conception cohérents dans votre organisation.
Optimiser une application React lente
Appliquer la mémoïsation, le code splitting et les modèles de virtualisation pour améliorer les performances de rendu des interfaces riches en données.
Migrer des composants de classe vers les hooks
Convertir les composants hérités basés sur des classes et la gestion d'état vers des composants fonctionnels modernes avec des hooks personnalisés.
جرّب هذه الموجهات
Créer un composant compound Select avec les sous-composants SelectOption et SelectLabel en utilisant le contexte React pour la gestion d'état. Inclure les interfaces TypeScript et le style de base.
Construire un hook useQuery qui gère les états de chargement, la gestion du cache et la mise en cache. Inclure des options pour les rappels onSuccess et onError, plus une fonction de refetch manuelle.
Optimiser un composant de tableau de bord qui affiche plus de 1000 lignes de données de marché. Appliquer React.memo, useMemo pour le tri, useVirtualizer pour la virtualisation de liste, et Suspense avec chargement paresseux pour les composants de graphiques lourds.
Créer un composant modal utilisant Framer Motion pour les animations qui implémente une capture appropriée du focus, la gestion de la touche Échap au clavier, et restaure le focus sur l'élément déclencheur à la fermeture. Inclure les attributs ARIA et les types TypeScript.
أفضل الممارسات
- Préférez la composition à l'héritage en décomposant les UI en petits composants.focusés qui acceptent des enfants
- Utilisez useCallback avec des tableaux de dépendances vides pour les fonctions transmises aux composants enfants mémoïsés
- Implémentez des limites d'erreur autour des sections de fonctionnalités pour éviter les plantages complets de l'application dus aux erreurs de composants
تجنب
- Évitez le prop drilling à travers plusieurs niveaux de composants - utilisez Context ou la composition de composants à la place
- N'appelez pas les hooks de manière conditionnelle ou à l'intérieur de boucles - appelez toujours les hooks au niveau supérieur des composants
- Ne stockez jamais l'état dérivé dans useState - calculez-le pendant le rendu ou utilisez useMemo pour les calculs coûteux