الدرس السابق فتح لك بيئة التطوير الوكيلية وشرح طريقة العمل داخلها. هذا التكليف هو الامتحان الحقيقي: مشروع واحد كامل، من رسالة عميل غامضة إلى صفحة HTML تعمل وتُسلَّم باحترام، كل ذلك داخل Cursor، ووفق معايير الجودة البصرية التي ستُحاسَب عليها بندًا بندًا.
سبع قواعد يُرفض التسليم دونها#
ليست تفاصيل شكلية؛ هذه القواعد هي ما يفرّق بين «طالب أنجز مهمة» و«مترجم يسلّم عملًا لعميل».
مشروع واحد، والاختيار نهائي
سبعة مجالات مختلفة أمامك. اختر ما يشدّك أو ما يمكنك بيعه فعلًا لعميل، لا الأسهل؛ فما يهمّك هو ما ستتعب فيه كما ينبغي.
كل العمل داخل Cursor
ممنوع أن تبني الصفحة في محادثة ثم تنسخها. المطلوب أن تعمل بوضع Agent، وتقرأ الفرق، وتستخدم نقاط الرجوع؛ فهذه هي المهارة المقيَّمة.
ملف HTML واحد مكتفٍ ذاتيًّا
كل CSS وJS داخل الملف، وصفر روابط خارجية. الاستثناء الوحيد: خط عربي واحد من Google Fonts.
محتوى عربي حقيقي وطويل
لا «عنوان تجريبي» ولا «Lorem ipsum». أسماء وأسعار وعناوين واقعية من مجال المشروع؛ فالتصميم الذي لا ينجح إلا مع محتوى مثالي تصميم فاشل.
سجّل كل أمر
ملف prompt_log.txt فيه كل محاولة: الأمر، وما حدث، وما غيّرته ولماذا، وأي نموذج استخدمت. عليه 20٪ من الدرجة.
المحاولة الأولى ليست المطلوبة
التسليم الذي فيه أمر واحد يقول إنك لم تجرّب. المتوقّع ثلاث محاولات على الأقل، كلٌّ منها أذكى من سابقتها.
الفحص على 390px أولًا
افتح الصفحة بعرض الهاتف قبل الحاسوب؛ فأكثر من 80٪ من جمهورك يفتح من الهاتف، ومن هناك يبدأ التقييم.
الروتين: من فتح المجلّد إلى التسليم#
الترتيب نفسه في المشاريع السبعة. لا تقفز خطوة؛ فكل خطوة تمنع كارثة في التي تليها.
افتح مجلّدًا نظيفًا للمشروع
في Cursor: File ثم Open Folder على مجلّد جديد فارغ باسم المشروع. المجلّد «عالم» الوكيل؛ وما خارجه لا يراه.
ثبّت نظام التصميم قبل أي كود
أول ما تدخله في المحادثة وصفة التصميم كاملة: الألوان بأكوادها، وسلّم الخطوط، وسلّم المسافات، والظل الواحد. وإن انقسم مشروعك على عدّة محادثات فضعها في ملف قواعد المشروع لتبقى ثابتة.
فكّك رسالة العميل إلى مواصفات بيدك
اقرأ الرسالة مرتين: الأولى لتفهم ما قاله، والثانية لتلاحظ ما لم يقله. حوّل الأحاسيس إلى أرقام: «دافئ» يصبح كود لون، و«سريع» يصبح مللي ثانية، و«مهم» يصبح قاعدة أولوية. واكتب ذلك في specs.md داخل المجلّد؛ فهو تسليم مطلوب ومرجعك عند المراجعة.
اطلب خطة دون كود
أمرك الأول: «اقرأ هذه المواصفات واكتب لي خطة تنفيذ دون أي كود». راجع الخطة وصحّحها، ثم اطلب التنفيذ. الفصل بين التخطيط والتنفيذ يمنع نصف الكوارث.
نفّذ بالنموذج المناسب
البناء الأول بأمر مفصّل يذهب إلى Claude مع عبارة صريحة: «نفّذ المواصفات حرفيًّا بندًا بندًا، وإن كان بند غامضًا فاسألني قبل أن تفترض». والخلل الغامض يذهب إلى GPT بصيغة «شخّص واشرح أولًا». والتعديل الصغير يكفيه الوضع التلقائي.
اقرأ الفرق قبل القبول
الأخضر يُضاف والأحمر يُحذف. القبول دون قراءة مشروع يُبنى في الظلام. وإن أفسد التعديل شيئًا فارجع بـ Restore checkpoint؛ فهي شبكة الأمان التي تسمح لك بالتجربة بجرأة.
اختبر بشراسة، بقيم شريرة
حاول كسر الصفحة بنفسك: خانة فارغة، ورقم سالب، وحروف مكان الأرقام، وعنوان عربي طويل جدًّا، وضغط سريع عشر مرات متتالية. ما يكسرها هو أول ما سيفعله العميل.
صقل جمالي، ثم امسح
حين تعمل الوظيفة أعطِ الأمر الجمالي: هرمية أوضح، ومسافات أسخى، وزرّ إجراء رئيسي واحد. وآخر خطوة «لعبة المسح»: احذف كل عنصر لا يدافع عن وجوده.
المشاريع السبعة#
سبعة مجالات: ترجمة، وصحّة، وطعام، وتعليم، وفعاليات، ومالية شخصية، وخدمات. كل مشروع صفحة HTML واحدة بمهام متوسطة إلى صعبة، وفي رسالة كل عميل فخّ حقيقي مدفون. حاول تفكيك الرسالة بنفسك قبل أن تقرأ تحليل الفخاخ.
اختر مشروعك
العميلة: مكتب ترجمة. الصعوبة: ⭐⭐⭐، من 3 إلى 4 ساعات.
«سئمنا أن يسألنا كل عميل "بكم؟" فنظلّ نردّ على واتساب طوال اليوم. نريد صفحة يحسب فيها العميل بنفسه: يكتب عدد الكلمات، ويختار نوع الترجمة، وهل هو مستعجل. القانوني أغلى من العادي طبعًا، والمستعجل يزيد، والمراجعة اللغوية تزيد أيضًا. المهم أن يرى الرقم أمامه ويرسل إلينا الطلب على واتساب مباشرة دون أن يكتب شيئًا آخر.»
المهام: أربعة أنواع ترجمة بسعر مختلف للكلمة (عامة، قانونية، طبية، تقنية) بأسعار واقعية. ثلاثة مستويات تسليم كمضاعفات: عادي ×1، ومستعجل ×1.5، وخلال 24 ساعة ×2. مراجعة لغوية اختيارية تضيف 20٪. حدّ أدنى للطلب 150 جنيهًا يُطبَّق بعد كل الحسابات. فاتورة مفصّلة سطرًا سطرًا. حساب لحظي دون زرّ «احسب». زرّ واتساب برسالة معبّأة تلقائيًّا بتفاصيل الطلب والسعر.
معايير القبول: أي تغيير في المدخلات يحدّث الأرقام فورًا وصحيحًا. الرسالة العربية في رابط wa.me تصل سليمة. الحدّ الأدنى يعمل: عشر كلمات تعطي 150 لا 4 جنيهات. المدخلات الشريرة لا تُظهر NaN.
تحليل الفخاخ
- ترتيب العمليات: هل يُحسب الاستعجال على السعر الأساسي أم بعد المراجعة؟ الفرق مال حقيقي. إن لم تنصّ على الترتيب اختار الذكاء الاصطناعي وحده، وغالبًا خطأً. اكتب المعادلة كاملة.
- غموض «أغلى طبعًا»: العميلة لم تذكر أرقامًا. مهمّتك تحويل «أغلى» إلى جدول أسعار مكتوب تراجعه معها؛ فالرقم الذي اخترته وحدك هو الرقم الذي ستُلام عليه.
- النص العربي في الرابط: الرسالة يجب أن تمرّ على encodeURIComponent قبل وضعها في wa.me، وإلا وصلت مقطّعة أو فارغة. جرّب من الهاتف لا من الحاسوب فقط.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لحاسبة تسعير ترجمة. المدخلات: عدد الكلمات (رقم)، ونوع الترجمة (___ الأنواع الأربعة بسعر الكلمة لكلٍّ منها)، وسرعة التسليم (___ المضاعفات)، وخانة اختيارية للمراجعة اللغوية (+20٪). المعادلة بهذا الترتيب حرفيًّا: ___ (اكتب ترتيب العمليات بنفسك). حدّ أدنى ___ جنيه يُطبَّق في النهاية. اعرض فاتورة مفصّلة سطرًا سطرًا مع الإجمالي، والحساب لحظي دون زرّ. زرّ واتساب إلى الرقم ___ برسالة معبّأة تلقائيًّا بتفاصيل الطلب عبر encodeURIComponent. حصّن كل المدخلات ضد الفراغ والسالب والنص.
العميلة: طبيبة أسنان. الصعوبة: ⭐⭐⭐⭐، 5 ساعات.
«يتصل المريض فيجد السكرتيرة مشغولة، فيغلق ويذهب إلى عيادة أخرى. نريد صفحة يحجز منها بنفسه: يختار الطبيب ونوع الكشف واليوم والساعة المتاحة. نعمل من العاشرة صباحًا حتى الثامنة مساءً، والجمعة عطلة. الكشف نصف ساعة، والتنظيف ساعة، والتقويم 45 دقيقة. ويا حبّذا لو رأى ملخّص الحجز قبل التأكيد؛ فالناس تخطئ في اليوم كثيرًا.»
المهام: ثلاثة أطباء بتخصّصاتهم، ونوع الخدمة بمدّتها وسعرها. اختيار يوم من الأسبوع القادم مع تعطيل الجمعة والأيام الفائتة. توليد المواعيد تلقائيًّا بحسب مدّة الخدمة داخل ساعات العمل. مواعيد محجوزة مسبقًا تظهر معطّلة بوضوح لا مخفية. الاسم مطلوب، وهاتف مصري من 11 رقمًا يبدأ بـ 01. بطاقة ملخّص لحظية، وزرّ تأكيد مقفل حتى تكتمل البيانات، ثم رسالة بكود الحجز.
معايير القبول: «تنظيف ساعة» لا يُظهر موعد 7:30 مساءً. تغيير الطبيب يصفّر الموعد المختار. الضغط المتكرر على التأكيد لا يصنع حجزين.
تحليل الفخاخ
- المدّة × ساعات العمل: «نعمل حتى الثامنة» تعني أن آخر موعد ينتهي في الثامنة لا يبدأ فيها. ومع اختلاف المدد يتغيّر آخر موعد متاح مع كل اختيار؛ والأمر الساذج سيولّد المواعيد مرة واحدة فقط.
- الحالة المتّسخة: المستخدم يختار ثم يعود فيغيّر. كل اختيار سابق يتغيّر يجب أن يمسح ما بُني عليه، وإلا تأكّد حجز لطبيب غير موجود في ذلك اليوم. اطلبه بندًا مستقلًّا.
- غموض «المواعيد المتاحة»: متاحة بالنسبة إلى مَن؟ لا قاعدة بيانات ولا خادم. قرارك: بيانات حجوزات ثابتة داخل الملف كنموذج، واذكر ذلك للعميلة في رسالة التسليم حتى لا تظنّ أن الصفحة متّصلة بجدول العيادة الحقيقي.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لحجز مواعيد عيادة أسنان. الخطوات بالترتيب: الطبيب (___ ثلاثة بتخصّصاتهم)، ونوع الخدمة (___ الاسم والمدّة بالدقائق والسعر)، واليوم، ثم الموعد. ولّد المواعيد ديناميكيًّا من ___ صباحًا حتى ___ مساءً بحيث ينتهي آخر موعد قبل الإغلاق بمدّة الخدمة المختارة، وأعد توليدها كلما تغيّرت الخدمة. عطّل الجمعة والأيام السابقة لليوم. عرّف مصفوفة حجوزات ثابتة تظهر مواعيدها معطّلة بكلمة «محجوز». أي تغيير في خطوة سابقة يصفّر كل ما بعدها. زرّ التأكيد مقفل حتى تكتمل كل الحقول ويُعطَّل بعد الضغط الأول.
العميلة: صانعة محتوى طبخ على يوتيوب. الصعوبة: ⭐⭐⭐، من 3 إلى 4 ساعات.
«كل يوم عشرون تعليقًا يسألون السؤال نفسه: "أطبخ لثمانية أفراد، فكم المقادير؟". أريد صفحة للوصفة فيها زرّ يغيّر عدد الأفراد فتضبط المقادير نفسها. والطبّاخات يتُهن أثناء الطبخ فيسألن: "هل وضعت الملح أم لا؟"، فأريد شيئًا يعلّمن به ما أنهينه. والخطوات التي فيها وقت مثل "اتركيه 25 دقيقة" يكون فيها مؤقّت جاهز.»
المهام: وصفة حقيقية كاملة بـ 12 مقدارًا و8 خطوات على الأقل. تغيير عدد الأفراد من 2 إلى 12 وتحديث فوري. تقريب معقول لأقرب ربع أو نصف. تحويل وحدات تلقائي: أكثر من 3 ملاعق صغيرة تصبح كبيرة، وأكثر من 1000 جرام تصبح كيلو. مقادير لا تتحجّم («رشّة ملح»، «حسب الرغبة») تبقى كما هي. تعليم على المنجز مع شريط تقدّم وزرّ تصفير. مؤقّت يبدأ ويتوقّف ويتصفّر وينبّه بصريًّا.
معايير القبول: لا كسور مضحكة بعد عشرة تغييرات متتالية. «رشّة ملح» تبقى رشّة ملح. التحويل يحدث بعد التحجيم. مؤقّتان لا يتداخلان. العلامات على الخطوات لا تضيع عند تغيير عدد الأفراد.
تحليل الفخاخ
- الكسور: ثلث كوب × 7 ÷ 4 رقم بأربع خانات عشرية. دون قاعدة تقريب مكتوبة ستخرج مقادير يستحيل تنفيذها. حدّد: التقريب لأقرب 0.25، والعرض بكسور مقروءة.
- المقادير الثابتة: «رشّة ملح» و«زيت للقلي» لو ضُربت في معامل التحجيم خرجت نتيجة سخيفة. كل مقدار يحتاج علامة: يتحجّم أم لا. الذكاء الاصطناعي لن يفكّر في هذا وحده.
- المؤقّتات المتعدّدة: مؤقّتان في خطوتين، أو خروج من الخطوة والمؤقّت يعمل، تتلخبط الأرقام. اطلب إدارة صريحة: كل مؤقّت مستقل بمعرّفه، ويُلغى عند التصفير.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لوصفة طبخ تفاعلية. البيانات: مصفوفة مقادير، لكل عنصر الاسم والكمية والوحدة وعلامة منطقية scalable تحدّد هل يتحجّم (___ ألصق مقاديري). الوصفة أساسها ___ أفراد. زرّ لتغيير العدد من 2 إلى 12 يعيد حساب المقادير القابلة للتحجيم فقط، مع تقريب لأقرب 0.25 وعرض بكسور مقروءة. بعد التحجيم طبّق تحويل الوحدات: أكثر من 3 ملاعق صغيرة تصبح كبيرة، وأكثر من 1000 جرام تصبح كيلو. الخطوات ___ ، وكل خطوة زمنية لها مؤقّت مستقل بمعرّفه يبدأ ويتوقّف ويتصفّر. التعليم على المقادير والخطوات محفوظ في حالة مستقلة لا تتأثّر بتغيير العدد.
العميل: مدرسة لتعليم القيادة. الصعوبة: ⭐⭐⭐⭐، 5 ساعات.
«الطلبة يتدرّبون جيدًا على السيارة ثم يسقطون في الأسئلة النظرية. أريد صفحة يتمرّنون عليها: عشرة أسئلة بوقت محدّد مثل الامتحان تمامًا، وفي النهاية يرى أين أخطأ وما الصواب ولماذا. والأهم ألّا تأتي الأسئلة بالترتيب نفسه كل مرة؛ فالطلبة يحفظون الترتيب ويتراسلون: "الرابع اختر ب".»
المهام: عشرة أسئلة واقعية بأربعة اختيارات. سؤال واحد في الشاشة مع شريط تقدّم وزرّي السابق والتالي. مؤقّت عشر دقائق ظاهر دائمًا يسلّم تلقائيًّا. شاشة نتيجة بالدرجة والنسبة والتقدير (النجاح من 70٪). مراجعة كاملة بإجابتك والصواب وسطر تفسير. زرّ إعادة يخلط الأسئلة والاختيارات من جديد. تحذير قبل التسليم إن وُجدت أسئلة بلا إجابة.
معايير القبول: الخلط لا يفسد الإجابات الصحيحة (أعد خمس مرات وتأكّد). المؤقّت يتوقّف فعلًا بعد التسليم. الرجوع إلى سؤال سابق يُظهر اختيارك المحفوظ. الضغط المزدوج على «سلّم» لا يحسب الدرجة مرتين.
تحليل الفخاخ
- الخلط والفهرس: إن خُزّنت الإجابة الصحيحة كرقم ترتيب (الاختيار الثاني)، فأول خلط يجعل الصواب خطأً. والأخطر أن الصفحة ستبدو «سليمة» وهي تصحّح خطأً. خزّن الإجابة كقيمة لا كترتيب.
- المؤقّت الزومبي: مؤقّت لا يُلغى بعد التسليم يظلّ يعمل ويسلّم مرة أخرى وأنت في شاشة المراجعة. اطلب إيقافه صراحةً عند التسليم وعند إعادة البدء.
- غموض «وقت مثل الامتحان»: وقت لكل سؤال أم للاختبار كله؟ العميل لم يحدّد. أنت تقرّر، وتكتب القرار في المواصفات وتبلّغه في رسالة التسليم.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لاختبار من 10 أسئلة اختيار من متعدد في قواعد المرور. البيانات مصفوفة أسئلة، لكل سؤال النص و4 اختيارات، والإجابة الصحيحة مخزّنة كقيمة نصية لا كرقم ترتيب، وسطر تفسير. سؤال واحد في الشاشة مع شريط تقدّم وزرّي سابق وتالٍ يحفظان الاختيارات. مؤقّت ___ دقيقة للاختبار كله يظهر دائمًا ويسلّم تلقائيًّا، ويتوقّف نهائيًّا عند التسليم أو إعادة البدء. عند التسليم: تحذير إن وُجدت أسئلة بلا إجابة، ومنع التسليم المزدوج، ثم شاشة نتيجة بطلها الدرجة، ومراجعة كاملة. زرّ إعادة يخلط الأسئلة والاختيارات.
العميلة: منسّقة مؤتمر تقني. الصعوبة: ⭐⭐⭐⭐، 5 ساعات.
«المؤتمر ثلاثة أيام، وفيه أربعة مسارات تعمل في الوقت نفسه في قاعات مختلفة. العام الماضي طبعنا الجدول ورقًا فتاه الناس. نريد صفحة يفتحها الحاضر من هاتفه: يرى جدول اليوم، ويصفّي بالمسار، ويبحث باسم المتحدّث، ويعلّم الجلسات التي سيحضرها ويراها وحدها. وإن تعارضت جلستان فلينبّهه. وبعض المتحدّثين أجانب فأسماؤهم إنجليزية وسط الكلام العربي.»
المهام: 18 جلسة على الأقل بعنوانها ومتحدّثها ووقتها وقاعتها ومسارها. تبويبات للأيام الثلاثة. تصفية بالمسار وبحث لحظي يعملان معًا. زرّ «أضف إلى جدولي» وتبويب «جدولي» مرتّب بالوقت. تنبيه تعارض قبل الإضافة. عدّاد نتائج وحالات فارغة مرشدة. بطاقات مقروءة على الهاتف.
معايير القبول: البحث والتصفية والتبويب تعمل معًا دون أن يلغي أحدها الآخر. الأسماء الإنجليزية لا تقلب اتجاه السطر. التعارض يُكشف في التداخل الجزئي أيضًا. الجلسات المضافة تبقى مضافة بعد التنقّل.
تحليل الفخاخ
- منطق التعارض: أغلب المحاولات تقارن وقت البداية فقط فتفوّت الجلسة التي تبدأ في منتصف أخرى. القاعدة الصحيحة: تعارض إذا كانت بداية الأولى أقل من نهاية الثانية، وبداية الثانية أقل من نهاية الأولى. اكتبها في الأمر حرفيًّا.
- الأسماء الإنجليزية: اسم إنجليزي وسط سطر عربي مع وقت بالأرقام فوضى اتجاهات. الحل: الصفحة dir="rtl"، واسم المتحدّث الإنجليزي في عنصر dir="ltr".
- الحالة في الـ DOM: إن خُزّنت حالة «مضاف» في شكل الزرّ فقط، ضاعت عند إعادة بناء القائمة. خزّن الاختيارات في مصفوفة مستقلة تُبنى منها الواجهة في كل مرة.
- هل يلغي التبويب التصفية؟ العميلة لم تقل. القرار الأكثر توقّعًا: تبقى التصفية والبحث فعّالين عند الانتقال بين الأيام؛ فاكتب القرار وبلّغه.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لدليل جلسات مؤتمر. البيانات: مصفوفة 18 جلسة، لكل منها العنوان والمتحدّث واليوم ووقت البداية والنهاية والقاعة والمسار (___ ألصق بياناتي). تبويبات للأيام الثلاثة، وتصفية بالمسار (___ الأربعة)، وبحث لحظي في العنوان واسم المتحدّث، والثلاثة تعمل معًا. اسم المتحدّث الإنجليزي داخل عنصر dir="ltr". زرّ «أضف إلى جدولي» يخزّن معرّف الجلسة في مصفوفة مستقلة تُبنى منها الواجهة. التعارض: جلستان تتعارضان إذا كانت بداية الأولى < نهاية الثانية وبداية الثانية < نهاية الأولى؛ نبّه قبل الإضافة. حالات فارغة برسائل مرشدة، وبطاقات على الهاتف.
العميل: موظف في التاسعة والعشرين. الصعوبة: ⭐⭐⭐⭐⭐، 6 ساعات فأكثر.
«أقبض أول الشهر، ولا يأتي يوم العشرين إلا وأنا أستدين. المشكلة أنني لا أعرف أين ذهب المال أصلًا. أريد شيئًا أفتحه من الهاتف وأسجّل فيه المصروف وأنا واقف في المتجر، وأضع ميزانية الشهر وأرى كم استهلكت منها، والأهم أن أعرف فيمَ يُنفق بالضبط. وطبعًا إن أغلقت الصفحة وفتحتها فلا أريد أن أجد كل شيء قد مُسح.»
المهام: إضافة مصروف بالمبلغ والتصنيف (ستة تصنيفات) والتاريخ وملاحظة. ميزانية شهرية وشريط تقدّم يتغيّر لونه عند 75٪ وعند التجاوز. مؤشرات: الإجمالي، والمتبقّي، ومتوسط اليوم، والمتاح لكل يوم في باقي الشهر. توزيع بالتصنيف بأشرطة نسبية دون مكتبات. تصفية بالتصنيف والشهر وترتيب. تعديل وحذف مع تأكيد. حفظ محلي بقراءة آمنة. الجدول يتحوّل إلى بطاقات على الهاتف.
معايير القبول: البيانات باقية بعد إعادة الفتح. التجاوز يُعرض «تجاوزت بـ 120 جنيهًا» لا «المتبقّي: -120». الفتح الأول حالة فارغة مرشدة لا شاشة بيضاء. لا قسمة على صفر أول الشهر أو آخره.
تحليل الفخاخ
- القسمة على صفر: «المتاح لباقي الشهر» يُقسم على عدد الأيام المتبقية؛ وفي آخر يوم يصبح المقام صفرًا والنتيجة Infinity. حدّد السلوك كتابةً قبل طلب الكود.
- الحفظ المحلي: بيانات قديمة أو ناقصة في التخزين تكسر الصفحة عند الفتح. اطلب قراءة داخل try/catch تُرجع قائمة فارغة عند أي خطأ؛ فالذكاء الاصطناعي لا يفعلها من نفسه.
- «رسم بياني»: أول ما تقول «شارت» سيجلب الوكيل مكتبة من الإنترنت، والصفحة يجب أن تكون مكتفية ذاتيًّا. اطلب أشرطة CSS بعرض محسوب، دون مكتبات.
- الجدول على 390px: خمسة أعمدة على شاشة هاتف كارثة، والحل ليس تصغير الخط. اطلب تحويل كل صف إلى بطاقة تحت عرض معيّن، من البداية لا في النهاية.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لمتتبّع مصروفات شهري. نموذج إضافة: المبلغ والتصنيف (___ ستة تصنيفات) والتاريخ وملاحظة اختيارية، مع تحصين كامل للمدخلات برسائل عربية. حقل ميزانية شهرية وشريط تقدّم يتغيّر لونه عند 75٪ وعند التجاوز، ويُعرض التجاوز بصيغة «تجاوزت بـ X» لا برقم سالب. مؤشرات: الإجمالي والمتبقّي ومتوسط اليوم والمتاح لكل يوم في باقي الشهر، مع سلوك محدّد حين يكون المقام صفرًا: ___ . توزيع بالتصنيف بأشرطة CSS دون أي مكتبة. حفظ في localStorage وقراءة داخل try/catch تُرجع قائمة فارغة عند الخطأ. تحت 600px يتحوّل كل صف إلى بطاقة.
العميل: صاحب ورشة صيانة سيارات. الصعوبة: ⭐⭐⭐⭐⭐، 6 ساعات فأكثر.
«كل عرض سعر نفتح له ملف وورد قديمًا فنمسح ونعدّل، وكل مرة ننسى تغيير رقم العرض أو التاريخ، ومرة ذهب إلى عميل وعليه اسم عميل آخر؛ فضيحة. أريد صفحة أكتب فيها بيانات العميل والسيارة والبنود، فتحسب وحدها وتُخرج ورقة رسمية أطبعها أو أحفظها PDF. وانتبه: عندنا نوعان من البنود، قطع غيار ومصنعية، والعميل الدائم نأخذ منه أقل فنحتاج مكانًا للخصم.»
المهام: بيانات ثابتة للورشة وحقول للعميل والسيارة. رقم عرض وتاريخ تلقائيان قابلان للتعديل. بنود ديناميكية بنوعها ووصفها وكميتها وسعرها. إجمالي منفصل للقطع وآخر للمصنعية. خصم بنسبة أو بمبلغ ثابت، وضريبة 14٪ بترتيب واضح. ضمان وسريان عرض وشروط دفع. وضع طباعة A4 نظيف يخفي الأزرار ويعرض الحقول نصًّا عاديًّا ولا يقطع الصف بين صفحتين.
معايير القبول: حذف بند من المنتصف يُبقي الإجماليات صحيحة. الأرقام بفواصل آلاف وخانتين عشريتين في كل مكان. خصم 10٪ وخصم 100 جنيه يعطيان نتيجتين صحيحتين. عرض من 15 بندًا يُقسم على الصفحات دون قطع صف.
تحليل الفخاخ
- الخصم قبل الضريبة أم بعدها؟ العميل لم يقل، والفرق مال. القرار الصحيح محاسبيًّا: الخصم على الإجمالي قبل الضريبة، والضريبة على الصافي. اكتبه في المواصفات واذكره في رسالة التسليم.
- حذف بند من المنتصف: إن اعتمد الحذف على ترتيب البند في المصفوفة، اختلّ كل ما بعده. اطلب معرّفًا فريدًا ثابتًا لكل بند، وإعادة حساب كاملة بعد أي تغيير.
- الطباعة: الحقول تُطبع بإطاراتها فتبدو الورقة استمارة لا عرض سعر. أسلوب الطباعة يجب أن يزيل الحدود والخلفيات ويمنع قطع الصفوف.
- التقريب: جمع بنود فيها كسور قد يختلف عن جمع الأرقام الظاهرة، والعميل سيعدّها بالآلة الحاسبة. حدّد: التقريب عند العرض فقط، والحساب على القيم الكاملة.
أنشئ صفحة HTML واحدة مكتفية ذاتيًّا، عربية RTL، لمولّد عرض سعر لورشة صيانة سيارات. رأس ثابت ببيانات الورشة ___ وحقول للعميل والسيارة (الموديل، سنة الصنع، رقم اللوحة، الكيلومترات)، ورقم عرض وتاريخ اليوم تلقائيان قابلان للتعديل. جدول بنود ديناميكي، لكل بند معرّف فريد ثابت لا يعتمد على الترتيب، والنوع (قطعة غيار / مصنعية) والوصف والكمية وسعر الوحدة والإجمالي. إجمالي منفصل للقطع وآخر للمصنعية. احسب بهذا الترتيب حرفيًّا: المجموع، ثم الخصم (نسبة أو مبلغ)، ثم ضريبة 14٪ على الصافي. التقريب عند العرض فقط بخانتين وفواصل آلاف. أسلوب طباعة A4 يخفي الأزرار ويزيل إطارات الحقول والخلفيات الداكنة ويمنع قطع الصفوف.
معيار التقييم: لا يوجد «الصفحة تعمل»#
التقييم من مئة. ولاحظ الأوزان: سجل أوامرك وحده أثقل من التصميم؛ لأنه المهارة التي تبقى معك حين تتغيّر الأدوات.
| المحور | ما الذي يُقاس بالضبط | الدرجة |
|---|---|---|
| التنفيذ الوظيفي | كل مهمة في التذكرة منفّذة، ومعايير القبول متحقّقة بندًا بندًا، والحسابات صحيحة | 30 |
| معايير الجمال | بطل واحد في كل شاشة، وتباين WCAG AA، ومحاذاة على شبكة، وقاعدة 60-30-10، وخط واحد بسلّم ثابت، ومسافات بمضاعفات 8، وحركة عند التفاعل فقط، ولعبة المسح | 25 |
| رحلة الأوامر | هل المحاولة الثالثة أذكى من الأولى؟ هل فصلت التخطيط عن التنفيذ؟ هل اخترت النموذج بحسب المهمة وكتبت السبب؟ هل قرأت الفرق واستخدمت نقطة رجوع؟ | 20 |
| التحصين والحالات الحدّية | خانة فارغة، وقيمة سالبة، وحروف مكان أرقام، ومحتوى عربي طويل جدًّا، وحالة فارغة مفيدة، وضغط متكرر سريع، وصفر NaN | 15 |
| التسليم والتوثيق | ملف واحد يعمل دون إنترنت، وspecs.md فيه ترجمتك لكلام العميل، ورسالة تسليم مهنية تشرح القرارات | 10 |
قوائم التحقّق قبل التسليم
قائمة الجودة البصرية
قائمة سير العمل
التسليم: خمسة أشياء في مجلّد واحد#
ملف المشروع
ملف HTML واحد باسم المشروع، مكتفٍ ذاتيًّا ويعمل بالنقر المزدوج.
المواصفات
ترجمتك لرسالة العميل: الألوان بأكوادها، والقواعد بأولوياتها، والغموض الذي حسمته ولماذا.
سجل الأوامر
كل أمر جرّبته بالترتيب، والنموذج، وما خرج، وما غيّرته في التالي. أثمن ملف في التسليم.
رسالة التسليم للعميل
فقرة أو اثنتان بعربية مهنية: ما الذي أُنجز، وما القرارات في النقاط الغامضة، وما الذي يحتاج قرارًا منه. دون مصطلحات تقنية.
سطران
ما أصعب لحظة واجهتك في Cursor؟ وما الذي ستفعله بطريقة مختلفة لو بدأت من جديد؟
اختبر فهمك
في اختبار بأسئلة مخلوطة الاختيارات، كيف تُخزَّن الإجابة الصحيحة؟
رقم الترتيب يتغيّر مع كل خلط، فيصير الصواب خطأً والصفحة تبدو سليمة.
اختبر فهمك
جلسة من 10:00 إلى 11:00، وأخرى من 10:30 إلى 11:30. متى نعدّهما متعارضتين؟
التداخل الجزئي تعارض أيضًا، والمقارنة بوقت البداية وحده تفوّته.
اختبر فهمك
العميل لم يحدّد هل الخصم قبل الضريبة أم بعدها. ما التصرّف المهني؟
الغموض الذي تحسمه بصمت هو الغموض الذي ستُلام عليه.