إتقان واجهة المستخدم الأمامية

## نظرة عامة

تجمع إتقان واجهة المستخدم الأمامية ثلاث مهارات إنتاجية للواجهة الأمامية — **frontend-accessibility**، **frontend-components**، و**frontend-responsive** — في إضافة واحدة. معاً،它们 تغطي دورة حياة الواجهة الكاملة: بناء مكونات قابلة للتركيب، وجعلها متاحة لكل مستخدم، وتكيفها بسلاسة عبر الأجهزة. مؤلف واحد، اصطلاحات متسقة عبر React وVue وSvelte.

## البدء السريع

1. ثبّت الإضافة في مساحة عملك في OpenClaw.
2. عند بناء واجهة مستخدم جديدة، استدعِ **frontend-components** لتعريف مكونات قابلة لإعادة الاستخدام ذات مسؤولية واحدة مع props نظيفة وحالة محلية MINIMAL.
3. طبّق عليها **frontend-accessibility** للحصول على HTML الدلالي وARIA والتنقل بلوحة المفاتيح وإدارة التركيز وتباين الألوان — ثم شغّل فحص قارئ الشاشة لتأكيد امتثال WCAG.
4. أنهِ الأمر مع **frontend-responsive** لتطبيق نقاط إيقاف تعتمد على الهاتف أولاً وحاويات سائلة وحجم مناسب لللمس بحيث تتكيف المكونات نفسها من الهاتف إلى سطح المكتب.

## الأوامر الرئيسية

- `frontend-components` — صمم مكونات React/Vue/Svelte قابلة للتركيب مع واجهات واضحة وتغليف مناسب.
- `frontend-accessibility` — افحص وأصلح HTML الدلالي وARIA والتنقل بلوحة المفاتيح وتوافق قارئ الشاشة لامتثال WCAG.
- `frontend-responsive` — بناء تخطيطات متجاوبة تعتمد على الهاتف أولاً مع media queries والوحدات النسبية ونقاط إيقاف قياسية.

## نصائح

- ابنِ غلاف المكون أولاً (`frontend-components`)، ثم شغّل فحص إمكانية الوصول فوراً (`frontend-accessibility`) قبل إضافة الأنماط المتجاوبة — إصلاح الـ a11y بعد فوات الأوان أكثر تكلفة بكثير من دمجه من البداية.
- اربط `frontend-responsive` مع اختبار جهاز حقيقي (أو محاكاة الأجهزة في DevTools عند `375px` و`768px` و`1280px`) للكشف عن مشاكل أهداف اللمس وإعادة التدفق التي تفوّتها التخطيطات التي تبدأ من سطح المكتب.
- ادمج مع إضافة خلفية أو DB لشحن شريحة كاملة عمودية: إضافة الواجهة تتعامل مع طبقة مواجهة المستخدم من البداية إلى النهاية.