Imported from m7md-d/T3lm (.claude/skills/curriculum-site-design/SKILL.md). Install upstream with npx skills add m7md-d/T3lm --skill curriculum-site-design. Copyright stays with the author (MIT).

Curriculum Site Design

اقرأ أولاً: ../../invariants.md (الثوابت)، وأسلوب المنهج المُعلَن في curriculum.json (../../profiles/<name>.md)، وcurriculum-kit (العدّة). هذه المهارة تحكم كيف يصير المنهج موقعاً.

اقرأ evidence/findings.md قبل أن تفتح محرّراً

الأدلّة ليست خلفيةً ثقافية؛ هي مواصفة. وأكثر ما يُخالَف منها أربعة، وكلُّها تُخالَف بحسن نيّة لأن التصميم «يبدو نظيفاً»:

المبدأ	يقرّر	المخالفة المعتادة
التلاعب مقابل المشاهدة (d = 0.86 · d = 0.17)	مخطّطٌ يُقلَب بيد القارئ	موقعٌ كلُّه عرضٌ ساكن أنيق
التقارب المكانيّ (g = 0.63)	معنى الحقل بجانب قيمته، والتشريح مرسًى إلى سطره	تشريحٌ في قائمةٍ تحت البلوك
التماسك (d ≈ 0.86)	حذف العنصر الزخرفيّ	حركةُ دخولٍ ورسمٌ لا يعلّم
التقطيع بتحكّم القارئ	لقطةٌ ينتقل منها بيده	صفحةٌ طويلة، أو تقدّمٌ تلقائيّ

وهذه مبادئ لا ترتيب. أرقامها من مقارنات ومهامّ مختلفة، فلا يُقسَم رقمٌ على رقمٍ («خمسة أضعاف») ولا تُرتَّب ميزات الواجهة بمقارنتها. والمقروء من كل صفٍّ اتجاهُه وحده.

والتفاعل غير المقفل بلا سقفٍ عدديّ ولا يدفع من ميزانية البوّابات — وله كلفةٌ ذهنية، فيحمل كلُّ تفاعلٍ سبباً: تغييرُ قيمة، أو نقلُ موضع قراءة، أو مقارنةُ حالتين، أو تتبّعُ علاقة. ولا يُحشَد ليبدو الموقع حيّاً.

ويُسلَّم مع الموقع جدولُ مقابلةٍ صريح: كل صفٍّ في findings.md يخصّ العرض، وما استُوفي منه وما لم يُستوفَ بعد بعلامة ⚠. تسليمٌ بلا هذا الجدول ناقص. والاعتراف بالنقص أصدق من ادّعاء التغطية — لكنه لا يُغني عن سدّه.

الأسلوب يحدّد بنية الموقع. حقل «قالب الدرس» في الأسلوب هو تخطيط الصفحة، وحقل «الحلول» يحدّد وجود زرّ الكشف من عدمه، وحقل «الكشف التدريجي» يحدّد الأقاليم المختومة. لا تفترض أسلوباً — اقرأه.

القانون الحاكم: الاشتقاق

الموقع ليس ثيماً فوق المنهج. كل قرار فيه — بنيةً ولوناً وحركةً ومكوّناً وتفاعلاً — مردودٌ إلى شيء موجود فعلاً في ماركداون المنهج. ما لا تجد له سطراً في جدول الاشتقاق، احذفه.

هذا ليس شعاراً؛ هو إجراء. قبل كتابة أي CSS أو مكوّن، ابنِ جدول الاشتقاق:

القالب الكامل ومثال محلول بالتفصيل في references/derivation.md. اقرأه قبل أي شيء آخر.

اختبار القبول

انقل التصميم إلى منهج آخر مختلف الموضوع. النتيجة المطلوبة: أن يبدو غير منطقيّ — لا أقبح فقط.

إن بدا «مقبولاً لكن ما يناسب»، فتصميمك عامّ وقد فشل. إن بدا بلا معنى (مكوّنات تشير إلى بنى غير موجودة، ألوان تصنّف ما لا يُصنَّف، حركة تحاكي آلية غائبة) فقد نجحت.

الركائز الإحدى عشرة

١. البنية تُستخرَج من الماركداون، ولا تُكتب في الكود

الماركداون في regions/ وappendix/ هو المصدر الوحيد. الموقع يُصرِّف ولا يُفرِّع: يقرأ الملفات ويستخرج منها البنية برمجياً.

• ممنوع نسخ نصّ من المنهج إلى مكوّن.
• ممنوع اختراع بنية غير موجودة في النصّ.
• إن احتاج الموقع بنية، فالحلّ أن يكتسبها المنهج أولاً كعلامة في الماركداون، ثم يستخرجها الموقع.

ومنه عمق العناوين. فصلٌ فيه ### ذو أجزاء: ## جزءٌ و### لقطة. وفصلٌ بلا ### لقطاته ## مباشرةً. يُقاس من الملفّ ولا يُعلَن في الكود، فيبقى مضيفاً جزءاً إلى فصلٍ عملاً في الماركداون وحده.

٢. العلامة المتكرّرة ⇒ مكوّن. المرّة واليتيمة ⇒ تنسيق

علامة تتكرّر عشرين مرة بشكل قابل للتحليل برمجياً تستحقّ مكوّناً. ظهور مرة أو مرتين يبقى تنسيقاً عادياً.

اعدّها فعلياً قبل أن تقرّر: grep -c هو معيار القرار، لا الذوق.

٢ب. الحقل الثابت ليس معلومة

قائمةٌ من اثني عشر عنصراً، وتحت كل عنصرٍ نفس الحقل بنفس القيمة («الإقليم» تحت كل بطاقة) — ذلك الحقل زخرفة، وحذفه لا يُنقص شيئاً.

والفحص عدديّ لا ذوقيّ: عدد القيم المميّزة ÷ عدد العناصر. فإن كان ١⁄ن فالحقل يُحذَف، ومكانه يُملأ بما يفرّق بين العناصر أو يبقى فارغاً.

