المهارات vercel-react-best-practices
📦

vercel-react-best-practices

آمن

تحسين أداء React وNext.js باستخدام إرشادات Vercel

متاح أيضًا من: vercel-labs

يتطلب بناء تطبيقات React ذات الأداء العالي فهم أنماط التحسين المعقدة. توفر هذه المهارة 45 قاعدة ذات أولوية من Vercel Engineering لتوجيه الذكاء الاصطناعي في كتابة ومراجعة وإعادة هيكلة كود React وNext.js للأداء الأمثل.

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

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "vercel-react-best-practices". راجع هذا المكون الذي يجلب بيانات المستخدم والمنشورات بشكل متتابع

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

  • المشكلة: تم اكتشاف نمط الشلال - انتظار جلب المنشورات حتى اكتمال جلب المستخدم
  • الحل: استخدم Promise.all() لجلب كلا المصدرين بشكل متوازٍ
  • التحسين المتوقع: تقليل وقت التحميل بمقدار 50-100ms (يلغي جولة شبكة واحدة)

استخدام "vercel-react-best-practices". حسن استيرادات الأيقونات هذه من lucide-react

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

  • حاليًا: استيراد مكتبة lucide-react بالكامل (1,583 وحدة نمطية، ~2.8s لإقلاع التطوير)
  • موصى به: استخدم الاستيرادات المباشرة من dist/esm/icons/ لكل أيقونة
  • التحسين المتوقع: إقلاع التطوير أسرع بنسبة 15-70%، وبدايات باردة أسرع بنسبة 40%

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

آمن
v1 • 2/24/2026

This skill is documentation-only containing React and Next.js performance optimization guidelines. All 999 static analyzer findings are false positives from code examples in markdown documentation files. The skill does not execute code, make network requests, or access sensitive data. It provides educational content and code patterns for AI to reference when writing or reviewing React/Next.js code.

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

درجة الجودة

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

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

مراجعة وإعادة هيكلة الكود

مراجعة مكونات React الموجودة بحثًا عن أنماط الأداء السلبية واقتراح تحسينات بناءً على إرشادات Vercel

تطوير مكونات جديدة

إنشاء مكونات React وNext.js جديدة باتباع أفضل ممارسات الأداء من البداية

مراجعة الأداء

تحليل قاعدة كود التطبيق للعثور على أنماط الشلالات وتضخم الحزمة وأوجه القصور في إعادة العرض

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

مراجعة المكون الأساسية 
راجع مكون React هذا بحثًا عن مشكلات الأداء باستخدام أفضل ممارسات Vercel. حدد أي شلالات أو إعادة عرض غير ضرورية أو فرص تحسين الحزمة:

[الصق كود المكون]
تحسين جلب البيانات 
لدي استدعاءات API هذه التي تعمل بشكل متتابع. أعد هيكلة الشفرة باستخدام أنماط القضاء على الشلالات من Vercel لتشغيلها بشكل متوازٍ حيثما أمكن:

[الصق كود جلب البيانات]
تحليل حجم الحزمة 
حلل هذه الاستيرادات للعثور على فرص تحسين الحزمة. اقترح استيرادات مباشرة أو استيرادات ديناميكية أو استراتيجيات التحميل المسبق بناءً على إرشادات Vercel:

[الصق عبارات الاستيراد واستخدام المكون]
إعادة هيكلة المكون الكاملة 
أعد هيكلة مكون صفحة Next.js هذا باتباع جميع أفضل ممارسات React القابلة للتطبيق من Vercel. عالج الشلالات والتخزين المؤقت وإعادة العرض وتحسين الحزمة. اشرح كل تغيير تم إجراؤه:

[الصق مكون الصفحة الكامل]

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

  • ابدأ دائمًا بالقضاء على الشلالات - فهو يوفر أعلى مكاسب في الأداء
  • استخدم Promise.all() للعمليات غير المتزامنة المستقلة وأجّل await حتى تكون النتائج مطلوبة
  • استورد مباشرة من المسارات الفرعية للحزمة بدلاً من ملفات البرميل لتقليل حجم الحزمة

تجنب

  • عبارات await المتتابعة للعمليات المستقلة تسبب زمن انتقال غير ضروري
  • استيراد مكتبات المكونات بالكامل عند الحاجة إلى عدد قليل من التصديرات فقط
  • استخدام array sort() للعثور على قيم الحد الأدنى/الأقصى بدلاً من تكرار حلقة واحدة

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

