أنت تجمع ملف CLAUDE.md النهائي كمرجع رسمي ومعتمد لنظام التصميم.
سيكون هذا الملف في جذر المشروع، ويمثّل المصدر الوحيد للحقيقة لأي مساعد ذكاء اصطناعي
أو مطوّر يعمل على قاعدة الكود هذه.
## المدخلات
- **معمارية التوكنز:** [مخرجات المرحلة 2]
- **توثيق المكوّنات:** [مخرجات المرحلة 3]
- **بيانات المشروع:**
- اسم المشروع:
- الحزمة التقنية: [Next.js 14+ / React 18+ / Tailwind 3.x / وغيرها]
- إصدار Node:
- مدير الحزم: [npm / pnpm / yarn]
## هيكلة ملف CLAUDE.md
اجمع الملف النهائي بالأقسام التالية، وبنفس هذا الترتيب:
### 1. هوية المشروع
- اسم المشروع، وصفه، ومكانته أو توجهه
- ملخص الحزمة التقنية في جدول واحد
- نظرة عامة على هيكلة المجلدات، خصوصًا تخطيط src/
### 2. بطاقة المرجع السريع
ملخص مركز لأكثر المعلومات المطلوبة، بحيث تكون واضحة من أول نظرة:
- الألوان الأساسية مع قيم hex، بحد أقصى 6 ألوان
- مجموعة الخطوط المستخدمة
- مقياس المسافات بعرض بصري: 4, 8, 12, 16, 24, 32, 48, 64
- نقاط التوقف للشاشات
- قيم استدارة الزوايا
- قيم الظلال
- خريطة z-index
### 3. توكنز التصميم — المرجع الكامل
تنظّم حسب المستوى: Primitive → Semantic → Component.
كل توكن يجب أن يحتوي على: الاسم، القيمة، متغير CSS، وما يقابله في Tailwind.
استخدم الجداول لتسهيل القراءة السريعة.
### 4. نظام الخطوط
- جدول مقياس الخطوط: الاسم، الحجم، الوزن، ارتفاع السطر، تباعد الحروف، الاستخدام
- قواعد التجاوب مع أحجام الشاشات
- استراتيجية تحميل الخطوط
### 5. نظام الألوان
- لوحة الألوان الكاملة مع وصف لكل عينة: الاسم، hex، وسياق الاستخدام
- جدول ربط الألوان الدلالية
- ربط ألوان الوضع الداكن إذا كان مطبقًا
- ملاحظات الالتزام بنسب التباين وإمكانية الوصول
### 6. نظام التخطيط
- مواصفات الشبكة
- عروض الحاويات
- نظام المسافات مع مقياس بصري
- سلوك نقاط التوقف حسب حجم الشاشة
### 7. مكتبة المكوّنات
[أدرج مخرجات المرحلة 3 لكل مكوّن]
### 8. الحركة والتحريك
- جدول الإعدادات المسمّاة: الاسم، المدة، منحنى الحركة، الاستخدام
- القواعد: متى نستخدم الحركة ومتى نتجنبها
- قيود الأداء
### 9. اتفاقيات كتابة الكود
- أنماط تسمية الملفات
- ترتيب الاستيراد
- قالب هيكلة ملف المكوّن
- ترتيب كلاسات CSS إذا كان المشروع يستخدم Tailwind
- أنماط إدارة الحالة المستخدمة
### 10. القواعد والقيود
قواعد صارمة لا يجوز كسرها أبدًا:
- «لا تستخدم ألوان hex مباشرة داخل الكود — استخدم التوكنز دائمًا»
- «كل العناصر التفاعلية لازم يكون لها حالة تركيز واضحة»
- «الحد الأدنى لمساحة اللمس: 44x44px»
- «كل الصور لازم تحتوي على نص بديل (alt)»
- «لا تستخدم أي قيم z-index خارج المقياس المحدد»
- [أضف قواعد خاصة بالمشروع]
## متطلبات التنسيق
- استخدم جداول Markdown لكل خرائط التوكنز والقيم
- استخدم كتل كود لكل أمثلة الكود
- اجعل كل قسم مكتفيًا بذاته، بحيث ينفهم بدون الرجوع لأقسام أخرى
- أضف جدول محتويات في أعلى الملف مع روابط مراسي (anchor)
- الحد الأقصى لطول السطر: 100 حرف لتحسين القراءة
- فضّل القيم الصريحة بدل عبارات مثل «راجع أعلاه»
## قاعدة حرجة
هذا الملف لازم يكون المرجع الرسمي المعتمد. إذا صار فيه تعارض بين CLAUDE.md
والكود الفعلي، يتم تحديث CLAUDE.md ليطابق الواقع — وليس العكس.
هذا الملف يوثق ما هو موجود فعليًا، وليس ما يفترض أن يكون؛ خارطة التطوير مكانها ملف مستقل.