وهنا بالضبط تولد القوالب: مكوّنٌ عامّ يُستنسخ ن مرّة فيبدو مرتّباً وهو فارغ. والسؤال الذي يخرجك منه واحد: ما الذي يجعل هذا العنصر غير الذي يليه في نظر القارئ؟ والجواب في المحتوى دائماً — أوّل جملةٍ في الفصل، أو الادّعاء الذي يفتح به، أو ما يعود إليه من سابقه. نقلُه إلى البطاقة يجعل الاثني عشر اثني عشر، لا واحداً مكرّراً.

ولا يُشترى التمييز بالزينة. لونٌ لكل بطاقة أو أيقونةٌ لكل فصل: تمييزٌ بلا معلومة، وهو القالب نفسه بثوبٍ آخر.

٣. الوحدة «لقطة»، لا صفحة طويلة

اللقطة = ادّعاءٌ واحد + دليله + مكسبه. حدُّها: ≤ ٢٥٠ كلمة · ≤ بلوكان · ≤ ٣ عناصر جديدة — والأشدّ يحكم. والمُلزِم عملياً هو البلوكات لا الكلمات: النثر يكون معتدلاً والصفحة خانقةً من تراكم الكود.

لماذا: القارئ يقدّر الكلفة قبل أن يبدأ. صفحةٌ لا يُرى قعرها تُستثقَل كما يُستثقَل فيلمٌ بساعتين، بينما ثلاث ساعات من لقطاتٍ قصيرة تمرّ بلا شعور — لأن الالتزام المرئيّ صغير، لا لأن المحتوى قصير (اجتهاد أ-٣).

خمس قواعد:

1. نهاية اللقطة مرئيةٌ من بدايتها. شاشةٌ أو شاشتان. لا تمريرَ نحو مجهول.
2. تنتهي بمكسب — رقمٌ يظهر، أو اعتقادٌ يُهدَم، أو «لهذا». بلا مكسب تُدمَج أو تُحذَف.
3. الانتقال بضغطةٍ واحدة، في نفس الموضع دائماً. زرٌّ ومفتاح. لا قائمة ولا بحثٌ عن الموضع.
4. لا تقدّم تلقائيّ. هذا هو الحدّ الأخلاقيّ: أذى المقاطع القصيرة في التشغيل التلقائيّ والتمرير اللانهائيّ، لا في القِصَر. نأخذ القِصَر ونترك الفخّ. (ويسنده أثر التقطيع: d = 0.50–0.70، مشروطاً بأن الانتقال بيد المتعلّم.)
5. للإقليم أرضيةٌ مرئية ينغلق عندها. لا خلاصة لا نهائية.

وما تجاوز ثلاثين لقطة يُقسَّم أجزاءً — والفصل صفر أوّل من يحتاجه. أثرٌ من خمسين سطراً بلا معالم يُقرأ قائمةً لا طريقاً. وثلاث قواعد للأجزاء، كلّها من نفس منطق الركيزة ١٠: لا يُعرَض جزءٌ في الأثر قبل بلوغه · يُسمّى الجزء القادم فوق اللقطة القادمة لأن عبوره حدثٌ يُعلَن لا مفاجأة · مقدّمة الجزء عند لقطته الأولى فقط، وترويسةٌ متكرّرة ضوضاء.

والتقطيع يُصرَّف من الماركداون — يُستخرَج من العناوين والبلوكات برمجياً، ولا يُكتب باليد ولا يُنسَخ (ثابت ٤). والماركداون يبقى ملفاً واحداً متّصلاً يُقرأ وحده.

٣ب. الواجهة الرئيسية مدخلٌ مريح، وتُعطى جهد إقليمٍ كامل

الصفحة الأولى ليست فهرساً بروابط، وليست أوّل درس. هي صفحة هبوط: مكانٌ يقف فيه من لا يعرف شيئاً بعد، فيخرج منه بصورةٍ عن الموضوع، ورغبةٍ في الدخول، وطريقٍ واضحٍ يبدأ منه. وهي أكثر صفحةٍ يراها من لن يكمل.

والترتيب فيها ليس ذوقاً:

والمحرَّم الأوّل: جدارُ كودٍ في وجه الداخل. بلوكٌ طويل قبل أن يعرف القارئ ما هذا الموضوع أصلاً يقرأ تهديداً لا دعوة. وإن كان الكود هو موتيف الصفحة — وقد يكون — فيُعرَض مطويّاً: لمحةٌ من أسطرٍ قليلة، وزرٌّ يفتحه لمن أراد.

والمحرَّم الثاني: مصطلحٌ مبهم في أوّل شاشتين. كل اسمٍ لا يعرفه من لم يبدأ بعد يُؤجَّل أو يُشرَح بجملته. وقياسٌ عمليّ: أعطِ الشاشة الأولى لمن لا يعرف الموضوع وقل له صف لي ما ستتعلّمه — فإن لم يقدر فالمدخل فشل.

ويبقى ما سبق:

• مشهد افتتاحي له حضور: مقياس طباعي كبير حقيقي، وموتيف الموضوع حاضر من أول شاشة، وحركة دخول متدرّجة تُنهي نفسها ولا تتكرّر.
• تعرض جوهر المنهج لا قائمة فصوله: إن كان للمنهج بديهيات أو محاور أو خصوم، فهي مادة الصفحة الأولى معروضةً بصرياً، لا سطراً في مقدّمة.
• لحظة تفاعل واحدة على الأقلّ تُثبت أن الموقع حيّ: شيء يُقلَب أو يُشغَّل أو يستجيب — لا مجرّد روابط.
• تخبر القارئ أين هو من الرحلة: ما فُتح وما خُتم، وأين توقّف إن عاد.
• تُصمَّم آخراً: بعد أن يستقرّ المحتوى وتُعرف روحه. الرئيسية المبنيّة أولاً تصير قالباً عامّاً بالضرورة.

المعيار: لقطة شاشة للصفحة الأولى وحدها يجب أن تدلّ على الموضوع بلا قراءة نصّها. إن صلحت لأي منهج آخر، فهي فهرس لا واجهة.

٣ب-٢. الدخول تدريجيّ — والعمق يُستحقّ لا يُصَبّ

