UI/UX Pro Max Skill

لماذا تستخدمه

الميزات الأساسية

مقاييس طباعية مع إيقاع رأسي
أنظمة ألوان مع tokens دلالية ووضع مظلم وإمكانية وصول
مقياس تباعد + أنماط شبكة
إرشادات الحركة (مدد، تسهيل، متى تُحرّك)
أنماط المنصة: ويب، iOS HIG، Material 3، macOS
قائمة تحقق إمكانية الوصول (افتراضيات WCAG 2.2 AA)

عرض مباشر

كيف يبدو في الممارسة

جاهز

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "ui-ux-pro-max-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "ui-ux-pro-max-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
        "~/.claude/skills/ui-ux-pro-max"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json

{
  "context_servers": {
    "ui-ux-pro-max-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill",
          "~/.claude/skills/ui-ux-pro-max"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add ui-ux-pro-max-skill -- git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ~/.claude/skills/ui-ux-pro-max

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: UI/UX Pro Max Skill

إصلاح مظهر 'واجهة مستخدم مُوَّلدة بالذكاء الاصطناعي' في تطبيق موجود

👤 المطورون الذين تبدو واجهات Claude عندهم عامة ⏱ ~60 min intermediate

متى تستخدمه: مخرج shadcn يعمل لكن يبدو جاهزًا من الرف.

الخطوات

التشخيص

Use UI/UX Pro Max. Audit the design system in /src/ui — type, spacing, color tokens. Score each.✓ تم النسخ

→ بطاقة تقييم لكل محور مع مشكلات محددة
ضبط الـ tokens

Recommend a 4-step type scale + 4-step spacing scale aligned to 4px grid.✓ تم النسخ

→ جدول tokens
التطبيق

Update tokens.css and rerun. Diff what changed in the rendered look.✓ تم النسخ

→ طباعة أدق، إيقاع متسق

النتيجة: واجهة مستخدم لا تصرخ 'صُنعت في 5 دقائق'.

المزالق

الإفراط في tokenization — كل قيمة تصبح متغيرًا — متغيرات للـ tokens المتكررة؛ القيم الحرفية جيدة للاستخدامات الفردية

تصميم شاشة محمول تتبع iOS HIG

👤 المطورون الذين يبنون تطبيقات متعددة المنصات ⏱ ~45 min intermediate

متى تستخدمه: لديك سطح iOS وتريده يبدو أصيلًا لا كحساء منصات متعددة.

الخطوات

المواصفات

Design a settings screen for iOS — group cells, navigation, light/dark, accessibility callouts. Reference HIG.✓ تم النسخ

→ مواصفات مع مراجع HIG
التنفيذ

Translate to SwiftUI. Use system fonts, semantic colors, dynamic type.✓ تم النسخ

→ كود SwiftUI يبدو أصيلًا للنظام

النتيجة: شاشة تجتاز اختبار العين 'يبدو أصيلًا'.

المزالق

الألوان المُبرمَجة تكسر الوضع المظلم — استخدم ألوان النظام الدلالية؛ المهارة تفرض هذا

تشغيل تدقيق إمكانية وصول على مكوّن

👤 المطورون الذين يستعدون لامتثال a11y ⏱ ~30 min intermediate

متى تستخدمه: تحتاج WCAG 2.2 AA على تدفق حرج.

الخطوات

التدقيق

Audit /components/Form.tsx against WCAG 2.2 AA. Find issues with contrast, labels, focus order.✓ تم النسخ

→ قائمة مشكلات مع الخطورة
الإصلاح

Apply fixes. Verify with screen-reader semantic outline.✓ تم النسخ

→ قائمة المشكلات تقلص؛ المخطط الدلالي يُقرأ بنظافة

النتيجة: مكوّن يجتاز التدقيق + اختبار المستخدم الفعلي.

المزالق

الإصلاحات التلقائية تكسر التخطيط البصري — أعد الرسم بعد كل إصلاح؛ فحص انحدار بصري

اجمعها مع: filesystem

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

ui-ux-pro-max-skill + open-design-skill

نظام تصميم + أنظمة مرجعية بجودة العلامة التجارية

Use UI/UX Pro Max for fundamentals + open-design for brand styles.✓ تم النسخ

ui-ux-pro-max-skill + filesystem

تطبيق تغييرات tokens عبر قاعدة الكود

Update tokens.css and propagate; run audit.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداة	المدخلات	متى تستدعيها	التكلفة
design_audit	scope: directory or component	التقييم الأولي	tokens
tokens_recommend	constraints (brand, platform)	إعداد نظام تصميم	tokens
a11y_check	component path	مرور الامتثال	tokens

التكلفة والحدود

تكلفة التشغيل

حصة API: N/A
الرموز لكل استدعاء: ثقيل في التدقيق الأول؛ أخف للمتابعات
التكلفة المالية: مجاني
نصيحة: دقّق مكوّنًا مكوّنًا، لا التطبيق كله دفعة واحدة

الأمان

الصلاحيات والأسرار ونطاق الأثر

الحد الأدنى من الصلاحيات: Read project files

تخزين بيانات الاعتماد: لا شيء

نقل البيانات الخارجي: لا شيء

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

Recommendations clash with brand guidelines

قدّم قيود العلامة التجارية مسبقًا؛ المهارة تحترمها

Skill triggers too aggressively

حدّد النطاق بدليل أو استدعِ صراحةً

البدائل