المهارات cc-skill-frontend-patterns
📦

cc-skill-frontend-patterns

آمن

Appliquer les modèles React modernes

Construisez des applications React maintenables en utilisant des modèles éprouvés pour la composition de composants, la gestion d'état et l'optimisation des performances.

يدعم: Claude Codex Code(CC)
🥉 72 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "cc-skill-frontend-patterns". Créer un composant Tabs composé avec TabList, Tab, et TabPanel

النتيجة المتوقعة:

Une implémentation complète avec état partagé via React Context, définitions de types appropriées, et exemple d'utilisation

استخدام "cc-skill-frontend-patterns". Écrire un hook useDebounce pour la recherche

النتيجة المتوقعة:

Un hook personnalisé qui retarde les mises à jour de valeur d'un délai spécifié, avec types TypeScript

استخدام "cc-skill-frontend-patterns". Ajouter une boundary d'erreur pour capturer les erreurs de composant

النتيجة المتوقعة:

Un composant ErrorBoundary basé sur une classe avec getDerivedStateFromError et componentDidCatch

التدقيق الأمني

آمن
v1 • 2/25/2026

This is a legitimate frontend development documentation skill. All 54 static findings are false positives triggered by code examples in markdown documentation. The skill teaches standard React patterns including composition, hooks, state management, and performance optimization. No actual security risks present.

1
الملفات التي تم فحصها
639
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
90
قابلية الصيانة
85
المحتوى
50
المجتمع
100
الأمان
87
الامتثال للمواصفات

ماذا يمكنك بناءه

Construire des bibliothèques de composants réutilisables

Créez des APIs de composants flexibles et réutilisables en utilisant des composants composés et des modèles de composition.

Gérer un état d'application complexe

Implémentez une gestion d'état scalable avec React Context et useReducer.

Optimiser les performances d'une application React

Appliquez la mémorisation, le chargement différé et la virtualisation pour des interfaces utilisateur rapides.

جرّب هذه الموجهات

Créer des composants composés 
Créez un modèle de composant composé pour un [nom de composant] dans React. Incluez [sous-composant-1], [sous-composant-2], et [sous-composant-3] qui partagent l'état via le contexte.
Implémenter un hook personnalisé 
Écrivez un hook React personnalisé appelé use[Fonctionnalité] qui gère [comportement spécifique comme la récupération de données, la validation de formulaire, ou le stockage local].
Optimiser les performances 
Examinez ce composant React et appliquez des optimisations de performances incluant useMemo, useCallback, et React.memo là où c'est approprié.
Ajouter la validation de formulaire 
Créez un composant de formulaire contrôlé avec validation pour les champs : [liste des champs]. Incluez les messages d'erreur et la gestion de la soumission.

أفضل الممارسات

  • Privilégiez la composition à l'héritage pour la réutilisation des composants
  • Gardez les hooks personnalisés centrés sur des responsabilités uniques
  • Mémorisez les calculs coûteux et les fonctions de rappel
  • Utilisez TypeScript pour de meilleurs contrats de composants

تجنب

  • Évitez de mettre à jour l'état pendant le rendu, ce qui provoque des boucles infinies
  • Ne mutez pas directement les objets ; utilisez des mises à jour immuables
  • Évitez de passer de nouvelles références d'objet comme props sans mémorisation
  • N'oubliez pas d'inclure toutes les dépendances dans les tableaux de dépendances useEffect

الأسئلة المتكررة

Quelle est la différence entre useMemo et useCallback ?
useMemo mémorise une valeur calculée, tandis que useCallback mémorise une fonction. Utilisez useMemo pour les calculs coûteux et useCallback lorsque vous passez des callbacks à des composants enfants optimisés.
Quand dois-je utiliser useReducer au lieu de useState ?
Utilisez useReducer lorsque vous avez une logique d'état complexe avec plusieurs sous-valeurs, ou lorsque le prochain état dépend du précédent. Il fournit des transitions d'état plus prévisibles.
Comment fonctionnent les composants composés ?
Les composants composés utilisent React Context pour partager l'état implicite entre des composants liés. Le parent gère l'état et le fournit via Context, permettant aux enfants d'y accéder et de le modifier.
Qu'est-ce que le code splitting et pourquoi est-ce important ?
Le code splitting divise votre bundle en morceaux plus petits qui se chargent à la demande. Cela améliore le temps de chargement initial en ne chargeant que le code nécessaire pour la vue actuelle.
Comment éviter les re-renders inutiles ?
Utilisez React.memo pour les composants purs, useMemo pour les calculs coûteux, useCallback pour les props de fonction, et assurez-vous que les mises à jour d'état sont des références stables.
Cette compétence peut-elle aider au développement Next.js ?
Oui, les modèles s'appliquent à Next.js, y compris les composants serveur, les composants client et l'App Router. Les modèles de gestion d'état et de performance fonctionnent à la fois dans React et Next.js.

تفاصيل المطور

المؤلف

affaan-m

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/cc-skill-frontend-patterns

مرجع

main

بنية الملفات

📄 SKILL.md