العمق وقودٌ بلا سقف (الأسلوب §٥) — بعد أن يملك القارئ ما يعلّق عليه. وقبل ذلك هو ضجيج. والفرق بين المنهج العميق والمنهج المتعالي ليس في المادّة، بل في متى تُقدَّم.

ثلاث قواعد، ومقياسٌ واحد:

1. لا مصطلح قبل حاجته. الاسم يدخل حين يصير للقارئ سؤالٌ يجيب عنه. وذكرُه قبل ذلك — «سنرى لاحقاً overlayfs وseccomp وshim» — يعطي إحساس تقدّمٍ زائفاً للكاتب، وإحساس تخلّفٍ حقيقياً للقارئ.
2. جملةٌ واحدة لكل اسمٍ يدخل مبكّراً. إن اضطررتَ إلى ذكره، فبتعريفٍ في موضعه، لا بإحالةٍ إلى فصلٍ بعيد.
3. الشاشة الأولى بلا دَين. كل ما فيها يُفهَم بما يملكه القارئ الآن.

والمقياس: مرِّر إصبعك على أوّل شاشتين وعُدّ الأسماء التي لا يعرفها من لم يبدأ. أكثر من ثلاثة ⇒ المدخل عالٍ، ويُخفَض بتأجيلٍ أو بجملةِ تعريف.

وهذا لا يخفّف الصعوبة، يؤخّرها. المنهج يبقى كاشفاً للحقائق وهادماً للاعتقادات — والفرق أن القارئ يصل إلى الحقيقة ومعه ما يقيسها به.

٣ج. نصّ الواجهة بارد

النصّ المكتوب في الكود — عنوانٌ، وزرّ، ووسم، وسطرٌ تحت عنوان — يصف ما هو وما يفعله. يُقرأ مرّةً في ثانية، ولا يُعاد قراءته.

وعلامةٌ واحدة تكشف الانزلاق: التعريف بالنفي («ليست قواعد تُحفظ، بل ادّعاءات» · «س، لا ص»). والفحص: هل النفي يستبعد شيئاً يتوقّعه القارئ فعلاً؟ فـ«هذا مفسّر في متصفّحك، لا مترجم Go» معلومةٌ تمنع خطأً واقعاً. أمّا التقابل الذي يُصنَع لتحسين الوقع فزينة — والجملة تصحّ بحذف نصفها الأول، فاحذفه.

والنبرة الأدبية موضعها المتن، يكتبها المؤلّف بأسلوبه هناك.

٤. بنية النصّ تصير ملاحة

حين ينتهي كل إقليم بـ«الباب الذي فتحتَه» و«الباب المغلق» — فالباب المغلق هو رابط الإقليم التالي. لا تضع pager عاماً بجانبه؛ اجعل بنية النصّ نفسها هي الملاحة.

ابحث دائماً عن العنصر النصّي الذي يؤدّي وظيفة ملاحية، واستعمله بدل اختراع عنصر.

٥. القيود السالبة مشتقّة أيضاً — وهي أقوى دليل على الاشتقاق

ما تمنعه مشتقٌّ كما تُشتقّ ما تضيفه:

• منهج يقول «الاستقصاء النشط يحرق نواةً بلا تقدّم» ⇒ لا دوّارة (spinner) في الموقع إطلاقاً؛ كل مؤشّر شريط ميزانية أفقيّ.
• منهج يقول «لا حلول في هذا المنهج» ⇒ لا زرّ «اكشف الحلّ» في الموقع كلّه؛ أي reveal كان سيكذب على القارئ.
• منهج يحذّر «لا تفتح هذا قبل الإقليم ٠٩، فيه حرق» ⇒ حجب فعليّ يُرفع عند البلوغ أو بإذن صريح.

سجّل هذه في الجدول بصفوف صريحة، ووثّق ما حُذف ولماذا في نهايته.

٦. الحركة مشتقّة وبيد القارئ، وإلا فلا حركة

حظرٌ مطلق للحركة التلقائية. الرسم المتحرّك الذي يعمل وحده لا يتفوّق على تسلسلٍ ساكن، ويضرّ غالباً — أثر المعلومة العابرة: تمرّ قبل أن تُعالَج، وتوهم بالفهم.

تنفع بثلاثة شروط مجتمعة: مادّةٌ زمنية بطبيعتها (تزامن، تغيّر حالة) · تحكّمٌ كامل للقارئ خطوةً خطوة · تُظهر التغيّر المفهوميّ لا الزخرفة.

وأثر التماسك يضربها مرّةً ثانية: d ≈ 0.86 لحذف العنصر الزخرفيّ. حركةُ دخولٍ لا تعلّم شيئاً: تُحذَف، لا تُشتَقّ.

والزمن المعروض ليس الزمن الحقيقيّ. مدّة انتقال عنصرٍ على الشاشة لا تمثّل زمن النظام إلا إذا استند العرض إلى توقيتٍ مسجَّل وأعلن مقياسه — ولا يُساوى بين طبقتين لأن سهميهما استغرقا المدّة نفسها.

prefers-reduced-motion محترمٌ في كل حال.

٧. اللون عائلات مشتقّة — بحدٍّ أربعة وقناةٍ ثانية

أربع فئاتٍ لونية دلالية بحدٍّ أقصى. المعالجة قبل-الانتباهية تميّز ٤–٥ فئات ثم يصير اللون ضوضاء (d > 1.50 لسرعة المعالجة تحت أربعة، أدلّة §٨).

وكل لونٍ دلاليّ يحمل قناةً ثانية — واحدة فقط: شكل، أو نمط، أو وسمٌ نصّيّ. ٨٪ من الذكور لا يميّزون الأحمر من الأخضر، ومعيار WCAG 2.2 §1.4.1 يمنع أن يكون اللون الوسيلة الوحيدة لحمل المعنى. ولا ثالثة: جمع أيقونةٍ ووسمٍ وحدٍّ ملوّن معاً يُنتج ضوضاءً بصرية (d = −0.32).

والخصائص البرمجية لقارئ الشاشة ليست قناةً ثانية بصرية، ولا تُتّخذ ذريعةً لإضافة ثالثة.

