ui-enhance-animate

This skill performs a full design upgrade of an existing website or component. It is NOT just about adding animations — it is a holistic visual refinement pass that touches typography, spacing, layout, depth, micro-interactions, and motion. The existing color palette is preserved; everything else can and should be improved.

Before writing a single line of code, do a thorough read of the existing code. Extract and note:

Apply ALL of the following improvements that are relevant to the site. Be thorough — don't skip sections because they "look okay". Every part of the site should be elevated.

يقوم بترقية وصقل تصميم واجهة المستخدم الحالي لموقع ويب بشكل شامل - تحسين التخطيط والطباعة والتباعد والعمق والتسلسل الهرمي المرئي وتحسين المكونات - مع الحفاظ على لوحة الألوان الحالية للموقع. يضيف أيضًا رسومًا متحركة سلسة ومتداخلة + كشف انزلاقي لأعلى باستخدام Framer Motion (أو CSS إذا كان HTML عاديًا) يتم تشغيله عند دخول العناصر إلى منفذ العرض. استخدم هذه المهارة عندما يريد المستخدم تحسين أو تحديث أو تلميع أو تحريك موقع ويب موجود أو صفحة React/HTML. يتم تفعيلها حتى عندما يذكر المستخدم فقط "جعلها تبدو أفضل"، أو "تحريكها"، أو "تحسين التصميم"، أو "ترقية واجهة المستخدم"، أو "جعلها أكثر حداثة"، أو "إضافة رسوم متحركة للتمرير" - تتعامل هذه المهارة مع كل ذلك، وليس الرسوم المتحركة فقط. المصدر: zaaakher/agent-skills.