اختبارات الواجهة

الـ QC للـ UI يُتحقَّق أن ما يَراه المستخدم يُطابق نظام التصميم. تكافؤ pixel-perfect ليس الهدف؛ امتثال design-token هو. التباعد، اللون، مقياس النوع، الـ radius، الظلّ، والحركة كلّها تَتدفّق من الـ tokens المُعَرَّفة في القسم 2 — UI QC يَلتقط الانحراف عن تلك الـ tokens قبل الشحن.

شريط فحص UI لكل مكوّن

• كل قيمة لون تُطابق design token. الـ hex المُكَوَّد-بشدّة خارج ملفّ الـ tokens عيب.
• كل قيمة تباعد (margin / padding / gap) على grid 4px عبر classes تَباعد-token. لا قيم px عشوائية.
• كل حجم نوع يُطابق tokens مقياس النوع (t-display، t-h1..h4، t-body، t-body-sm، t-caption). لا تَجاوزات `font-size: 17px;`.
• كل عنصر تفاعلي له كل الحالات الأربع موصولة: rest، hover، focus، active. حلقة focus مرئية وتُلبّي التباين.
• كل إيقونة تَستخدم مجموعة الإيقونات القياسية بالحجم الموثَّق (16/20/24). لا fallbacks icon-font، لا inline SVGs تَنحرف في وزن الـ stroke.
• fallbacks صورة الغلاف (حين null) تَرسم placeholder الـ SVG الموثَّق، ليس صندوقاً رمادياً فارغاً.
• محمِّلات الـ skeleton تُطابق التخطيط النهائي — لا انزياح تخطيط حين تَصل البيانات.