واللون الدلاليّ معنًى لا زينة — فضياع تمييزه ضياع معلومة، لا قبحٌ فقط.

لا تختر لوحة «جميلة». اقرأ كيف يصنّف المنهج نفسه (جذع/فروع، محاور، مسارات متوازية) واشتقّ عائلات اللون من ذلك التصنيف.

وحين يقول المحتوى إن عنصراً حاصلُ ضرب عنصرين، اجعل لونه مزيجاً حرفياً من لونيهما. هذا النوع من الاشتقاق هو ما يجعل التصميم غير قابل للنقل.

ثابت لا يتغيّر: دارك مود دائماً، في كل موضوع، بلا استثناء. التمييز بين المواضيع باللون والخطّ والنسيج والموتيف داخل الظلام، لا بالسطوع.

٧ب. ملفّ توكنز واحد هو مصدر الحقيقة البصري

لكل منهج ملفّ توكنز عالميّ واحد (site/src/styles/tokens.css) فيه اللون المهيمن والثانوي والدلالي والأسطح والنصوص والخطوط ونصف القطر. كل ما عداه — مكوّنات، أوراق أنماط، بلوكات، محرّر — يحيل ولا يعرّف.

وضع قيمة لون حرفية خارج ذلك الملف محرَّم. يفحصه node tools/doctor.mjs ويفشل بالملفّ والسطر.

السبب ليس ترتيباً: اللون الحرفيّ يكسر الاشتقاق بصمت. لا يظهر خطؤه إلا يوم تغيّر الثيم فلا يتبعه شيء، وحينها تطارده في عشرين ملفاً. ومع توكنز واحدة، تغيير --ck-primary وحده يعيد صبغ الموقع كلّه — بما فيه توكنة المحرّر.

والمحرّر مثال العقد المطبَّق: @t3lm/kit/editor/derive.css يشتقّ كل --ck-ed-* من هويتك، فلا تعرّف منها شيئاً.

٨. التفاعل يُحقَن عند الخطوة التي يستحقّها — ويُفرَض آلياً

المكوّن التفاعلي (مختبر، محاكاة، مشغّل كود، مصوّر ذاكرة) لا يُجمَع في صفحة منفصلة. يُحقَن بعد الخطوة التي أنتجت ادّعاءه بالضبط.

يُعرَّف بسجلّ فيه: id، الإقليم، after (مقطع من عنوان الخطوة)، الاسم، الادّعاء الذي يقلبه. وفحصٌ آليّ يفرض أن يطابق كلٌّ منها خطوة واحدة بالضبط — لا صفر ولا اثنتين. بلا هذا الفحص تنجرف المختبرات عن مواضعها بصمت عند أول تعديل في النصّ.

٨ب. زرّ التشغيل ادّعاء — يُفحَص قبل أن يُعرَض

إن نفّذ الموقع الكود في المتصفّح — مفسّرٌ في WASM غالباً — فهو ليس الأداة الحقيقية، والفرق لا يُخمَّن. شغّل كل بلوكٍ على المنفّذ نفسه وقارنه بالأداة قبل أن تعطيه زرّاً.

وقع هذا فعلاً: مفسّر Go في المتصفّح يطبع النوع الأساسيّ بدل النوع المسمّى، ويخطئ في مجموعات الطُّرق — وهما درسا نصف فصل الأنواع. زرٌّ يعطي جواباً معكوساً أسوأ من لا زرّ.

والفرق يُعلَن في المتن لا يُخفى، ويُعاد الفحص عند كل ترقيةٍ للمنفّذ. والفحص آليّ: انتزع البلوكات من الماركداون، شغّلها على الاثنين، وقارن.

٨ج. كل بلوكٍ يُعرَض مُلوَّنٌ بمحلّلٍ حقيقيّ — والتلوين مشتقٌّ كغيره

بلوك كودٍ بلا تلوين عيبٌ لا تقشّف. القارئ يتتبّع سطراً في مخرَجٍ من عشرين سطراً، والرمادُ الواحد يجعل التتبّع بحثاً. والقاعدة شقّان:

١) المحلّل من CodeMirror ما أمكن. لا تلوين بتعبيراتٍ نمطية مرتجَلة: تُخطئ عند أوّل سلسلةٍ فيها #، ثم يقرأ القارئ لوناً يكذب.

٢) وما ليس كوداً يُلوَّن أيضاً. المخرَج المسجَّل، والسجلّ، وحقول البايت، وجدول الأرقام: كلُّها نصٌّ يُتتبَّع. ولها معجمُ رموزٍ مشتقٌّ من الموضوع نفسه — لا لوحة syntax عامّة: منهج نواةٍ يلوّن المسار والنداء ورمز الخروج، ومنهج شبكاتٍ يلوّن الحقل والعنوان والراية.

والتلوين يدخل ميزانية اللون ولا يفلت منها: رموز البلوك تُصبَغ من نفس العائلات الأربع ومن سلّم النصّ (سطوعاً ووزناً)، ولا تفتح فئةً خامسة. وإن لم تجد للرمز عائلةً يسكنها، فهو لا يستحقّ لوناً — يستحقّ سطوعاً.

وأصدق اشتقاقٍ هنا أن يكون لونُ الرمز هو لون مالكه. حين يصنّف المنهج مصادر الحقيقة (النواة · المواصفة · الأداة · بيئتك)، يأخذ كلُّ رمزٍ لون الجهة التي تملكه، فيصير التلوين درساً لا زينة: يقرأ القارئ سطر مخرَجٍ فيرى بلونه من يضمن أيَّ جزءٍ منه.

والتقارب المكانيّ شرطٌ على البلوك (d ≈ 0.80): تشريحُ سطرٍ يُرسى إلى سطره داخل البلوك، لا في قائمةٍ تحته.

٩. المختبر يحوّل ادّعاءً إلى شيء يُقلَب

لكل مختبر ثلاثة أعمدة إلزامية:

مختبر بلا حالة مفاجئة لعبة، لا مختبر. والحالة المفاجئة الأثمن هي التي تشرح لماذا لا يظهر الخطأ في التطوير («ما دام الاستهلاك يلحق، لا يظهر شيء»).

