Compétences cc-skill-frontend-patterns
📦

cc-skill-frontend-patterns

Sûr

تطبيق أنماط React الحديثة

بناء تطبيقات React قابلة للصيانة باستخدام أنماط مجربة لتركيب المكونات وإدارة الحالة وتحسين الأداء.

Prend en charge: Claude Codex Code(CC)
🥉 72 Bronze
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 "cc-skill-frontend-patterns". إنشاء مكون Tabs مركب مع TabList و Tab و TabPanel

Résultat attendu:

تنفيذ كامل مع حالة مشتركة عبر React Context وتعريفات الأنواع المناسبة ومثال الاستخدام

Utilisation de "cc-skill-frontend-patterns". كتابة useDebounce hook لإدخال البحث

Résultat attendu:

hook مخصص يؤخر تحديثات القيمة لمدة تأخير محددة، مع أنواع TypeScript

Utilisation de "cc-skill-frontend-patterns". إضافة حدود خطأ لالتقاط أخطاء المكونات

Résultat attendu:

مكون ErrorBoundary قائم على الفئات مع getDerivedStateFromError و componentDidCatch

Audit de sécurité

Sûr
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
Fichiers analysés
639
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
90
Maintenabilité
85
Contenu
50
Communauté
100
Sécurité
87
Conformité aux spécifications

Ce que vous pouvez construire

بناء مكتبات مكونات قابلة لإعادة الاستخدام

إنشاء واجهات برمجة تطبيقات مرنة وقابلة لإعادة الاستخدام للمكونات باستخدام المكونات المركبة وأنماط التركيب.

إدارة حالة التطبيق المعقدة

تنفيذ إدارة حالة قابلة للتوسع مع React Context و useReducer.

تحسين أداء تطبيق React

تطبيق التخزين المؤقت والتحميل الكسول والافتراضية لواجهات مستخدم سريعة.

Essayez ces prompts

إنشاء مكونات مركبة 
إنشاء نمط مكون مركب لـ [component name] في React. يتضمن [sub-component-1] و [sub-component-2] و [sub-component-3] التي تشارك الحالة عبر Context.
تنفيذ Hook مخصص 
اكتب React hook مخصصًا يسمى use[Feature] يتعامل مع [سلوك محدد مثل جلب البيانات أو التحقق من صحة النموذج أو التخزين المحلي].
تحسين الأداء 
راجع مكون React هذا وطبق تحسينات الأداء بما في ذلك useMemo و useCallback و React.memo حيثما كان ذلك مناسبًا.
إضافة التحقق من صحة النموذج 
أنشئ مكون نموذج محكوم مع التحقق من الصحة للحقول: [list fields]. يتضمن رسائل الخطأ والتعامل مع الإرسال.

Bonnes pratiques

  • تفضيل التركيب على الوراثة لإعادة استخدام المكونات
  • الحفاظ على تركيز hooks المخصصة على مسؤوليات فردية
  • تخزين العمليات الحسابية والدوال باهظة الثمن مؤقتًا
  • استخدام TypeScript لعقود مكونات أفضل

Éviter

  • تجنب تحديث الحالة أثناء العرض مما يسبب حلقات لا نهائية
  • لا تقم بتعديل الكائنات مباشرة؛ استخدم التحديثات غير القابلة للتغيير
  • تجنب تمرير مراجع كائنات جديدة كـ props بدون تخزين مؤقت
  • لا تنسَ تضمين جميع التبعيات في مصفوفات تبعية useEffect

Foire aux questions

ما الفرق بين useMemo و useCallback؟
useMemo يخزن قيمة محسوبة مؤقتًا، بينما useCallback يخزن دالة مؤقتًا. استخدم useMemo للحسابات باهظة الثمن و useCallback عند تمرير دوال استدعاء إلى مكونات فرعية محسنة.
متى يجب استخدام useReducer بدلاً من useState؟
استخدم useReducer عندما يكون لديك منطق حالة معقد مع قيم فرعية متعددة، أو عندما تعتمد الحالة التالية على الحالة السابقة. يوفر انتقالات حالة أكثر قابلية للتنبؤ.
كيف تعمل المكونات المركبة؟
المكونات المركبة تستخدم React Context لمشاركة الحالة الضمنية بين المكونات ذات الصلة. يدير المكون الأصلي الحالة ويوفرها عبر Context، مما يسمح للأبناء بالوصول إليها وتعديلها.
ما هو تقسيم الكود ولماذا هو مهم؟
تقسيم الكود يقسم الحزمة إلى أجزاء أصغر يتم تحميلها حسب الطلب. يحسن وقت التحميل الأولي عن طريق تحميل الكود المطلوب فقط للعرض الحالي.
كيف أمنع إعادة العرض غير الضرورية؟
استخدم React.memo للمكونات النقية، و useMemo للحسابات باهظة الثمن، و useCallback لدوال props، وتأكد من أن تحديثات الحالة هي مراجع مستقرة.
هل يمكن أن تساعد هذه المهارة في تطوير Next.js؟
نعم، تنطبق الأنماط على Next.js بما في ذلك مكونات الخادم ومكونات العميل و App Router. أنماط إدارة الحالة والأداء تعمل في كل من React و Next.js.

Détails du développeur

Auteur

affaan-m

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📄 SKILL.md