ما إصدارات React وNext.js التي تم تحسين هذه الإرشادات لها؟
تستهدف هذه الإرشادات React 18+ مع الميزات المتزامنة وNext.js 13+ App Router مع مكونات الخادم. قد تنطبق بعض الأنماط على الإصدارات الأقدم ولكن الفوائد الكاملة تتطلب ميزات React الحديثة.
كيف أقوم بإعطاء الأولوية للقواعد التي يجب تطبيقها أولاً؟
ابدأ بقواعد الفئة CRITICAL (القضاء على الشلالات وتحسين الحزمة) لأنها توفر أكبر مكاسب في الأداء. ثم عالج فئات HIGH وMEDIUM بناءً على الاختناقات المحددة لتطبيقك.
هل تنطبق هذه الإرشادات على تطبيقات React من جانب العميل فقط؟
تنطبق معظم الإرشادات على أي تطبيق React. تنطبق القواعد الخاصة بالخادم فقط (server-cache-react وserver-serialization) على Next.js App Router مع مكونات الخادم.
ما هو تأثير الأداء المتوقع من اتباع هذه الإرشادات؟
يختلف التأثير حسب التطبيق. يمكن أن يقلل القضاء على الشلالات من تحميل الصفحة بمقدار 200-500ms. يمكن أن يحسن تحسين الحزمة من التحميل الأولي بنسبة 15-40%. عادةً ما تحسن تحسينات إعادة العرض استجابة التفاعل بنسبة 10-30%.
هل يمكنني استخدام هذه المهارة مع Claude Code لإعادة الهيكلة التلقائية؟
نعم. هذه المهارة مصممة لمساعدي الذكاء الاصطناعي. قدم سياق المهارة واطلب من Claude Code مراجعة أو إعادة هيكلة الكود باستخدام إرشادات أفضل ممارسات Vercel.
هل هناك أي مقايضات لاتباع هذه الأنماط؟
بعض الأنماط تضيف تعقيدًا في الكود (مثل التوازي اليدوي والاستيرادات المباشرة). عادةً ما تفوق فوائد الأداء تكاليف التعقيد، لكن طبق الحكم بناءً على احتياجات فريقك وحجم التطبيق.

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

المؤلف

ZhanlinCui

الترخيص

MIT

المستودع

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/vercel-react-best-practices

مرجع

main

بنية الملفات

📁 rules/

📄 _sections.md

📄 _template.md

📄 advanced-event-handler-refs.md

📄 advanced-use-latest.md

📄 async-api-routes.md

📄 async-defer-await.md

📄 async-dependencies.md

📄 async-parallel.md

📄 async-suspense-boundaries.md

📄 bundle-barrel-imports.md

📄 bundle-conditional.md

📄 bundle-defer-third-party.md

📄 bundle-dynamic-imports.md

📄 bundle-preload.md

📄 client-event-listeners.md

📄 client-localstorage-schema.md

📄 client-passive-event-listeners.md

📄 client-swr-dedup.md

📄 js-batch-dom-css.md

📄 js-cache-function-results.md

📄 js-cache-property-access.md

📄 js-cache-storage.md

📄 js-combine-iterations.md

📄 js-early-exit.md

📄 js-hoist-regexp.md

📄 js-index-maps.md

📄 js-length-check-first.md

📄 js-min-max-loop.md

📄 js-set-map-lookups.md

📄 js-tosorted-immutable.md

📄 rendering-activity.md

📄 rendering-animate-svg-wrapper.md

📄 rendering-conditional-render.md

📄 rendering-content-visibility.md

📄 rendering-hoist-jsx.md

📄 rendering-hydration-no-flicker.md

📄 rendering-svg-precision.md

📄 rerender-defer-reads.md

📄 rerender-dependencies.md

📄 rerender-derived-state.md

📄 rerender-functional-setstate.md

📄 rerender-lazy-state-init.md

📄 rerender-memo.md

📄 rerender-transitions.md

📄 server-after-nonblocking.md

📄 server-cache-lru.md

📄 server-cache-react.md

📄 server-parallel-fetching.md

📄 server-serialization.md

📄 AGENTS.md

📄 README.md

📄 SKILL.md

📄 metadata.json