GSAP AI Skills حزمة إرشادات رسمية من GreenSock تضع معرفة GSAP داخل مساعد البرمجة. تتضمن ثماني مهارات متخصصة، ولكل منها ملف SKILL.md. فائدتها العملية هي إعطاء الوكيل أنماطاً واضحة لكتابة الحركة ومراجعتها، بدلاً من الاعتماد على أمثلة عامة قد لا تناسب دورة حياة التطبيق.
ماذا تقدم؟
- أساسيات الحركة والتحكم في التسارع والتدرج بين العناصر، مع مراعاة الشاشات المختلفة وتفضيل تقليل الحركة.
- تنظيم الخط الزمني باستخدام المواضع والتسميات والتداخل، والتحكم في الإيقاف والعكس والانتقال إلى لحظة محددة.
- إرشادات ScrollTrigger للربط بالتمرير والتثبيت، وتحديث القياسات وتنظيف الحركة عند تغير الصفحة.
- أنماط React وNext.js باستخدام useGSAP ونطاق محدد للعناصر وتنظيف الموارد، مع إبقاء التنفيذ في المتصفح.
- مهارات إضافية للإضافات والأدوات المساعدة والأداء ودمج Vue وSvelte.
استخدامات عملية
- تطوير قسم تعريفي يتغير مع التمرير وتبقى عناصره متزامنة.
- مراجعة حركة React تتكرر أو تترك تأثيرات بعد إزالة المكوّن.
- تنظيم سلسلة حركات مترابطة دون تكديس التأخيرات اليدوية.
التوافق
يوثق المستودع التثبيت مع Claude Code وCursor وCodex وWindsurf وغيرها عبر skills CLI. وله تعليمات منفصلة لـCopilot باستخدام ملفات تعليمات داخل المشروع؛ لا تفترض تطابق آلية التحميل في كل الأدوات.
التكلفة والترخيص
ملفات المهارات بترخيص MIT. يذكر المستودع أن GSAP وإضافاتها متاحة دون رسوم، بما يشمل الاستخدام التجاري، لكن ترخيص مكتبة GSAP منفصل عن ترخيص ملفات المهارات. قد توجد تكلفة لمساعد البرمجة الذي تستخدمه.
الحدود وما يجب مراجعته
هذه معرفة موجهة للوكيل وليست محرر حركة مرئياً أو ضماناً لصحة الكود. راجع الحركة في المتصفح، خاصة التنظيف والتمرير وإمكانية الوصول. لم نختبر الحزمة عملياً ضمن هذه المراجعة.
طريقة الاستخدام
- ثبّت الحزمة بالأمر الموثق، وحدد وكيل البرمجة والمهارات المطلوبة في مسار التثبيت.
- جهّز مشروعك بمكتبة GSAP، وأضف @gsap/react عند استخدام تكامل React.
- اطلب حركة محددة: العناصر المستهدفة والتسلسل وعلاقة الحركة بالتمرير وسلوكها على الهاتف.
- راجع الكود الناتج وشاهد الحركة في المتصفح، ثم تحقق من تنظيف الموارد ودعم تقليل الحركة.
الأمر التالي موثق في المستودع لتثبيت المهارات عبر skills CLI؛ لا يثبت مكتبة GSAP داخل مشروعك تلقائياً.
npx skills add https://github.com/greensock/gsap-skills
المتطلبات
وكيل برمجة يدعم طريقة التثبيت المختارة، ومشروع JavaScript مناسب. استخدام npx يحتاج بيئة Node.js/npm. تنفيذ حركات واجهة React يكون في جهة العميل، لا أثناء SSR.