/ الدليل / الملعب / Motion.dev Animations Skill
← كل الخوادم ↗ GitHub
● مجتمع 199-biotechnologies ⚡ فوري

Motion.dev Animations Skill

بواسطة 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

قم بوصف الحركة التي تريدها؛ احصل على كود Motion.dev الذي يعمل بمعدل 60 إطارًا في الثانية+ مع فيزياء الربيع ودعم الحركة المنخفضة وعدم تغيير التخطيط.

Motion-dev-animations-skill هي إحدى مهارات Claude Code التي تكتب رسومًا متحركة على مستوى الإنتاج باستخدام Motion.dev (المعروف سابقًا باسم Framer Motion). يتم تنشيطه تلقائيًا عند الإشارة إلى الرسوم المتحركة، وتأثيرات التمرير، وMotion.dev، وفيزياء الربيع، وما إلى ذلك، ويصدر تعليمات برمجية تستهدف 60 إطارًا في الثانية +، وتأثير الحزمة <50 كيلو بايت، وإمكانية الوصول الكاملة (يفضل الحركة المنخفضة)، وصفر CLS. يغطي رسوم الدخول المتحركة وتأثيرات التمرير وتفاعلات الإيماءات والتفاعلات الدقيقة والرسوم المتحركة التخطيطية.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

motion-dev-animations-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: Motion.dev Animations Skill

قم بإضافة مدخل البطل المتدرج مع الترنح

👤 يقوم مطورو الواجهة الأمامية بضبط الصفحات المقصودة ⏱ ~15 min beginner

متى تستخدمه: يبدو بطلك ثابتًا وتريد رسمًا متحركًا مصقولًا.

المتطلبات الأساسية
  • رد الفعل + Motion.dev — npm أنا الحركة
  • تم تثبيت المهارة — استنساخ بوابة في ~/.claude/skills/
الخطوات
  1. وصف التأثير
    أضف مدخلًا متدرجًا متدرجًا إلى H1 للبطل، والعنوان الفرعي، وCTA. 60 مللي ثانية متداخلة.✓ تم النسخ
    → كود Motion.dev معmotion.div، زنبرك انتقالي، تأخير عبر stagger
  2. انخفاض الحركة الاحتياطية
    تأكد من أن حركة التفضيلات المخفضة تتخطى الرسوم المتحركة بشكل واضح.✓ تم النسخ
    → تم تطبيق ربط useReducedMotion أو استعلام وسائط CSS

النتيجة: البطل الذي يشعر بأنه حي دون التضحية بإمكانية الوصول إليه.

المزالق
  • تحريك الخصائص التي تؤدي إلى التخطيط (العرض، والأعلى) — استخدم التحويل (الترجمة/القياس) بدلاً من ذلك - تسريع GPU، بدون CLS
اجمعها مع: magic-ui-mcp

قم ببناء الكشوفات والمنظر الناتج عن التمرير

👤 مطورو الواجهة الأمامية للتصميم ⏱ ~25 min intermediate

متى تستخدمه: تحتاج صفحتك المقصودة الطويلة إلى أقسام تتكشف عند التمرير.

الخطوات
  1. تكشف على التمرير
    قم بتحريك كل قسم عند دخوله إلى إطار العرض (مرة واحدة، عتبة 30٪).✓ تم النسخ
    → استخدمInView مرة واحدة + المبلغ
  2. المقدمة المنظر
    أضف إزاحة اختلاف المنظر الدقيقة لصورة SVG الأمامية المزخرفة.✓ تم النسخ
    → useScroll + useTransform رسم الخرائط التمريرYالتقدم إلى y

النتيجة: تجربة التمرير التي تضيف عمقًا دون تشتيت الانتباه.

المزالق
  • المنظر الذي يسبب دوار الحركة — أبقِ الإزاحات صغيرة وتخطيها بالكامل ضمن الحركة المفضلة المُخفضة

قم ببناء بطاقة مغناطيسية قابلة للسحب مع رفع التحويم

👤 مصممو التفاعل / مطورو الواجهة الأمامية ⏱ ~20 min intermediate

متى تستخدمه: تحتاج بطاقة المنتج إلى تلميع تفاعلي دقيق.

