تخطيط صفحات الموقع وتصميم تجربة واضحة ومريحة للزائر
كيف ترتب أقسام الصفحة من الأعلى للأسفل وتختار الألوان والخطوط المناسبة قبل البدء بالكود
ماذا ستتعلم وتنجز في هذه الجلسة؟ (اضغط للعرض)▼
- إتقان إطار عمل RCTCO لكتابة موجهات برمجية خالية من الغموض
- تقنيات ضبط مخرجات الكود لتتوافق مع معايير TypeScript و Tailwind
النشاط 01: تشريح الموجه الهندسي — مكونات البرومبت الخالي من الهلوسة
تعلم كيف تبني سياقاً تقنياً محكماً يمنع الذكاء الاصطناعي من توليد أكواد قديمة أو خاطئة
أحدد إصدارات المكتبات والمعايير الدقيقة التي يجب أن يلتزم بها الذكاء الاصطناعي أثناء كتابة الكود.
النماذج تتدرب على أكواد قديمة وحديثة، وبدون تحديد الإصدار قد تعطيك أكواداً منسقة بأنظمة قديمة لا تعمل في 2026.
2. خطوات التنفيذ خطوة بخطوة:
حدد بيئة العمل: Next.js 15+ App Router و React 19.
اشترط استخدام Tailwind CSS v4 للمظهر دون كتابة ملفات CSS منفصلة.
اشترط استخدام مكتبة Lucide Icons للأيقونات.
مجموعة معايير تقنية جاهزة لإرفاقها في مقدمة كل محادثة برمجية مع المساعد الذكي.
📄 قالب البداية أو الكود المساعد (اضغط للعرض أو النسخ)▼
[Technical Stack & Constraints]
- Framework: Next.js 15+ (App Router)
- Language: TypeScript with strict typing
- Styling: Tailwind CSS v4
- Icons: lucide-react
- Direction: RTL support with dir="rtl"
- Principles: Clean components, accessible buttons, no inline stylesتلميحات مساعدة (1)▼
- • 💡 احتفظ بهذه الديباجة في ملف نصي سريع لتلصقها في بداية أي محادثة برمجية.
4. مساحة الحل وتسليم النتيجة عبر واتساب
اكتب إجابتك أو الكود أو رابط عملك في الصندوق أدناه. تُحفظ مسودتك تلقائيًا في متصفحك، وعند الضغط على «إرسال النتيجة عبر واتساب» سيتم حفظ الإجابة في سجل تقدمك وفتح رسالة واتساب جاهزة لإرسالها للمدرب (+90 538 201 50 72).