ai-friendly-web-design-skill

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

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

14 مبدأ تصميم محسّنة للتنقل بين الوكلاء والوصول
اصطلاحات محدد مستقرة data-testid / data-ai-action
لا توجد تفاعلات عند التمرير فقط، لا توجد حواجز iframes/Shadow DOM
حالات تحميل صريحة لتجنب حالات السباق
تنشيط تلقائي أثناء بناء/مراجعة واجهة المستخدم — تحديد العلامات للمشاكل حسب الخطورة

عرض مباشر

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

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

0/0

التثبيت

مستودع المؤلف · وثائق Claude Skills الرسمية

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

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

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

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

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

الخطوات

إدخال المكون إلى Claude

راجع Checkout.tsx هذا مقابل مبادئ ai-friendly-web-design. حدد الخطورة.✓ تم النسخ

→ قائمة مرتبة: حرجة (إرسال عند التمرير فقط) -> طفيفة (aria-live مفقود)
تطبيق الإصلاحات

طبق جميع الإصلاحات الحرجة والرئيسية، احتفظ بالعناصر المرئية متطابقة.✓ تم النسخ

→ مكون معدّل + ملخص الفروقات

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

المزالق

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

اجمعها مع: chrome-devtools

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

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

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

الخطوات

الإطار الأساسي من المبادئ

بناء نموذج عنوان الفواتير باستخدام ai-friendly-web-design. أنواع الإدخال الأصلية، التسميات، aria-describedby للأخطاء، تحميل صريح عند الإرسال.✓ تم النسخ

→ نموذج مع أنواع HTML أصلية (بريد إلكتروني، هاتف)، لا توجد تحايلات combobox مخصصة
إضافة الربط العميق + حالة عنوان URL

اجعل خطوة النموذج تنعكس في عنوان URL بحيث يمكن للوكلاء فتح الخطوة 2 مباشرة.✓ تم النسخ

→ معامل الخطوة في عنوان URL، تم استعادة الحالة عند التحميل

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

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

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

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

الخطوات

إعادة هيكلة إلى مسار مرقم

استبدل قائمة التمرير اللانهائي برقيم قائم على عنوان 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 أو تدقيق واجهة مستخدم
apply_principles	component + findings	بعد المراجعة
scaffold_agent_friendly	UI spec	واجهة مستخدم جديدة تماماً

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

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

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

الأمان

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

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

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

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

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

Review says no issues but agents still miss buttons

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

data-testid names clash with existing tests

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

البدائل