الخطوات
  1. رفع تحوم
    عند التمرير: ارفع 4 بكسل، مقياس الظل الدقيق؛ الربيع مرة أخرى في إجازة.✓ تم النسخ
    → بينما تحوم مع الربيع. GPU-friendly transforms
  2. السحب المغناطيسي
    اجعلها قابلة للسحب بحدود مرنة، اسحب Elastic 0.15.✓ تم النسخ
    → السحب + السحب + القيود + السحب المرن تم ضبطه بشكل صحيح

النتيجة: تفاعل ممتع مع البطاقة بدون تكلفة الأداء.

تحريك إعادة ترتيب القائمة مع التخطيط

👤 يقوم مطورو الواجهة الأمامية ببناء لوحات المهام/المعارض ⏱ ~25 min intermediate

متى تستخدمه: تبدو عمليات إعادة ترتيب القائمة الخاصة بك مزعجة؛ تريد انتقالات سلسة.

الخطوات
  1. تمكين التخطيط على العناصر
    إضافة رسوم متحركة للتخطيط إلى عناصر القائمة؛ تحريك الدخول/الخروج أيضًا.✓ تم النسخ
    → <motion.li تخطيط> + AnimatePresence
  2. انخفاض الحركة
    قم بتعطيل الرسوم المتحركة للتخطيط ضمن الحركة المُخفضة المفضلة.✓ تم النسخ
    → تم تطبيق الشرط؛ إعادة الطلب الفوري للمستخدمين الذين طلبوا ذلك

النتيجة: عمليات إعادة الطلب التي تبدو مادية ولكنها تحترم تفضيلات المستخدم.

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

motion-dev-animations-skill + magic-ui-mcp

واجهة المستخدم السحرية للمكونات المعدة مسبقًا، وmotion.dev للبتات المخصصة

استخدم شاشة التحديد الخاصة بـ Magic UI للشعارات؛ motion.dev للحصول على المنظر المخصص للتمرير أدناه.✓ تم النسخ
motion-dev-animations-skill + claude-design-auditor-skill

حركة التدقيق لدعم الحركة المنخفضة

بعد إضافة الرسوم المتحركة، قم بالتدقيق باستخدام النطاق=الحركة لاكتشاف تراجعات الحركة المنخفضة.✓ تم النسخ
motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + الرسوم المتحركة في تدفق واحد

تحويل إطار Figma؛ ثم أضف الرسوم المتحركة المحددة للدخول والتحويم.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
motion-dev (SKILL) describe the animation (element + intent + constraints) في أي وقت تريد رمز الرسوم المتحركة، وخاصة. مع إمكانية الوصول وقيود الأداء 0

التكلفة والحدود

تكلفة التشغيل

حصة API
لا أحد
الرموز لكل استدعاء
صغير للكود؛ كبيرة فقط إذا قمت بتفريغ المكونات المعقدة
التكلفة المالية
حر
نصيحة
قم بوصف هدف الرسوم المتحركة بدقة - "التلاشي مع 60 مللي ثانية متدرجة، ومدة 200 مللي ثانية" إيقاعات "اجعلها لطيفة".

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا أحد
نقل البيانات الخارجي: لا شيء من المهارة؛ الشبكة غير متورطة

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

غير المرغوب فيه على التمرير

تأكد من أنك تقوم بتحريك التحويلات، وليس دعائم التخطيط (العرض/الأعلى). استخدم will-change باعتدال.

تحقق: Chrome DevTools → Performance → layout shift count
تم تجاهل الرسوم المتحركة عند الحركة المنخفضة

قم بالالتفاف باستخدام useReducedMotion وقم بقصر دائرة متغيرات الرسوم المتحركة.

تحقق: System → Motion preferences → reduce motion; reload
حزمة كبيرة بعد إضافة الحركة

قم باستيراد ما تحتاجه فقط من "الحركة/التفاعل"؛ تجنب إعادة تصدير كل شيء.

تحقق: Bundle analyzer on the chunks

البدائل

Motion.dev Animations Skill مقابل البدائل

البديلمتى تستخدمهاالمقايضة
magic-ui-mcpأنت تريد مكونات متحركة معدة مسبقًا، وليس حركة مخصصةأقل تخصيصًا، وأسرع في الاعتماد
cc-frontend-skillأنت تريد إرشادات عامة للواجهة الأمامية، وليس Motion.dev على وجه التحديدلا تركز على الرسوم المتحركة
excalidraw-skillتريد الرسوم البيانية، وليس الرسوم المتحركة على شبكة الإنترنتمشكلة مختلفة

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills