/ الدليل / الملعب / ai-friendly-web-design-skill
← كل الخوادم ↗ GitHub
● مجتمع ianho7 ⚡ فوري

ai-friendly-web-design-skill

بواسطة ianho7 · ianho7/ai-friendly-web-design-skill

14 مبدأ تصميم زائد المراجعة التلقائية لبناء واجهات ويب يمكن لوكلاء الذكاء الاصطناعي التنقل فيها بشكل موثوق — HTML دلالي، معرّفات اختبار مستقرة، لا تفاعلات مخفية.

مهارة Claude Code تطبق 14 مبدأ تصميم تجعل واجهات المستخدم قابلة للاستخدام من قبل البشر والأتمتة/الوكلاء: HTML دلالي، ARIA، محددات مستقرة data-testid / data-ai-action، عناصر النماذج الأصلية، الترقيم بدلاً من التمرير اللانهائي، حالات تحميل صريحة، روابط عميقة عبر عنوان URL، أخطاء واضحة، نقاط دخول UI و API مزدوجة. تطبق تلقائياً عندما يقوم Claude ببناء أو مراجعة مكون واجهة مستخدم.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

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

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

عرض مباشر

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

ai-friendly-web-design-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "ai-friendly-web-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "ai-friendly-web-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/ianho7/ai-friendly-web-design-skill",
        "~/.claude/skills/ai-friendly-web-design-skill"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "ai-friendly-web-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/ianho7/ai-friendly-web-design-skill",
          "~/.claude/skills/ai-friendly-web-design-skill"
        ]
      }
    }
  }
}

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

claude mcp add ai-friendly-web-design-skill -- git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill

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

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

استخدامات عملية: ai-friendly-web-design-skill

تدقيق مكون موجود من أجل جاهزية الوكيل

👤 مطورو الويب الذين يرسلون إلى العملاء الذين سيصلون إلى الصفحة باستخدام الوكلاء ⏱ ~30 min beginner

متى تستخدمه: يستمر chatbot الدعم الخاص بك أو وكيل مراقبة الجودة في فقدان الزر الصحيح.

المتطلبات الأساسية
  • تثبيت المهارة — git clone https://github.com/ianho7/ai-friendly-web-design-skill ~/.claude/skills/ai-friendly-web-design-skill
الخطوات
  1. إدخال المكون إلى Claude
    راجع Checkout.tsx هذا مقابل مبادئ ai-friendly-web-design. حدد الخطورة.✓ تم النسخ
    → قائمة مرتبة: حرجة (إرسال عند التمرير فقط) -> طفيفة (aria-live مفقود)
  2. تطبيق الإصلاحات
    طبق جميع الإصلاحات الحرجة والرئيسية، احتفظ بالعناصر المرئية متطابقة.✓ تم النسخ
    → مكون معدّل + ملخص الفروقات

النتيجة: مكون لا يزال جميلاً للبشر وقابلاً للوصول للوكلاء.

المزالق
  • إضافة data-testid في كل مكان بدون اصطلاح — اتبع اصطلاح التسمية للمهارة (data-testid='<area>-<action>') أو ستنجرف
اجمعها مع: chrome-devtools

بناء نموذج جديد مع عناصر تحكم أصلية و ARIA الصحيح

👤 مطورو الواجهة الأمامية الذين يبنون نماذج عالية المخاطر (الدفع، الإعداد الأولي) ⏱ ~45 min intermediate

متى تستخدمه: نموذج جديد حيث لا يمكنك تحمل منع قارئات الشاشة أو الوكلاء.

الخطوات
  1. الإطار الأساسي من المبادئ
    بناء نموذج عنوان الفواتير باستخدام ai-friendly-web-design. أنواع الإدخال الأصلية، التسميات، aria-describedby للأخطاء، تحميل صريح عند الإرسال.✓ تم النسخ
    → نموذج مع أنواع HTML أصلية (بريد إلكتروني، هاتف)، لا توجد تحايلات combobox مخصصة
  2. إضافة الربط العميق + حالة عنوان URL
    اجعل خطوة النموذج تنعكس في عنوان URL بحيث يمكن للوكلاء فتح الخطوة 2 مباشرة.✓ تم النسخ
    → معامل الخطوة في عنوان URL، تم استعادة الحالة عند التحميل

النتيجة: نموذج يمكن للتكنولوجيا المساعدة والوكلاء التنقل فيه بنظافة.

استبدال التمرير اللانهائي بترقيم يمكن التنبؤ به

👤 مهندسو المنتجات حيث يفشل الوكلاء في تجاوز الصفحة 1 ⏱ ~30 min intermediate

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

الخطوات
  1. إعادة هيكلة إلى مسار مرقم
    استبدل قائمة التمرير اللانهائي برقيم قائم على عنوان URL (?page=N). احتفظ بسلوك التمرير.✓ تم النسخ
    → صفحات قابلة للعنونة، السابق/التالي مع ARIA

النتيجة: قائمة يمكن للوكيل التنقل فيها بشكل حتمي.

المزالق
  • كسر SEO بإزالة التمرير القديم بالكامل — احتفظ بتحميل التمرير ضمن كل صفحة — فقط اجعل حد الصفحة صريحاً

التركيبات

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

ai-friendly-web-design-skill + chrome-devtools

اختبر المكون مباشرة وتأكد من عمل محددات الوكيل

قم بتحميل المكون المعدّل في devtools، تحقق من عرض قيم data-testid وخصائص aria.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
review_component component path/source أي PR أو تدقيق واجهة مستخدم 0
apply_principles component + findings بعد المراجعة 0
scaffold_agent_friendly UI spec واجهة مستخدم جديدة تماماً 0

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

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

حصة API
بلا
الرموز لكل استدعاء
معتدل — مكون + مراجعة
التكلفة المالية
مجاني
نصيحة
قم بتشغيل المراجعة في وقت PR، وليس في كل ضغطة مفتاح

الأمان

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

تخزين بيانات الاعتماد: بلا
نقل البيانات الخارجي: بلا

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

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

Review says no issues but agents still miss buttons

قم بالتشغيل باستخدام لقطة Chrome DevTools؛ قد يخفي shadow DOM من المراجعة الثابتة

data-testid names clash with existing tests

وفر اصطلاح التسمية الخاص بك للمهارة قبل أن تسميه تلقائياً

البدائل

ai-friendly-web-design-skill مقابل البدائل

البديلمتى تستخدمهاالمقايضة
المراجعة اليدوية a11y + Lighthouseتهتم فقط بإمكانية الوصول، لا التنقل بين الوكلاءتفتقد الاهتمامات الخاصة بالوكيل مثل المحددات المستقرة

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills