🎨 دليل إعداد UI UX Pro Max Skill على نظام التشغيل Linux

Pasted image 20260125225902 ده دليل لتركيب وتكامل مهارة UI/UX Pro Max لبيئات لينكس، ومختصص بشكل خاص ل Antigravity.

🚀 التركيب

1. متطلب مسبق: Python 3.x

تأكد من تركيب Python 3 (مطلوب لمحرك البحث والاستدلال):

# Ubuntu/Debian
sudo apt update && sudo apt install python3 -y

2. تركيب UI Pro CLI

تركيب CLI عالميًا باستخدام npm (كما هو مطلوب مع sudo):

sudo npm install -g uipro-cli

3. تهيئة ل Antigravity

انتقل إلى دليل مشروعك واربط المهارة بمساعدك الذكي:

cd /path/to/your/project
uipro init --ai antigravity

🛠️ الاستخدام في Antigravity

بعد التركيب، يتم تفعيل المهارة تلقائيًا لطلبات UI/UX. يمكنك أيضًا تشغيلها بشكل صريح.

التوجيه الأساسي

/ui-ux-pro-max ابني صفحة هبوط لمنتج SaaS الخاص بي

ما يحدث خلف الكواليس:

1. تحليل الطلب: يُحلل متطلبك.
2. توليد نظام التصميم: يُولد الذكاء الاصطناعي دليل أسلوب كامل (الألوان، الطباعة، الأنماط).
3. تنفيذ: يُطبق Antigravity الشفرة بناءً على هذه القواعد.

💎 نظام التصميم المتقدم (الماستر + الإضافات)

احفظ نظام التصميم في الملفات للاستخدام المستمر عبر الجلسات.

توليد ملف الماستر و الحفظ

يُنشئ ملف design-system/MASTER.md.

python3 .gemini/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyAppName"

إضافات محددة للصفحة

إذا كنت تحتاج إلى نمط محدد لصفحة فرعية (مثل "Checkout"):

python3 .gemini/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "checkout"

[!TIP] استرجاع السياق: عند بناء صفحة، ذكر: "أنا أبني صفحة Checkout. يرجى التحقق من design-system/MASTER.md و design-system/pages/checkout.md."

✅ قائمة التحقق قبل التسليم

قبل إنهاء الميزة، تأكد من:

• [x] لا توجد إيموجيات كأيقونات (استخدم Lucide/Heroicons SVG).
• [ ] مؤشر الفأرة على جميع العناصر القابلة للنقر.
• [ ] تحولات سلسة (150-300ms) لاحالات التمرير.
• [ ] إمكانية الوصول: نسبة контраست 4.5:1 كحد أدنى (WCAG AA).
• [ ] تحقق من الاستجابة: 375px، 768px، 1024px، 1440px.

🔍 أوامر مستقلة

مفيدة للاستشارة السريعة بدون توليد شفرة كامل:

• بحث الأسلوب: python3 .gemini/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
• تركيبات الطباعة: python3 .gemini/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
• دلائل المكدس: python3 .gemini/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind