المهارات framer-motion
🎨
framer-motion
آمن ⚙️
الأوامر الخارجية🌐
الوصول إلى الشبكة📁
الوصول إلى نظام الملفات
إضافة رسوم متحركة إلى React باستخدام Framer Motion
إنشاء واجهات مستخدم جذابة مع رسوم متحركة سلسة. توفر هذه المهارة أنماط كود جاهزة للاستخدام لتأثيرات التمرير، وانتقالات الصفحات، والرسوم المتحركة عند التمرير، والتفاعلات المعقدة بالإيماءات في تطبيقات React و Next.js.
يدعم: Claude Codex Code(CC)
1
تنزيل ZIP المهارة
2
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
3
فعّل وابدأ الاستخدام
اختبرها
استخدام "framer-motion". إنشاء زر مع رسوم متحركة للتمرير والنقر
النتيجة المتوقعة:
- استخدم whileHover لتأثير التكبير (تحجيم 1.05)
- استخدم whileTap لتأثير الضغط (تحجيم 0.95)
- طبق انتقال نابض للحصول على شعور طبيعي
- ادمج مع تغييرات لون الخلفية للحصول على ردود فعل بصرية
استخدام "framer-motion". إضافة رسوم متحركة متدرجة لقائمة من العناصر
النتيجة المتوقعة:
- حدد متغير الحاوية مع تأخير staggerChildren
- حدد متغير العنصر الفردي مع خصائص الرسوم المتحركة
- طبق متغير الحاوية على مكون motion الأصلي
- طبق متغير العنصر على كل مكون motion فرعي
استخدام "framer-motion". إنشاء تأثير انتقال الصفحة
النتيجة المتوقعة:
- لف محتوى الصفحة في مكون AnimatePresence
- حدد متغيرات الدخول والخروج لرسوم الصفحة المتحركة
- استخدم mode='wait' للانتقالات المتتالية
- طبق المتغيرات على مكون غلاف motion.div
التدقيق الأمني
آمنv5 • 1/16/2026
Pure documentation skill containing markdown references, TypeScript templates, and code examples for Framer Motion animation library. Static scanner produced false positives: TypeScript template literals flagged as shell commands, animation terminology flagged as crypto keywords, and React keyboard events flagged as certificate access. All findings are dismissed. This is legitimate animation documentation with no executable code, network calls, or file system access patterns.
12
الملفات التي تم فحصها
4,929
الأسطر التي تم تحليلها
3
النتائج
5
إجمالي عمليات التدقيق
عوامل الخطر
⚙️ الأوامر الخارجية (322)
examples/list-animations.md:7-56 examples/list-animations.md:56-60 examples/list-animations.md:60-113 examples/list-animations.md:113-117 examples/list-animations.md:117-216 examples/list-animations.md:216-220 examples/list-animations.md:220-255 examples/list-animations.md:255-259 examples/list-animations.md:259-324 examples/list-animations.md:324-328 examples/list-animations.md:328-377 examples/list-animations.md:377-381 examples/list-animations.md:381-409 examples/list-animations.md:411-421 examples/list-animations.md:425-454 examples/list-animations.md:454-458 examples/list-animations.md:458-504 examples/list-animations.md:504-508 examples/list-animations.md:508-509 examples/micro-interactions.md:9-18 examples/micro-interactions.md:18-22 examples/micro-interactions.md:22-46 examples/micro-interactions.md:46-50 examples/micro-interactions.md:50-109 examples/micro-interactions.md:109-115 examples/micro-interactions.md:115-126 examples/micro-interactions.md:126-130 examples/micro-interactions.md:130-145 examples/micro-interactions.md:149-162 examples/micro-interactions.md:162-166 examples/micro-interactions.md:166-210 examples/micro-interactions.md:210-216 examples/micro-interactions.md:216-251 examples/micro-interactions.md:251-255 examples/micro-interactions.md:255-295 examples/micro-interactions.md:295-301 examples/micro-interactions.md:301-327 examples/micro-interactions.md:327-333 examples/micro-interactions.md:333-384 examples/micro-interactions.md:384-388 examples/micro-interactions.md:388-427 examples/micro-interactions.md:427-431 examples/micro-interactions.md:431-465 examples/micro-interactions.md:465-469 examples/micro-interactions.md:469-503 examples/page-transitions.md:9-65 examples/page-transitions.md:65-71 examples/page-transitions.md:71-93 examples/page-transitions.md:93-97 examples/page-transitions.md:97-119 examples/page-transitions.md:119-123 examples/page-transitions.md:123-147 examples/page-transitions.md:147-151 examples/page-transitions.md:151-193 examples/page-transitions.md:193-199 examples/page-transitions.md:199-223 examples/page-transitions.md:223-227 examples/page-transitions.md:227-242 examples/page-transitions.md:242-246 examples/page-transitions.md:246-261 examples/page-transitions.md:261-263 examples/page-transitions.md:263-267 examples/page-transitions.md:267-272 examples/page-transitions.md:272-273 examples/page-transitions.md:273-293 examples/page-transitions.md:293-297 examples/page-transitions.md:297-298 examples/page-transitions.md:298-302 examples/page-transitions.md:302-303 examples/page-transitions.md:303-318 examples/page-transitions.md:318-322 examples/page-transitions.md:322-360 examples/page-transitions.md:360-364 examples/page-transitions.md:364-401 examples/page-transitions.md:401-405 examples/page-transitions.md:405-452 examples/page-transitions.md:452-457 examples/page-transitions.md:457-459 examples/page-transitions.md:459-462 examples/scroll-animations.md:7-29 examples/scroll-animations.md:29-33 examples/scroll-animations.md:33-74 examples/scroll-animations.md:74-78 examples/scroll-animations.md:78-98 examples/scroll-animations.md:98-102 examples/scroll-animations.md:102-129 examples/scroll-animations.md:129-133 examples/scroll-animations.md:133-172 examples/scroll-animations.md:172-176 examples/scroll-animations.md:176-203 examples/scroll-animations.md:203-207 examples/scroll-animations.md:207-238 examples/scroll-animations.md:238-242 examples/scroll-animations.md:242-279 examples/scroll-animations.md:279-283 examples/scroll-animations.md:283-321 examples/scroll-animations.md:321-325 examples/scroll-animations.md:325-366 examples/scroll-animations.md:366-374 examples/scroll-animations.md:374-378 examples/scroll-animations.md:378-408 examples/scroll-animations.md:408-412 examples/scroll-animations.md:412-414 examples/scroll-animations.md:414-417 reference/gestures.md:9-17 reference/gestures.md:17-21 reference/gestures.md:21-32 reference/gestures.md:32-36 reference/gestures.md:36-47 reference/gestures.md:47-53 reference/gestures.md:53-60 reference/gestures.md:60-64 reference/gestures.md:64-79 reference/gestures.md:79-83 reference/gestures.md:83-91 reference/gestures.md:91-95 reference/gestures.md:95-104 reference/gestures.md:104-110 reference/gestures.md:110-123 reference/gestures.md:123-127 reference/gestures.md:127-146 reference/gestures.md:146-152 reference/gestures.md:152-160 reference/gestures.md:160-164 reference/gestures.md:164-188 reference/gestures.md:188-192 reference/gestures.md:192-200 reference/gestures.md:200-204 reference/gestures.md:204-212 reference/gestures.md:212-216 reference/gestures.md:216-220 reference/gestures.md:220-224 reference/gestures.md:224-240 reference/gestures.md:240-244 reference/gestures.md:244-248 reference/gestures.md:248-252 reference/gestures.md:252-256 reference/gestures.md:256-278 reference/gestures.md:278-282 reference/gestures.md:282-294 reference/gestures.md:294-298 reference/gestures.md:298-323 reference/gestures.md:323-327 reference/gestures.md:327-350 reference/gestures.md:350-356 reference/gestures.md:356-366 reference/hooks.md:9-30 reference/hooks.md:30-34 reference/hooks.md:34-51 reference/hooks.md:51-55 reference/hooks.md:55-77 reference/hooks.md:77-83 reference/hooks.md:83-101 reference/hooks.md:101-105 reference/hooks.md:105-127 reference/hooks.md:127-133 reference/hooks.md:133-157 reference/hooks.md:157-161 reference/hooks.md:161-165 reference/hooks.md:165-169 reference/hooks.md:169-175 reference/hooks.md:175-181 reference/hooks.md:181-197 reference/hooks.md:197-201 reference/hooks.md:201-210 reference/hooks.md:210-216 reference/hooks.md:216-229 reference/hooks.md:229-233 reference/hooks.md:233-248 reference/hooks.md:248-252 reference/hooks.md:252-269 reference/hooks.md:269-273 reference/hooks.md:273-285 reference/hooks.md:285-291 reference/hooks.md:291-310 reference/hooks.md:310-316 reference/hooks.md:316-334 reference/hooks.md:334-338 reference/hooks.md:338-345 reference/hooks.md:345-351 reference/hooks.md:351-368 reference/hooks.md:368-374 reference/hooks.md:374-396 reference/hooks.md:396-402 reference/hooks.md:402-413 reference/hooks.md:413-419 reference/hooks.md:419-423 reference/hooks.md:423-444 reference/motion-component.md:3 reference/motion-component.md:7-19 reference/motion-component.md:19-27 reference/motion-component.md:27-39 reference/motion-component.md:39-45 reference/motion-component.md:45-55 reference/motion-component.md:55-59 reference/motion-component.md:59-61 reference/motion-component.md:61-75 reference/motion-component.md:75-81 reference/motion-component.md:81-114 reference/motion-component.md:114-122 reference/motion-component.md:122-134 reference/motion-component.md:134-140 reference/motion-component.md:140-147 reference/motion-component.md:147-153 reference/motion-component.md:153-157 reference/motion-component.md:157-163 reference/motion-component.md:163-171 reference/motion-component.md:171-177 reference/motion-component.md:177-184 reference/motion-component.md:184-192 reference/motion-component.md:192-201 reference/motion-component.md:201-207 reference/motion-component.md:207-225 reference/motion-component.md:225-231 reference/motion-component.md:231-239 reference/motion-component.md:239-245 reference/motion-component.md:245-249 reference/motion-component.md:249-257 reference/motion-component.md:257-268 reference/motion-component.md:268-274 reference/motion-component.md:274-276 reference/motion-component.md:276-281 reference/motion-component.md:281-284 reference/motion-component.md:284-290 reference/motion-component.md:290-325 reference/motion-component.md:325-329 reference/motion-component.md:329-358 reference/motion-component.md:358-362 reference/motion-component.md:362-372 reference/motion-component.md:372-376 reference/motion-component.md:376-389 reference/motion-component.md:389-393 reference/motion-component.md:393-411 reference/variants.md:7-20 reference/variants.md:20-24 reference/variants.md:24-41 reference/variants.md:41-45 reference/variants.md:45-67 reference/variants.md:67-73 reference/variants.md:73-96 reference/variants.md:96-100 reference/variants.md:100-120 reference/variants.md:120-124 reference/variants.md:124-135 reference/variants.md:135-141 reference/variants.md:141-161 reference/variants.md:161-165 reference/variants.md:165-188 reference/variants.md:188-192 reference/variants.md:192-234 reference/variants.md:234-238 reference/variants.md:238-295 reference/variants.md:295-299 reference/variants.md:299-332 reference/variants.md:332-336 reference/variants.md:336-385 reference/variants.md:385-389 reference/variants.md:389 reference/variants.md:389 reference/variants.md:389 reference/variants.md:389 reference/variants.md:389 reference/variants.md:389-391 reference/variants.md:391 reference/variants.md:391 reference/variants.md:391-392 reference/variants.md:392 reference/variants.md:392-393 SKILL.md:14-18 SKILL.md:18-22 SKILL.md:22-33 SKILL.md:33-64 SKILL.md:64-73 SKILL.md:73-77 SKILL.md:77-85 SKILL.md:85-89 SKILL.md:89-108 SKILL.md:108-112 SKILL.md:112-127 SKILL.md:127-131 SKILL.md:131-140 SKILL.md:140-144 SKILL.md:144-152 SKILL.md:152-156 SKILL.md:156-160 SKILL.md:160-164 SKILL.md:164-176 SKILL.md:176-180 SKILL.md:180-195 SKILL.md:195-201 SKILL.md:201-230 SKILL.md:230-236 SKILL.md:236-244 SKILL.md:244-248 SKILL.md:248-261 SKILL.md:261-265 SKILL.md:265-289 SKILL.md:289-293 SKILL.md:293-302 SKILL.md:302-307 SKILL.md:307-308 SKILL.md:308-309 SKILL.md:309-312 SKILL.md:312 SKILL.md:312 SKILL.md:312 SKILL.md:312 SKILL.md:312 templates/animated-list.tsx:11-27 templates/animated-list.tsx:27-143 templates/animated-list.tsx:143-178 templates/animated-list.tsx:178-184 templates/animated-list.tsx:184-239 templates/animated-list.tsx:239-250 templates/animated-list.tsx:250-312 templates/animated-list.tsx:312-319 templates/animated-list.tsx:319-325 templates/page-transition.tsx:9-21 templates/page-transition.tsx:21-24 templates/page-transition.tsx:24-31 templates/page-transition.tsx:31-303 templates/page-transition.tsx:303-309
🌐 الوصول إلى الشبكة (1)
📁 الوصول إلى نظام الملفات (1)
تم تدقيقه بواسطة: claude عرض سجل التدقيق →
درجة الجودة
38
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
20
المجتمع
100
الأمان
91
الامتثال للمواصفات
ماذا يمكنك بناءه
مكونات واجهة مستخدم تفاعلية
إضافة تأثيرات التمرير، ورسوم متحركة للأزرار، وتفاعلات دقيقة لمكونات React
انتقالات الصفحات
إنشاء انتقالات سلسة بين المسارات في تطبيقات Next.js App Router
تجارب التمرير
بناء رسوم متحركة مرتبطة بالتمرير، وتأثيرات المنظور، وتفاعلات الظهور عند التمرير
جرّب هذه الموجهات
رسوم متحركة أساسية للظهور التدريجي
Create a fade-in animation for a React component using Framer Motion
قائمة متدرجة
Build a list that animates items one by one with stagger effect using Framer Motion variants
الظهور عند التمرير
Add scroll-triggered reveal animations to elements as they enter viewport
انتقالات الصفحات
Implement smooth page transitions between routes in a Next.js App Router application
أفضل الممارسات
- استخدم المتغيرات للرسوم المتحركة المنسقة المعقدة للحفاظ على تنظيم الكود
- احترم تفضيلات المستخدم من خلال فحص useReducedMotion قبل التحريك
- حافظ على انتقالات الصفحات أقل من 500 مللي ثانية لتجربة مستخدم أفضل
- فضل الخصائص المسرعة بـ GPU مثل opacity و transform بدلاً من تغييرات التخطيط
تجنب
- تجنب تحريك الخصائص المكلفة مثل width أو height أو top/left بشكل متكرر
- لا تتخطى رسوم الخروج المتحركة عند إزالة العناصر من DOM
- تجنب الاستخدام المفرط لخاصية layout لأنه قد يؤثر على الأداء في القوائم الكبيرة
- لا تستخدم مدد زمنية ثابتة لجميع الرسوم المتحركة؛ فضل النوابض للتفاعلات
الأسئلة المتكررة
ما هي أطر عمل React المدعومة؟
يعمل Framer Motion مع أي إطار عمل React بما في ذلك Next.js و Create React App و Vite و Remix.
ما هو تأثير الرسوم المتحركة على الأداء؟
يستخدم Framer Motion تحويلات مسرعة بـ GPU. تجنب تحريك خصائص التخطيط في القوائم الكبيرة.
كيف أقوم بالدمج مع Next.js App Router؟
استخدم template.tsx مع AnimatePresence لانتقالات المسار. لف محتوى الصفحة في مكونات motion.
هل تصل هذه المهارة إلى أي خدمات خارجية؟
لا. هذه المهارة هي توثيق خالص. تنشئ الكود محلياً بدون استدعاءات شبكة أو جمع بيانات.
لماذا لا تعمل رسوم الخروج المتحركة الخاصة بي؟
تتطلب رسوم الخروج المتحركة غلاف AnimatePresence حول العناصر التي ستتم إزالتها من DOM.
كيف يختلف هذا عن رسوم CSS المتحركة؟
يوفر Framer Motion التحكم الحتمي، والتعرف على الإيماءات، والربط بالتمرير، والنوابض القائمة على الفيزياء.