وكيلان فرعيان (subagents) لـ Claude Code يعملان على واجهة الويب من جهتين. الأول، accessibility-specialist، يفحص الصفحات والمكوّنات وفق معيار WCAG 2.1 بمستوييه AA وAAA، ثم يكتب الإصلاح في الكود نفسه. والثاني، ui-ux-designer، يعمل قبل الكود: من فهم المستخدم ورحلته إلى نظام تصميم جاهز للتسليم.
accessibility-specialist: من التدقيق إلى الإصلاح
تلزمه تعليماته بالبدء بعناصر HTML الدلالية، ثم بسمات ARIA حين لا تكفي. ويغطي:
- التنقل بلوحة المفاتيح وحدها: ترتيب منطقي للتبويب، ومؤشر تركيز ظاهر لكل عنصر تفاعلي.
- روابط التخطي (skip links) ومناطق المعالم (landmarks) وتسلسل العناوين لمستخدمي قارئات الشاشة.
- حبس التركيز (focus trap) داخل النوافذ المنبثقة والطبقات.
- تباين الألوان، ونص بديل لكل محتوى غير نصي، وتخطيط يبقى مقروءًا عند التكبير إلى 200% دون تمرير أفقي.
- احترام تفضيلَي المستخدم prefers-reduced-motion وprefers-color-scheme.
- نماذج إدخال برسائل خطأ واضحة، وسكربتات اختبار آلي مع axe DevTools.
ui-ux-designer: من تعريف المشكلة إلى تسليم التصميم
يسير على منهج التصميم المتمحور حول المستخدم، ويبدأ بموجز يعرّف المشكلة. ثم ينتقل إلى شخصيات المستخدمين (personas) وخرائط رحلتهم، فهيكلة المعلومات ومسارات المهام، فإطارات أولية (wireframes) تتدرج إلى تصميم عالي الدقة. ويعدّد ملفه اثني عشر مُخرَجًا، أنفعها للمطور:
- نظام تصميم بمكوّنات ورموز (design tokens) وتوثيق لكل منها.
- مواصفات متجاوبة للجوال والجهاز اللوحي وسطح المكتب.
- إرشادات تنفيذ تسهّل انتقال التصميم إلى الكود.
- بروتوكول لاختبار قابلية الاستخدام، وتقرير تدقيق لإتاحة الوصول.
مثال: نموذج إنشاء الحساب
تكتب «استخدم الوكيل ui-ux-designer لرسم رحلة إنشاء الحساب»، فتوجّهه تعليماته إلى وصف مسار المستخدم كاملًا حتى اكتمال التسجيل. ثم تكتب «استخدم الوكيل accessibility-specialist لمراجعة نموذج التسجيل»، فتوجّهه إلى فحص تسميات الحقول وترتيب التبويب ورسائل الخطأ، ثم كتابة الإصلاح في ملف النموذج. وفي وصف كل منهما عبارة «Use PROACTIVELY»، فقد يستدعي Claude أحدهما دون طلب حين تبني مكوّنًا أو نموذجًا أو تصمّم واجهة.
تشغيلهما في Claude Code
- بعد فك الضغط في مجلد ثابت حمّل مجلد plugin لجلسة واحدة بالأمر
claude --plugin-dir "PATH/TO/EXTRACTED/plugin"، واستبدل المسار بموضع المجلد عندك. - إن نجح التحميل ظهر الوكيلان حين تكتب @ مسبوقَين باسم الإضافة، مثل agents-design-experience:ui-ux-designer.
- لإبقائهما في كل جلسة انسخ الملفين من plugin/agents إلى .claude/agents في مشروعك، أو إلى ~/.claude/agents لجميع مشروعاتك.
أرفقتُ معهما دليلًا عربيًا للتحميل وفهرسًا بمساريهما.
ما يلزمك وحدود الوكيلين
- تحتاج Claude Code بحساب مسجَّل، ويُحتسب استهلاك النموذج على حسابك. أما محادثات claude.ai فلا تحمّل ملفات الوكلاء، ولاستعمال منهج أحدهما هناك انسخ تعليماته إلى تعليمات مشروع (Project). ولم أجهّز لهما صيغة Codex.
- لا سطر tools ولا model في ترويسة الملفين، فيعمل كل منهما بأدوات جلستك ونموذجها. ولا أداة تصميم خاصة بأي منهما، فما يسلّمه نص وكود في مشروعك.
- تطلب التعليمات اختبارًا بقارئات الشاشة NVDA وJAWS وVoiceOver، وهذه تشغّلها أنت؛ فاعتبر ما يكتبه الوكيل عنها قائمة فحص تتحقق منها.
- بحث المستخدمين واختبارات الاستخدام يخرجان من ui-ux-designer خططًا وأسئلة، والنتائج تأتي من مستخدمين حقيقيين.
- تشير الملفات إلى WCAG 2.1 ولا تذكر اتجاه الكتابة من اليمين إلى اليسار. إن التزم مشروعك بإصدار أحدث أو كانت واجهتك عربية فاذكر ذلك في طلبك، ولفحص الاتجاه أعددتُ مهارة مدقّق واجهات RTL العربية.
- الملفان بالإنجليزية كما كتبهما أصحابهما.
الترخيص
كتب الوكيلين davepoon ومجتمع BuildWithClaude في مستودع buildwithclaude، وهما هنا بترخيص MIT، ونصّه داخل الحزمة.
