·motion-framer

مكتبة الرسوم المتحركة الحديثة لـ React وJavaScript. قم بإنشاء رسوم متحركة سلسة وجاهزة للإنتاج باستخدام مكونات الحركة والمتغيرات والإيماءات (التمرير/النقر/السحب)، ورسوم متحركة للتخطيط، ورسوم متحركة للخروج من AnimatePresence، وفيزياء الربيع، والتأثيرات القائمة على التمرير. يُستخدم عند إنشاء مكونات واجهة المستخدم التفاعلية، أو التفاعلات الدقيقة، أو انتقالات الصفحة، أو تسلسلات الرسوم المتحركة المعقدة.

16التثبيتات·2الرائج·@freshtechbro

التثبيت

$npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer

كيفية تثبيت motion-framer

ثبّت مهارة الذكاء الاصطناعي motion-framer بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: freshtechbro/claudedesignskills.

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

Convert any HTML/SVG element into an animatable component by prefixing with motion.:

Every motion component accepts animation props like animate, initial, transition, and gesture props like whileHover, whileTap, etc.

مكتبة الرسوم المتحركة الحديثة لـ React وJavaScript. قم بإنشاء رسوم متحركة سلسة وجاهزة للإنتاج باستخدام مكونات الحركة والمتغيرات والإيماءات (التمرير/النقر/السحب)، ورسوم متحركة للتخطيط، ورسوم متحركة للخروج من AnimatePresence، وفيزياء الربيع، والتأثيرات القائمة على التمرير. يُستخدم عند إنشاء مكونات واجهة المستخدم التفاعلية، أو التفاعلات الدقيقة، أو انتقالات الصفحة، أو تسلسلات الرسوم المتحركة المعقدة. المصدر: freshtechbro/claudedesignskills.

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-03-01
آخر تحديث
2026-03-10

Browse more skills from freshtechbro/claudedesignskills

إجابات سريعة

ما هي motion-framer؟

مكتبة الرسوم المتحركة الحديثة لـ React وJavaScript. قم بإنشاء رسوم متحركة سلسة وجاهزة للإنتاج باستخدام مكونات الحركة والمتغيرات والإيماءات (التمرير/النقر/السحب)، ورسوم متحركة للتخطيط، ورسوم متحركة للخروج من AnimatePresence، وفيزياء الربيع، والتأثيرات القائمة على التمرير. يُستخدم عند إنشاء مكونات واجهة المستخدم التفاعلية، أو التفاعلات الدقيقة، أو انتقالات الصفحة، أو تسلسلات الرسوم المتحركة المعقدة. المصدر: freshtechbro/claudedesignskills.

كيف أثبّت motion-framer؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/freshtechbro/claudedesignskills