نوع المختبر يتبع الموضوع: منهج بروتوكولات ⇒ محاكاة بمزالج. منهج لغة ⇒ تنفيذ كود حقيقي + مصوّر تمثيل في الذاكرة. لا تفرض نوعاً واحداً.

١٠. التقدّم يُعرَض مقلوباً

شريط التقدّم المعتاد يعدّ تنازلياً نحو نهايةٍ لم تُبلَغ، فيعرض الكلفة كاملةً قبل البدء — وهو أثر «فيلم الساعتين» بعينه، ومنفّرٌ لا محفّز.

أمام القارئ: الكلفة الظاهرة صغيرة.

• لا أعداد إجمالية أبداً — لا «٣٠ لقطة متبقّية» ولا «٤٠٪ أنجزت».
• يُعرَض الحاليّ وحده، ومعه شريطٌ صغير للّقطة نفسها لا للمنهج.
• وزرّ التالي يسمّي ما بعده في ثلاث كلمات: خطوةٌ محدّدةٌ رخيصة المظهر، لا قفزةٌ في المجهول.

وخلفه: الأثر يتراكم ويُرى.

• الأثر محتوًى لا نقاط. كل لقطةٍ مكتملة تترك سطراً فيما هُدم من اعتقادات.
• «فرق الإتقان» عند نهاية الإقليم: توقّع القارئ الأول — المحفوظ في البوّابات — بجانب فهمه الآن (أدلّة §٧).

نفس البيانات، نفسيّةٌ معاكسة: الشريط يعدّ نحو نهايةٍ بعيدة، والأثر يعدّ من حيث بدأ. وهو صادق: يعرض ما جرى فعلاً.

وممنوع: السلاسل · عدّاد الأيام · النسب المئوية · أي عدٍّ تنازليّ.

١١. الآلة التصوّرية ليست اختيارية

كل موضعٍ يُدفَن فيه اعتقادٌ خاطئ يحمل مخطّطاً يُظهر السبب في الذاكرة — بين الكود الفاشل والبديل الصحيح. الهدم بلا بديلٍ عليّ يُنتج ترقيعاً للنموذج الفاسد (أدلّة §٥).

وأشكالٌ مقيسة، لا مخترَعة:

واتجاه المخطّطات LTR — مخطّطات الذاكرة والشبكة تبقى كما هي عالمياً وكما تعرضها أدوات التحليل، ويحاذيها نصٌّ عربيّ شارح. قلبها للعربية يصادم الأداة الحقيقية.

الثابت والمتغيّر

يتغيّر (مشتقٌّ لكل منهج): اللوحة، اقتران الخطوط، النسيج والأجواء، الموتيف، شدّة الحركة، نصف القطر، وبنية الصفحة نفسها ومفردات المكوّنات — لأنها تُشتقّ من قالب المنهج لا من قالب عامّ.

يثبت (الحمض النووي):

• دارك مود دائماً.
• إحساس وثيقة هندسية دقيقة لا صفحة تسويق.
• نظام خطّين: mono للبيانات والأرقام والملاحة + خطّ عربي مريح للقراءة.
• أرقام جدوليّة (tabular-nums) حيث يقيس المنهج.
• لون مهيمن واحد + ثانوي + مجموعة دلالية.
• عمق بالطبقات لا تسطيح، وحركة مقيّدة مقصودة.
• انضباط ثنائي اللغة (أدناه).
• لا عنصر بصري بلا وظيفة.

تفاصيل الـtokens في references/design-dna.md، ووصفات الأجواء في references/theme-recipes.md.

ثنائية اللغة (حرجة — تُفحَص آلياً)

• جسم النصّ عربي RTL؛ الكود والمخرجات والمصطلحات LTR معزولة: direction: ltr; unicode-bidi: isolate; على code, pre, .ascii, .en.
• الخطّ الأحاديّ لا يمسّ العربية أبداً، ولا letter-spacing معها. خليّة المونو الثابتة تفكّ وصل الحروف، والتباعد يقطعها حرفاً حرفاً، فيخرج الوسم مبعثراً بلا اتجاه مقروء — وأغلب خطوط المونو بلا عربية أصلاً فيقع الاحتياط على خطٍّ ثالث لا تتحكّم به. المونو للكود والأرقام فقط، ويُوسَم بـ.en. والخطر أن هذا يصيب الوسوم الصغيرة تحديداً (kicker، tag، label، stat) لأنها أوّل ما يُغرى فيه بالمونو — فافحصها كلّها بـgrep قبل التسليم.
• unicode-bidi لا يعمل داخل <svg> ⇒ كل <text> عربي يحتاج text-anchor صريحاً. افحصها بـgrep.
• ترتيب الـpager في RTL: «السابق» أوّلاً في الـDOM، وtext-align: start/end لا right/left.
• المراسي العربية: وحّد slugify وثبّته؛ انتبه لعلامات التشكيل (\p{M}) فهي تغيّر المرساة، ولكل مسافة شرطة على حدة.
• الجداول والقوائم تحترم RTL (padding-inline-start، text-align: start).

التقدّم بلا تلعيب

المسموح حفظه: هل حاول اللغز، وأين وصل، وهل أذن بالحرق، وما كتبه من توقّعات — فهي مادّة «فرق الإتقان». لا نقاط ولا شارات ولا سلاسل (أدلّة §٧). محليّ في المتصفّح، بلا حساب وبلا إرسال.

ولا تتبّع للمتعلّم: لا مؤقّتات تحكم عليه، ولا عدّ محاولاتٍ يفتح تلميحاً. كل مساعدةٍ يطلبها هو (الحقل ٧).

عملية البناء

1. اقرأ المنهج كاملاً: المحتوى والبنية والعلامات المتكرّرة (grep -c).

2. ابنِ جدول الاشتقاق أولاً (references/derivation.md). لا CSS قبله.

3. طبّق اختبار القبول على الجدول ذهنياً: هل ينتقل لموضوع آخر؟ إن نعم، احفر أعمق.

4. حدّد ما تأخذه من curriculum-kit — ولكلّ مكوّن مستورَد صفٌّ في الجدول.

5. اشتقّ الـtokens (لوحة، خطّان، نسيج، موتيف، حركة) وعرّفها كمتغيّرات CSS.

6. ابنِ التصريف: ماركداون ← بنية ← مكوّنات.

7. اكتب الفحوص الآلية (أدناه) وشغّلها.

8. أنتج مجلد نشر جاهزاً (conventions/repo-layout.md).

9. node tools/doctor.mjs --fix — العنوان مشتقّ: كل منهج يسكن https://<slug>.nodeksa.com، ويكتبه doctor في curriculum.json. لا تسأل عنه ولا تكتبه بيدك. و--probe يفحص أيّها حيّ.

10. والإصدار أمرٌ واحد: node tools/release.mjs [<site>] — يشغّل فحوص الموقع بترتيبها، ثم يبني، ثم يضغط من داخل dist/، ثم يقرأ المضغوط فيفرض index.html في جذره وألّا يتجاوز ملفٌّ ٢٥م.

    npm run release              # كل المواقع
    node tools/release.mjs curricula/<cat>/<slug>/site

    الضغط من داخل dist/ لا من فوقه: Cloudflare Pages يجعل جذر المضغوط جذر الموقع، فمجلّدٌ واحدٌ في الجذر يُسكِن الموقع تحت /dist/ ويعطي الجذر ٤٠٤ — وقراءةُ المضغوط هي التي تكشفها قبل الرفع. واسم المشروع t3lm-<slug> والعنوان المشتقّ يطبعهما السطر الأخير. وما لا site.deploy له يُتخطّى: مضغوطٌ بلا وجهةٍ عملٌ ضائع.

    ويبقى في site/README.md ما يخصّ هذا الموقع — أرقامُ حجمه، وما لا يُفحَص فيه آلياً — لا الأمرُ نفسه.

11. ولّد أصول التطبيق — ثلاث أدوات مشترَكة في tools/، وناتجها يُلتزَم في public/ فلا يحتاج البناءُ شبكةً ولا متصفّحاً:

    الأداة	ماذا تفعل
    node tools/fonts.mjs <site> "<google-css-url>"	يستضيف الخطّ محلياً بكتل unicode-range كما تُقدَّم — «بلا أصول خارجية»
    node tools/assets.mjs <site>	assets/icon.html وicon-maskable.html وog.html ⇒ أيقونات ١٩٢ و٥١٢ وقناعَين وapple-touch وبطاقة ١٢٠٠×٦٣٠
    node tools/icons.mjs <site>	يقرأ بكسلات الناتج فيفرض هندسته (أدناه). ضمن doctor
    node tools/sw.mjs <site>	يكتب dist/sw.js بقائمة تخزينٍ حقيقية (ضمن build)، ويُفشِل البناء عند أي أصلٍ خارجيّ

    ومصادر الأيقونات HTML لا SVG لتستعمل خطّ الموقع نفسه. والرمز مشتقّ كأي قرارٍ آخر: له صفٌّ في الجدول، ويُرى بلا نصّ فيحمل ما يُدرَّس لا اسم الموضوع.

    والأيقونة تُقاس لا تُرى. عيبُها ليس ملفّاً ناقصاً بل ملفّاً موجوداً وخاطئاً: اسمُه ومقاسه سليمان ومحتواه ركنٌ مكبَّر من الرسم. لا يراه فحص دخانٍ ولا لقطةُ سطح مكتب — ولا يظهر إلا على شاشة هاتفٍ بعد التثبيت. لذلك أربعة قيود يفرضها icons.mjs:

    القيد	لماذا
    الرسم مركزيّ (إزاحة ≤ ٢٪)	الإزاحة توقيعُ الاقتطاع من ركن
    المقاسان من مصدرٍ واحد متطابقان (≤ ٣٪)	١٩٢ و٥١٢ من نفس الـHTML: اختلافُهما يعني أن أحدهما صُيِّر بمقاسٍ آخر
    المقنَّعة داخل دائرة الـ٨٠٪ (نصف قطر ≤ ٤٠٪)	ما خرج عنها يقصّه مشغّل أندرويد
    ولا تصغر عن ٢٦٪ مقنَّعةً و٣٠٪ غيرها	رمزٌ صغير في لوحةٍ كبيرة يضيع بين أيقونات الشاشة

    والبعد يُقاس على البكسل لا على ركن صندوقه: خطٌّ رأسيّ في الوسط صندوقُه عريضٌ وركنُه بعيد، وهو كلُّه قريبٌ من المركز فلا يُقصّ.

    ولا يُصوَّر بـ--window-size. النظام يفرض حدّاً أدنى لحجم النافذة (٥٠٠×٢٨٨ على macOS)، فما دونه يُخطَّط عند الحدّ ثم يُقتطَع من الزاوية العليا — فتخرج كل أيقونةٍ تحت ٥٠٠ ركناً مكبَّراً، والـ٥١٢ وحدها سليمة. وtools/shot.mjs يفرض المقاس على منفذ العرض بـEmulation.setDeviceMetricsOverride.

    ومعها manifest.webmanifest — id واسمٌ ووصفٌ وstart_url: "./" وdisplay: standalone ولونا الخلفية والثيمة من التوكنز — وأربعة وسومٍ في index.html بلا أحدها يخسر iOS الأيقونة أو يكتب العنوان الطويل تحتها:

    <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="<short_name>" />

    وblack لا black-translucent: الثاني يُدخل المحتوى تحت شريط الحالة، ولا يصحّ بلا env(safe-area-inset-*) في التخطيط. ⇒ يُثبَّت تطبيقاً.

12. افتحه في متصفّحٍ حقيقيّ: node tools/screens.mjs <site> <out> "#/" "#/r/02" يخدم dist/ ويلتقط المسارات في Chrome. افحص اللقطات بعينك.

    فحص الدخان يصيّر المكوّنات ولا يرى مظهراً. وأوّل تشغيلٍ لهذه الأداة على ثلاثة مواقع «مكتملة» كشف: عناوين تُعرَض بعلاماتها الخام في ثلاثة مواقع، ومقدّمة كل فصلٍ خاماً في ثلاثة عشر فصلاً، وfavicon.svg يشير إليه index.html وهو غير موجود أصلاً، ورباطاتِ خطٍّ تعرض ≠ مكان != في منهج لغة.

    ثم اكتب في site/README.md ما لم تره اللقطة — الحركة والتفاعل تحت المؤشّر — بدل «لم يُفحَص في متصفّح».

وجدولُ الفصول يُقرأ من README.md المنهج، لا يُكتب رقماً في الكود. فحص الدخان يقارن ما في regions/ بصفوف الجدول ويفشل عند أي فرق، والفصل المُعلَن ولم يُكتب يظهر بطاقةً مقفلة باسمه ومحتوياته فتُعرف بقيّة الطريق قبل بلوغها.

الفحوص الآلية (إلزامية)

والزيارة الأولى لا تفحص عامل الخدمة، لأنه لم يسيطر بعد. فحصٌ يفتح الصفحة مرّةً يمرّ على موقعٍ يموت في كل زيارةٍ بعدها — وهذا وقع فعلاً: cache.addAll يخزّن ./index.html، والاستضافة تردّ عليه بتحويلٍ ٣٠٧ إلى / (Cloudflare Pages وWorkers)، فتُحفَظ استجابةٌ بعَلَم redirected. وطلبُ التنقّل وضعُ تحويله manual، فردُّ استجابةٍ محوَّلة عليه خطأُ شبكةٍ في المواصفة:

a redirected response was used for a request whose redirect mode is not "follow"

⇒ الموقع يعمل أوّل زيارة ثم يموت إلى الأبد حتى يُمسح المخزن — ويبدو للمؤلّف أن النطاق نفسه سقط.

والقاعدتان: ما يُخزَّن مسبقاً يُعاد بناؤه إن كان محوَّلاً (new Response(await res.blob(), …))، وردُّ التنقّل لا يُقدَّم إلا بعد فحص !r.redirected. والخادم الذي يفحص لا بدّ أن يحوّل /index.html وإلا فهو يفحص شيئاً آخر.

وكل ما يُخزَّن يُعرَض: البوّابة تحفظ توقّع القارئ، فيُجمَع في «ما توقّعتَه» بجانب ما كان — بلا نسبةٍ ولا صواب/خطأ، فالحكم للقارئ ولا نعرف صواب جملةٍ كتبها بلغته. وحقلٌ يُحفَظ ولا يُعرَض وعدٌ لم يُنفَّذ.

وصرّح دائماً بما لم يُفحَص: التفاعلات المدفوعة بالنقر والحركة لا تراها لقطةٌ ساكنة. قلها صراحةً في التسليم بدل الإيحاء بتغطية كاملة.

الشعار يُستورَد، ولا يُرسَم — ولا استثناء

لكل تقنيةٍ يدور عليها منهج شعارٌ رسميّ موجود. يُنزَّل ملفُّه ويُعرَض كما هو. ورسمُه باليد محرَّم، ومحرَّمٌ كذلك «إعادة صياغته» و«اشتقاق موتيفٍ من لغته الهندسية» و«الإيحاء به بلا نسخه». وقع هذا مرّتين، وفي الثانية بُنيت علامةٌ من ثلاثة أضلاعٍ بلغة شعار Flutter الهندسية — فلم تُشبه Flutter ولا Dart، وقُرئت شرطةً في الشريط العلويّ.

والحجّة التي تُسوّغ الرسم هي نفسها علامةُ الخطأ. «ليس الشعار، بل موتيفٌ بلغته» تعني أنك رسمتَ شيئاً يريد أن يُقرأ شعاراً ولا يُقرأ. وإن كان الشكل لا علاقة له بالشعار أصلاً، فلا حاجة إلى ذكر الشعار في تسويغه.

الإجراء

1. نزّل الملفّ من مصدره الرسميّ، لا من موقع «brand colors» ولا من الذاكرة. وأكثرها في مستودع المشروع نفسه:

   curl -sSo site/public/<name>.svg \
     https://raw.githubusercontent.com/<org>/<repo>/main/<path>/logo.svg

   (شعارا Dart وFlutter في flutter/website تحت sites/docs/web/assets/images/branding/.)

2. اعرضه img لا svg مضمَّناً. فلا تمسّه توكنز، ولا يُعاد تلوينه، ولا يفشل عليه فحص اللون الحرفيّ في doctor — لأنه أصلٌ لا كود.

3. ولا تعديل: لا قلبَ ألوان، ولا قصَّ أجزاء، ولا تركيبَ حرفٍ عليه. وحدود الاستعمال في إرشادات علامته تُقرأ قبل وضعه.

4. الأيقونة وبطاقة المشاركة منه (assets/icon.html · og.html) بالمسار ../public/<name>.svg — فلا تُرسَم مرّةً ثانيةً بيدٍ أخرى.

واللوحة شيءٌ والعلامة شيء. استعارةُ ألوان علامةٍ رسميةٍ للأسطح والدلالة قرارُ مؤلّف مشروع، ويُسجَّل في جدول الاشتقاق قراراً منقولاً لا اشتقاقاً؛ أمّا العلامة نفسها فتُستورَد ملفّاً.

والفحص واحد: أرِ اللقطةَ لمن يعرف التقنية ولا يعرف الموقع. إن لم يقل اسمها من العلامة وحدها، فالعلامة مرسومة — احذفها واستورد الأصل.

محرّمات

