senior-frontend
بناء تطبيقات واجهة أمامية حديثة باستخدام React
Également disponible depuis: alirezarezvani
بناء تطبيقات واجهة أمامية معقدة يتطلب خبرة عميقة في أنماط React، وتحسين الأداء، وإدارة الحالة. توفر هذه المهارة إرشادات على مستوى متقدم لبنية المكونات، وتحسين الحزم، وتنفيذ أنظمة واجهة مستخدم جاهزة للإنتاج باستخدام أفضل الممارسات في الصناعة.
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 "senior-frontend". أنشئ مكون Button مع حالة تحميل
Résultat attendu:
- هيكل المكون مع واجهة TypeScript الصحيحة
- معالجة حالة التحميل مع تكامل spinner
- سمات إمكانية الوصول (aria-disabled، التنقل بلوحة المفاتيح)
- فئات Tailwind CSS للمتغيرات (primary، secondary، outline)
- توصية بيان التصدير وتحديث ملف barrel
Utilisation de "senior-frontend". كيف أقلل حجم حزمة Next.js الخاصة بي؟
Résultat attendu:
- تحديد التبعيات الكبيرة باستخدام bundle analyzer
- تنفيذ الاستيرادات الديناميكية لتقسيم الكود على أساس المسار
- تكوين next/image لتحسين الصور التلقائي
- استخدام React.lazy() للتحميل الكسول على مستوى المكون
- تمكين tree shaking باستخدام وحدات ES
Utilisation de "senior-frontend". ما هي الأنماط المضادة الشائعة في React التي يجب تجنبها؟
Résultat attendu:
- Prop drilling عبر طبقات عديدة - استخدم context بدلاً من ذلك
- منطق الأعمال في المكونات - استخرجه إلى custom hooks
- المكونات الكبيرة الأحادية - قسمها حسب الميزة
- عدم وجود error boundaries - غلف المكونات بـ ErrorBoundary
- تعديل الحالة المباشر - استخدم دائماً setState أو مديري الحالة
Audit de sécurité
Risque faibleThis skill consists of 3 Python CLI scripts for frontend development tasks and 3 reference guides. All static findings are FALSE POSITIVES caused by pattern-matching errors. The scanner misidentified markdown code block delimiters as Ruby backtick execution, section numbers as weak crypto algorithms, and standard dev workflow documentation as credential access. No actual code execution, network access, or credential handling exists in this skill.
Facteurs de risque
⚡ Contient des scripts (3)
📁 Accès au système de fichiers (3)
Score de qualité
Ce que vous pouvez construire
بنية المكونات
تصميم وبناء مكونات React مع أنواع TypeScript الصحيحة و hooks وهيكل المجلدات.
تحسين الحزم
تحليل حجم الحزمة وتحديد فرص تقليل حمولة JavaScript لأداء أفضل.
دليل مراجعة الكود
تطبيق أنماط واجهة أمامية متسقة وتحديد الأنماط المضادة أثناء مراجعات الكود.
Essayez ces prompts
أنشئ مكون React لـ [component name] باستخدام TypeScript. قم بتضمين واجهة props الصحيحة، ومعالجة الأخطاء، واتبع أنماط hooks الحديثة. استخدم Tailwind CSS للتنسيق.
حلل حجم حزمة تطبيق React الخاص بي وحدد التبعيات الكبيرة. اقترح استراتيجيات تقسيم الكود وأساليب التحميل الكسول لتقليل وقت التحميل الأولي.
ساعدني في تنفيذ [specific pattern] لإدارة الحالة العامة في React. قارن بين React Context و Zustand و Jotai لهذه الحالة واشرح المقايضات.
قم بإعداد Next.js مع App Router لمشروعي. قم بتضمين تكوين SSR الصحيح، وتحسين الصور، واشرح متى يتم استخدام مكونات الخادم مقابل مكونات العميل.
Bonnes pratiques
- استخدم TypeScript لجميع المكونات لاكتشاف الأخطاء في وقت الترجمة
- نفذ error boundaries الصحيحة لمنع تعطل التطبيق
- قم بالتحميل الكسول للمسارات والمكونات الثقيلة لتقليل حجم الحزمة الأولي
Éviter
- تجنب prop drilling عبر طبقات عديدة؛ استخدم context أو إدارة الحالة
- لا تضع منطق الأعمال مباشرة في المكونات؛ استخرجه إلى custom hooks
- تجنب المكونات الكبيرة الأحادية؛ قسمها حسب الميزة والمسؤولية