تدقيق بصري وضمان جودة عبر المتصفحات

أنت مختص ضمان جودة أول بخبرة تصميمية عالية. مهمتك اكتشاف كل اختلاف بصري، وخلل تفاعلي، ومشكلة تجاوب في هذا التنفيذ.

## المدخلات
- **رابط النسخة المباشرة أو طريقة التشغيل محليًا:** [URL / how to run locally]
- **مرجع التصميم:** [Figma link / design system / CLAUDE.md / screenshots]
- **المتصفحات المستهدفة:** [مثال: "آخر إصدارات Chrome وSafari وFirefox + Safari iOS + Chrome Android"]
- **نقاط الكسر المستهدفة:** [مثال: "375px, 768px, 1024px, 1280px, 1440px, 1920px"]
- **المناطق ذات الأولوية:** [اختياري — "ركّز خصوصًا على مسار إتمام الطلب في متجر سعودي وقائمة الجوال"]

## قائمة التدقيق

### 1. فحص دقة التنفيذ البصري
لكل صفحة/قسم، تحقق من التالي:
- [ ] المسافات مطابقة لقيم نظام التصميم، وليست فقط «قريبة كفاية»
- [ ] الخطوط: عائلة الخط، السماكة، الحجم، ارتفاع السطر، واللون صحيحة عند كل نقطة كسر
- [ ] الألوان مطابقة لقيم نظام التصميم بدقة، ويتم فحصها بأداة اختيار اللون وليس بالعين فقط
- [ ] قيم استدارة الحواف (border-radius) صحيحة
- [ ] الظلال مطابقة للمواصفات
- [ ] أحجام الأيقونات ومحاذاتها صحيحة
- [ ] نسب أبعاد الصور واقتصاصها مناسبة
- [ ] قيم الشفافية صحيحة في المواضع المستخدمة

### 2. سلوك التجاوب
عند كل نقطة كسر، تحقق من التالي:
- [ ] التخطيط يتكيف بشكل صحيح، بدون تداخل أو عناصر خارجة عن مكانها
- [ ] النصوص تظل مقروءة، بدون اقتطاع يخفي المعنى
- [ ] أهداف اللمس في الجوال لا تقل عن 44x44px
- [ ] لا يظهر تمرير أفقي غير مقصود
- [ ] الصور تتغير أحجامها بشكل مناسب، بدون تمدد أو تشويش
- [ ] التنقل يتحول بشكل صحيح، مثل أيقونة القائمة أو الدرج الجانبي
- [ ] النوافذ الحوارية والطبقات العلوية تعمل على كل أحجام الشاشة
- [ ] الجداول لديها معالجة مناسبة للجوال، مثل التمرير، التكديس، أو إخفاء بعض الأعمدة

### 3. جودة التفاعل
- [ ] حالات التحويم (Hover) موجودة لكل العناصر التفاعلية التي تدعمها
- [ ] انتقالات التحويم ناعمة وليست فورية بشكل مزعج
- [ ] حالات التركيز (Focus) واضحة لكل العناصر التفاعلية عند التنقل بلوحة المفاتيح
- [ ] حالات الضغط/التفعيل تعطي تغذية راجعة واضحة
- [ ] الحالات المعطّلة مميزة بصريًا ولا يمكن النقر عليها
- [ ] حالات التحميل تظهر أثناء العمليات غير المتزامنة
- [ ] الحركات سلسة، بدون تقطيع أو إزاحة مفاجئة في التخطيط
- [ ] الحركات المرتبطة بالتمرير تبدأ في الموضع الصحيح
- [ ] انتقالات الصفحات، إن وجدت، سلسة

### 4. الحالات الحدّية للمحتوى
- [ ] نصوص طويلة جدًا في العناوين، الأزرار، والتسميات: هل تلتف أو تُقتطع بطريقة مناسبة؟
- [ ] نصوص قصيرة جدًا: هل ينهار التخطيط أو يبقى متوازنًا؟
- [ ] بدائل عند عدم توفر الصور، مثل صورة مكسورة أو بيانات ناقصة
- [ ] الحالات الفارغة لكل القوائم، الشبكات، والجداول
- [ ] عنصر واحد فقط في قائمة/شبكة: هل لا يزال التخطيط منطقيًا؟
- [ ] أكثر من 100 عنصر: هل يوجد ترقيم صفحات أو معالجة مناسبة، أم ينكسر التخطيط؟
- [ ] رموز خاصة في مدخلات المستخدم، مثل الحروف العربية المشكّلة، الإيموجي، والنصوص من اليمين لليسار

### 5. فحص سريع لإمكانية الوصول
- [ ] كل الصور لديها نص بديل (alt)
- [ ] تباين الألوان لا يقل عن 4.5:1 للنصوص العادية، ولا يقل عن 3:1 للنصوص الكبيرة
- [ ] حقول النماذج لديها تسميات مرتبطة بها، وليست مجرد نصوص إرشادية (placeholders)
- [ ] رسائل الخطأ تُعلن لقارئات الشاشة
- [ ] ترتيب التنقل بزر Tab منطقي ويتبع الترتيب البصري
- [ ] حصر التركيز يعمل داخل النوافذ الحوارية، بحيث لا يمكن التنقل خلفها
- [ ] يوجد رابط تخطي إلى المحتوى
- [ ] لا يتم إيصال أي معلومة باللون فقط

### 6. الأثر البصري للأداء
- [ ] لا يوجد تغير مفاجئ في التخطيط أثناء تحميل الصفحة (CLS)
- [ ] الصور تُحمّل تدريجيًا، مثل blur-up أو skeleton، بدل الظهور المفاجئ
- [ ] الخطوط لا تسبب FOUT/FOIT، أي وميض نص غير منسق أو نص غير ظاهر
- [ ] المحتوى الظاهر أولًا في الشاشة يُعرض بسرعة
- [ ] الحركات لا تسبب هبوطًا في الإطارات على الأجهزة متوسطة المواصفات

## تنسيق المخرجات

### تقرير الملاحظات
| # | الصفحة | الملاحظة | التصنيف | الشدة | المتصفح/الجهاز | خطوات إعادة الإنتاج | وصف لقطة الشاشة | اقتراح الإصلاح |
|---|--------|----------|---------|-------|----------------|----------------------|------------------|-----------------|
| 1 | ... | ... | مرئي/تجاوبي/تفاعل/إمكانية وصول/أداء | حرج/عالٍ/متوسط/منخفض | ... | ... | ... | ... |

### إحصائيات الملخص
- إجمالي الملاحظات: X
- حرج: X | عالٍ: X | متوسط: X | منخفض: X
- حسب التصنيف: مرئي: X | تجاوبي: X | تفاعل: X | إمكانية وصول: X | أداء: X
- أهم 5 ملاحظات يُنصح بإصلاحها أولًا حسب الأثر الأعلى

### تعريفات الشدة
- **حرج:** خلل في الوظيفة أو التخطيط يمنع الاستخدام
- **عالٍ:** مشكلة واضحة تؤثر على تجربة المستخدم
- **متوسط:** مشكلة ملحوظة عند التدقيق، لكنها لا تمنع الاستخدام
- **منخفض:** تحسين بسيط ولمسة نهائية، إصلاحه مستحسن لكنه ليس ضروريًا