·ui-enhance-animate
*

ui-enhance-animate

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

14التثبيتات·1الرائج·@zaaakher

التثبيت

$npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate

كيفية تثبيت ui-enhance-animate

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

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

المصدر: zaaakher/agent-skills.

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.

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

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

أمر التثبيت
npx skills add https://github.com/zaaakher/agent-skills --skill ui-enhance-animate
الفئة
*وسائط إبداعية
موثق
أول ظهور
2026-02-28
آخر تحديث
2026-03-11

Browse more skills from zaaakher/agent-skills

إجابات سريعة

ما هي ui-enhance-animate؟

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

كيف أثبّت ui-enhance-animate؟

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

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

https://github.com/zaaakher/agent-skills

التفاصيل

الفئة
*وسائط إبداعية
المصدر
skills.sh
أول ظهور
2026-02-28