• لا قرار بلا صفّ في جدول الاشتقاق.
• لا لون حرفيّ خارج ملفّ التوكنز.
• لا واجهة رئيسية بمستوى «فهرس روابط»، ولا جدار كودٍ في وجه الداخل، ولا أكثر من ثلاثة مصطلحاتٍ مبهمة في أوّل شاشتين.
• لا بلوك يَعِد بتشغيل أو تحرير وهو غير قابل لهما.
• لا بلوك كودٍ أو مخرَجٍ بلا تلوين، ولا تلوينَ بتعبيراتٍ نمطية مرتجَلة حيث يوجد محلّل، ولا لوحة syntax عامّة بدل معجمٍ مشتقٍّ من الموضوع.
• لا تشريحَ في قائمةٍ تحت البلوك. يُرسى إلى سطره.
• لا ثيم معاد تدويره، ولا جمالية AI عامّة (بنفسجي على أبيض، Inter، تخطيطات متوقّعة).
• لا ثيم فاتح أبداً.
• لا صفحة نصّ طويل متّصل حين يعلن المنهج قالباً.
• لا نسخ نصّ من المنهج إلى الكود.
• لا مكوّن مستورَد من العدّة لمجرّد وجوده فيها.
• لا مختبر بلا حالة مفاجئة.
• لا حركة بلا اشتقاق، ولا تجاهل لـprefers-reduced-motion.
• لا كسر للـbidi.
• لا وسم عربيّ بخطّ أحاديّ ولا بتباعد حروف.
• لا أصول مصنوعة باليد. الأيقونات من طقم مستورَد (lucide وأمثاله)؛ الرمز المرتجَل الذي يحاكي شيئاً معروفاً يخرج مكسوراً. والاستثناء رسمٌ مشتقّ من المحتوى نفسه — فذاك شرح لا أيقونة.
• ولا يُرسَم شعارٌ موجود باليد أبداً — التفصيل في §«الشعار يُستورَد».
• لا تشغيل نيابةً عن القارئ، ولا مسجَّلٌ بهيئة حيّ. المخرَج المنقول من تشغيل المؤلّف لا يلبس محثّاً ولا شارة «تمّ»؛ وكل فرقٍ بين محرّك المتصفّح والأداة الحقيقية يُعلَن قبل التشغيل.
• لا عمود جانبي يمرّ تحت الشريط. ما له تمريره الخاصّ يأخذ لوحاً مستقلّاً: ارتفاع محجوز، وoverflow خاصّ، وoverscroll-behavior: contain، وخلفية معتمة. أمّا المتن فيمرّ تحت الشريط الشفّاف عمداً — الشفافية عمق مقصود، والمحرَّم أن يمرّ تحتها ما هو لوحٌ قائم بذاته.
• لا صفحة تتجاوز حدّ اللقطة، ولا تقدّم تلقائيّ بينها.
• لا حركة تلقائية، ولا عدٍّ تنازليّ للتقدّم، ولا نسبة إنجاز.
• لا خامس لونٍ دلاليّ، ولا لونٍ بلا قناةٍ ثانية، ولا ثلاث قنواتٍ معاً.
• لا سهم مؤشّرٍ بلا عنوانه العدديّ.
• لا مبالغة في وصف العاديّ. المخرَج مخرَجٌ لا «المخرَج الحقيقي»، والمختبر مختبرٌ لا «جرّبه الآن!». اللوحة تقول ما هي بهيئتها؛ فإن احتاجت عنواناً يشرحها فالعيب في اللوحة. وإن كان العنوان فوق شيء يظهر قبله، فهو خطأ ترتيب لا خطأ صياغة.
• لا تلعيب.

فحص ذاتي قبل التسليم

0. هل جدول الاشتقاق مكتوب، وكل صفّ فيه يشير لسطر حقيقي في الماركداون؟ 0ب. هل جدول مقابلة الأدلّة مكتوب، وكل ⚠ فيه مقصودٌ ومعلَن؟ 0ج. هل الشاشة الأولى تعطي صورةً لمن لا يعرف — بلا جدار كود، وبلا مصطلحٍ مبهم، وفيها لحظةُ تفاعلٍ واحدة تقلب ادّعاءً؟
1. لو نقلتُ هذا التصميم لموضوع آخر، هل يبدو غير منطقيّ؟ إن بدا «مقبولاً»، فشل.
2. هل البنية مُستخرَجة برمجياً، ولا نصّ منسوخ في الكود؟
3. هل كل مكوّن ناتج عن علامة معدودة لا عن ذوق؟
4. هل يعرف القارئ دائماً أين هو وكم بقي؟
5. هل القيود السالبة مشتقّة ومسجّلة، و«ما حُذف ولماذا» موثّق؟
6. هل كل حركة لها صفّ، وprefers-reduced-motion محترم؟
7. هل كل مكوّن تفاعلي محقون في موضعه ومفروض بفحص ١:١؟ وهل لكل مختبر حالة مفاجئة؟
8. هل الثيم داكن، والخطّان بدوريهما، والأرقام جدوليّة؟ 8ب. هل كل لون يأتي من ملفّ التوكنز؟ (node tools/doctor.mjs)
9. هل ثنائية اللغة سليمة (شاملةً SVG)؟ وهل صفر وسمٍ عربيّ بخطّ أحاديّ؟ (grep -n 'font-mono' *.css ثم افحص محتوى كل مُحدِّد) 9ب. هل الشريط العلوي بارتفاع توكن، والمراسي لا تختفي تحته، وكل لوحٍ له تمريره الخاصّ مستقلّ ومعتم؟ 9ج. هل في الموقع كلمةٌ تبالغ في وصف عاديّ؟ احذفها. 9ج-٢. هل كل بلوكٍ مُلوَّنٌ بمحلّل CodeMirror، ومعجمُ رموزه مشتقٌّ من الموضوع، وألوانه من العائلات الأربع نفسها بلا خامسة؟ وهل التشريح مرسًى إلى سطره؟ 9د. هل كل أيقونة مستورَدة من طقم، وكل مخرَج معروض إمّا نتيجةَ ضغطة القارئ وإمّا موسوماً «مسجَّل»، وكل فرقٍ عن الأداة الحقيقية مُعلَناً قبل التشغيل؟ 9هـ. هل كل لقطةٍ ضمن الحدّ ولها مكسب، والانتقال بيد القارئ، والتقدّم مقلوب (لا عدَّ تنازلياً)؟ 9و. هل كل موضع دفنِ اعتقادٍ يحمل مخطّط آلةٍ تصوّرية، وكل سهم مؤشّرٍ يحمل عنوانه؟
10. هل الفحوص تمرّ، ومجلد النشر بلا أصول خارجية، وصرّحتُ بما لم يُفحَص؟