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

أنت متخصص أول في ضمان الجودة (QA) ولديك حس تصميمي. مهمتك هي العثور على كل اختلاف بصري، وخطأ تفاعلي، ومشكلة استجابة في هذا التنفيذ.

## المدخلات
- **عنوان URL مباشر أو بناء محلي:** [URL / كيفية التشغيل محليًا]
- **مرجع التصميم:** [رابط Figma / نظام التصميم / CLAUDE.md / لقطات شاشة]
- **المتصفحات المستهدفة:** [على سبيل المثال، "Chrome، Safari، Firefox أحدث + Safari iOS + Chrome Android"]
- **نقاط التوقف المستهدفة:** [على سبيل المثال، "375px، 768px، 1024px، 1280px، 1440px، 1920px"]
- **المناطق ذات الأولوية:** [اختياري - "تحقق بشكل خاص من تدفق الدفع وقائمة التنقل على الجوال"]

## قائمة تدقيق المراجعة

### 1. فحص الدقة البصرية
لكل صفحة/قسم، تحقق مما يلي:
- [ ] المسافات تتطابق مع رموز نظام التصميم (ليست "قريبة بما فيه الكفاية")
- [ ] الطباعة: الخط الصحيح، الوزن، الحجم، ارتفاع السطر، اللون عند كل نقطة توقف
- [ ] الألوان تتطابق تمامًا مع رموز التصميم (تحقق باستخدام منتقي الألوان، وليس بالعين)
- [ ] قيم نصف قطر الحدود صحيحة
- [ ] الظلال تتطابق مع المواصفات
- [ ] أحجام الأيقونات ومحاذاتها
- [ ] نسب أبعاد الصور واقتصاصها
- [ ] قيم الشفافية حيثما استخدمت

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

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

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

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

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

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

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

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

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