Habilidades vercel-react-best-practices
📦

vercel-react-best-practices

Seguro

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

También disponible en: sickn33,vercel-labs,am-will

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

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

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

Resultado esperado:

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

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

Resultado esperado:

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

Auditoría de seguridad

Seguro
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
Archivos escaneados
5,215
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
38
Comunidad
100
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

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

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

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

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

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

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

Prueba estos prompts

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

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

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

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

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

Mejores prácticas

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

Evitar

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

Preguntas frecuentes

ما إصدارات 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.
هل هناك أي مقايضات لاتباع هذه الأنماط؟
بعض الأنماط تضيف تعقيدًا في الكود (مثل التوازي اليدوي والاستيرادات المباشرة). عادةً ما تفوق فوائد الأداء تكاليف التعقيد، لكن طبق الحكم بناءً على احتياجات فريقك وحجم التطبيق.

Detalles del desarrollador

Licencia

MIT

Repositorio

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

Ref.

main

Estructura de archivos

📁 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