أنماط الرسوم المتحركة وأفضل الممارسات لتطبيقات Next.js/React. استخدم هذه المهارة عند تنفيذ الرسوم المتحركة أو الانتقالات أو تأثيرات التمرير أو انتقالات الصفحة أو الوسائط أو أي حركة في مكونات React. استنادًا إلى دورة "الرسوم المتحركة على الويب" التي يقدمها إميل كوالسكي.
ثبّت مهارة الذكاء الاصطناعي animate بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: delphi-ai/animate-skill.
This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.
| Element entering | ease-out | 200-300ms | | Element moving on screen | ease-in-out | 200-300ms | | Element exiting | ease-in | 150-200ms | | Hover effects | ease | 150ms | | Opacity only | linear | varies |
Complete working examples from the course are in the examples/ directory:
أنماط الرسوم المتحركة وأفضل الممارسات لتطبيقات Next.js/React. استخدم هذه المهارة عند تنفيذ الرسوم المتحركة أو الانتقالات أو تأثيرات التمرير أو انتقالات الصفحة أو الوسائط أو أي حركة في مكونات React. استنادًا إلى دورة "الرسوم المتحركة على الويب" التي يقدمها إميل كوالسكي. المصدر: delphi-ai/animate-skill.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/delphi-ai/animate-skill --skill animateأنماط الرسوم المتحركة وأفضل الممارسات لتطبيقات Next.js/React. استخدم هذه المهارة عند تنفيذ الرسوم المتحركة أو الانتقالات أو تأثيرات التمرير أو انتقالات الصفحة أو الوسائط أو أي حركة في مكونات React. استنادًا إلى دورة "الرسوم المتحركة على الويب" التي يقدمها إميل كوالسكي. المصدر: delphi-ai/animate-skill.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/delphi-ai/animate-skill --skill animate بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/delphi-ai/animate-skill