ابنِ ثم قيّم

قل «قيّم ما بنيته» أو «هل يطابق هذا الاتجاه؟» أو «قيّم صفحتي». تفحص المهارة gobanana-critique الصفحة المبنية مقابل الاتجاه الذي جاءت منه، بصدق وبالأدلة.

ما تحتاجه

• الصفحة: رابط، أو خادم تطوير محلي (http://localhost:3000/pricing)، أو لقطات شاشة. في مشروع محلي لا يعمل فيه خادم، يعرض الوكيل تشغيل سكربت التطوير لديك ويسألك أولا.
• الاتجاه: من المحادثة، أو من design/explorations/<slug>/ في مستودعك، أو من اللوحة.
• أداة متصفح، أي منها: Playwright MCP، أو أدوات Chrome (Claude in Chrome أو ما يشبهها)، أو Playwright CLI عبر npx. وإن لم تتوفر أي منها، يطلب منك لقطات شاشة.

الخطوات

1. احصل على قائمة الفحص. design/explorations/<slug>/REVIEW.md إن وجد. وإلا فـ export_kit مع review (Pro). في الخطة المجانية، يبني الوكيل قائمة الفحص من DIRECTION.md: بند لكل من المكون المميز، والنمط، والخطوط، والألوان، والتخطيط، والحركة، والملمس، والأيقونات، والكثافة، وكل سطر تجنب، إضافة إلى التباين وحجم أهداف اللمس.

2. التقط لقطات شاشة لصفحتك بمقاسات المنصة:

   المنصة	المقاسات
   mobile	390x844
   tablet	834x1194
   website	1440x900 و390x844
   webapp	1440x900
   any	1440x900 و390x844

   تفحص بنود الحركة أيضا مع تفعيل تقليل الحركة (في Playwright reducedMotion: "reduce") وبقراءة CSS.

   دون MCP، يقوم CLI بالمهمة:

   npx --yes playwright screenshot --viewport-size=390,844 --full-page http://localhost:3000/pricing /tmp/mobile.png

3. قيّم كل بند بـ pass أو fix أو not checked مع السبب، ولكل منها دليل (لقطة شاشة بمقاس محدد، أو ملف ورقم سطر):

   البند	التقييم	الدليل
   المكون المميز: الرصيد يظهر كتذكرة مختومة	pass	390x844: بطاقة تذكرة بحافة مثقبة فوق خط الطي
   التباين: نص المحتوى 4.5:1	fix	1440x900: #8A8F98 على #F4F1EA يساوي 2.9:1 (app/pricing/page.tsx السطر 42)
   الحركة تحترم تقليل الحركة	not checked	لا أداة متصفح، وCSS لا يحتوي على كتلة prefers-reduced-motion

   تقيم سهولة الوصول بصرامة: نص WCAG 2.2 AA بنسبة 4.5:1 (SC 1.4.3)، وأجزاء الواجهة 3:1 (SC 1.4.11)، وحجم أهداف اللمس (SC 2.5.8)، والتركيز المرئي، وتقليل الحركة. وكذلك المنصة: لا شبكة من 12 عمودا على الهاتف، وأهداف لمس 44pt على الهاتف.

4. أهم 3 إصلاحات، سطر لكل منها: ماذا، وأين، ولماذا. ثم مدى القرب: «7 من 11 تنجح، المكون المميز موجود، لكن طابع الخطوط ليس كذلك».

5. التطبيق، إذا وافقت. «أطبق هذه الإصلاحات الثلاثة؟ لن ألمس إلا ملفات /pricing». يعدل الملفات ضمن نطاق الصفحة فقط، ويلتقط لقطات شاشة جديدة بالمقاسات نفسها، ويعيد تقييم ما لمسه.

نطاق الصفحة دائما

تبقى الإصلاحات في ملفات الصفحات المحددة في النطاق ومكوناتها وأنماطها المحلية. لا تعدل المهارة أبدا المكونات المشتركة، أو CSS العام، أو رموزك أو سمتك، أو التخطيطات التي تستخدمها صفحات أخرى، أو المسارات الأخرى. إذا احتاج إصلاح إلى ملف مشترك، تذكره وتتركه لك.

صفحتك فقط

لقطات الشاشة لصفحتك أنت، وتحفظ في مجلد مؤقت (أو في design/explorations/<slug>/critique/ إذا أردت الاحتفاظ بها). لا تلتقط المهارة أبدا لقطات لصور مراجع من أطراف أخرى ولا تحفظها.