عبدالله خطاطبة

ببني منتجات بالذكاء الاصطناعي

واتساب
انتقل للمحتوى
كل الهدايا
دليلinstagram7 أكتوبر 20263 د قراءة

دليل 3 مكتبات UI لمواقع بمستوى وكالة

ثلاث مكتبات جاهزة بتركّبها بأي موقع بنيته بالذكاء الاصطناعي، وبتطلّع موقع متحرك شكله طالع من وكالة تصميم.

Skiper UI وVengeance UI وAnimaster Lib — ثلاث مكتبات كومبوننتات متحركة بتشتغل مع React وNext.js وTailwind. بتنسخ الكومبوننت، أو بأمر واحد بالتيرمنال، أو بتعطي الرابط لـClaude وبيركّبه عنك.

قبل ما تبلّش

ثلاث ملاحظات سريعة

— قبل ما تبلّش

  • التوافق

    كل المكتبات الثلاثة شغالة مع React وNext.js وTailwind، وأغلبها مع shadcn/ui. بتركّبها بأي موقع بنيته بالذكاء الاصطناعي: Claude Code أو Cursor أو Lovable أو غيرهم.

  • طريقة التركيب

    نفسها بالثلاثة: تنسخ الكومبوننت وتلصقه بمشروعك، أو بأمر واحد بالتيرمنال، أو بتعطي الرابط لـClaude وبيركّبه عنك.

  • عن السعر

    بكل وحدة في جزء مجاني كبير. Skiper وAnimaster عندهم كمان نسخة Pro مدفوعة لمكونات زيادة. بتقدر تبني موقع كامل بالجزء المجاني.

١. Skiper UI

مكونات مش عادية على shadcn/ui

— Skiper UI

  • شو فيها

    مكتبة مكونات مبنية على shadcn/ui: كروت، صفحات أسعار، بلوكات جاهزة، تأثيرات سكرول، وكاروسيلات بستايل Apple وVercel.

1

Skiper UI

الموقع الرسمي.

skiper-ui.com
2

كل مكونات Skiper UI

تصفّح كل المكونات واختار اللي عاجبك.

skiper-ui.com
1

Step 1

ركّب كومبوننت من Skiper

كل كومبوننت إله أمر واحد. بدّل الرقم برقم الكومبوننت اللي عاجبك من الموقع.

npx shadcn add @skiper-ui/skiper40

٢. Vengeance UI

أنيميشن سينمائي لصفحات الهبوط

— Vengeance UI

  • شو فيها

    مكتبة أنيميشن سينمائية ومكونات لصفحات الهبوط (Landing pages): هيرو متحرك، أزرار، لودرز سينمائية، أقسام FAQ وCTA. مبنية على Framer Motion وGSAP، ومجانية ومفتوحة المصدر.

  • التركيب

    الـCLI تبعهم بينسخ ملف الكومبوننت لجوّا مشروعك (مش مكتبة npm)، فبتقدر تعدّل عليه براحتك. التعليمات لكل كومبوننت موجودة بصفحته على الموقع.

3

Vengeance UI — التوثيق

الموقع والتوثيق.

vengenceui.com
4

Vengeance UI على GitHub

المستودع المفتوح المصدر.

github.com

٣. Animaster Lib

250+ كومبوننت متحرك

— Animaster Lib

  • شو فيها

    أكثر من 250 كومبوننت متحرك احترافي: تأثيرات سكرول، هيرو بلوكات، تفاعل مع الماوس، سلايدرز، و3D. بفيديو معاينة لكل كومبوننت. مبنية على GSAP وWebGL.

  • التركيب

    انسخ الكود والصقه. حوالي 60% من المكونات HTML/CSS/JS عادي (بتشتغل بأي موقع)، والباقي React وNext.js.

5

Animaster Lib

الموقع الرسمي.

animmasterlib.dev
6

تأثيرات السكرول

كل تأثيرات السكرول.

animmasterlib.dev
7

أقسام الهيرو

بلوكات الهيرو الجاهزة.

animmasterlib.dev

الطريقة الأسهل

خلّي Claude يركّبهم عنك

— الطريقة الأسهل

  • برومبت واحد لـClaude Code

    افتح مشروعك بـClaude Code وانسخ هالبرومبت.

1

برومبت التركيب

بيقترح كومبوننت مناسب لكل قسم، وبيركّب اللي بتوافق عليه.

بدي أطوّر تصميم موقعي لمستوى وكالة باستخدام هالمكتبات:
- Skiper UI: https://skiper-ui.com/components
- Vengeance UI: https://github.com/Ashutoshx7/VengeanceUI
- Animaster Lib: https://animmasterlib.dev/

1. راجع صفحات موقعي واقترح لكل قسم (الهيرو، المميزات، الأسعار، الفوتر) كومبوننت مناسب من هالمكتبات.
2. ركّب المكونات اللي بوافق عليها وعدّل ألوانها وخطوطها لتناسب هوية موقعي.
3. خلّي الأنيميشن ناعم وما يبطّئ الموقع على الموبايل.

نصايح

عشان يطلع الموقع احترافي فعلاً

  • لا تحط أنيميشن بكل مكان — هيرو قوي، وسكرول ناعم بقسمين ثلاثة بكفّي. الزيادة بتخلّي الموقع يبين رخيص
  • ثبّت ستايل واحد — اختار مكتبة رئيسية وحدة، وخذ من الثانيات قطع محددة بس
  • جرّب على الموبايل — بعض تأثيرات الـWebGL ثقيلة، اسأل Claude يعطّلها على الشاشات الصغيرة
  • انتبه للترخيص — إذا رح تستخدم مكونات Pro بمشروع لعميل، اقرأ شروط الاستخدام التجاري

المصادر

للاطلاع أكثر

1

مقارنة بين الثلاثة

مقال بيقارن بين مكتبات الكومبوننتات المتحركة.

soymarketingultra.com

هيرو قوي وسكرول ناعم بقسمين ثلاثة بكفّي، والزيادة بتخلّي الموقع يبين رخيص. ثبّت ستايل واحد، وجرّب على الموبايل قبل النشر.

ركّبت أول مكتبة؟

تابعني عشان أكثر

كل يوم بنزّل محتوى يساعدك تبني بالذكاء الاصطناعي.

تواصل معي على إنستغرام— عبدالله AI

أبعتلك الدليل الجاي على الإيميل

إيميل واحد لكل فيديو جديد. بدون سبام، وبتقدر توقف بأي وقت.

هدايا ثانية

دليل28 أكتوبر 2026

دليل LinkedIn Agent Skill — Claude بيدير حسابك

11 سكيل مجانية بتخلّي Claude يكتب ويخطط ويحلل حساب LinkedIn تبعك، والنشر عليك إنت.

2 دافتح الهدية
دليل27 أكتوبر 2026

دليل 11 إضافة من Anthropic — Claude خبير بوظيفتك

11 إضافة مجانية ومفتوحة المصدر من Anthropic، كل وحدة لوظيفة محددة.

1 دافتح الهدية
دليل26 أكتوبر 2026

دليل 5 إضافات لـClaude Code — برمجة بمستوى سينيور

5 إضافات مجانية بتخلّي Claude Code يشتغل زي مبرمج محترف.

2 دافتح الهدية