مستودع لمهارات Claude Code لبناء سمة Discourse ومكونات الكتلة:
ما الذي يتضمنه
مهارة تأليف السمة — تغطي نطاقًا شاملاً لبناء سمة Discourse: التهيؤ باستخدام discourse_theme CLI، وهيكلة SCSS، ومكتبة عرض العرض، والتوطين، والإعدادات، والمعدلات، ومُحوِّلات القيم، والأيقونات، ومتغيرات CSS. تتضمن ملفات مرجعية مفصلة للأيقونات والمتغيرات والمحوِّلات بشكل منفصل ويمكن تحميلها عند الحاجة.
مهارة تأليف الكتل — تغطي جانب السمة من واجهة برمجة التطبيقات للكتل: كتابة مكونات الكتل باستخدام مُزيّن @block، وتحديد مخططات الحجج، وعرض الكتل في المنافذ الأساسية المتاحة، والشروط، وكتل الحاويات وتجميع التخطيط، ودمج ترجمات السمة وإعداداتها في حجج الكتل.
سمة مثال — سمة عاملة مع صفحة رئيسية مخصصة مبنية بالكتل، وتوضح أنماطًا حقيقية للمنافذ والشروط وتكوين التخطيط.
حول واجهة برمجة التطبيقات للكتل
واجهة برمجة التطبيقات للكتل هي الإطار الجديد الخاص بـ Discourse لبناء مكونات واجهة مستخدم معيارية وقابلة للتكوين في السمات والإضافات. الكتل هي مكونات Glimmer مسجلة في منافذ مسمّاة — مثل homepage-blocks أو hero-blocks أو sidebar-discovery — ويمكن عرضها بشكل مشروط بناءً على المسار أو المستخدم أو عرض العرض أو إعدادات الموقع أو توفر الإضافة.
تكمن القوة الرئيسية للنظام في أن الكتل ذات نطاق صغير ومركّز وأنماطها متسقة. هذا يجعلها مناسبة جدًا للتطوير بمساعدة الذكاء الاصطناعي: يمكن للنموذج الذي يمتلك مهارة الكتل تهيئة مكون كتلة يعمل، وتسجيله في منفذ، وربط الشروط في عملية واحدة.
تُظهر سمة المثال في هذا المستودع صفحة رئيسية تتكيف بناءً على الإضافات والمحتوى المتاح. إليك كيف تبدو الصفحة الرئيسية الأساسية، مع كتلة بطل وقائمة مواضيع مميزة:
عند استيفاء شروط إضافية (مثل تكوين علامة مميزة، وتفعيل إضافة Discourse Events، وتوفر إضافة Discourse Leaderboard)، يتم عرض كتل إضافية بشكل مشروط في التخطيط:
لا تقتصر الكتل على الصفحة الرئيسية فحسب. تستخدم سمة المثال أيضًا منفذ sidebar-blocks لإضافة رابط Home، ومنفذ sidebar-discovery لإضافة محتوى جانبي خاص بكل فئة، وكتلة category-banner في أعلى صفحات الفئات:
يُظهر مُفتّش الكتل في DevTools تسميات المنافذ ومعرّفات الكتل مُطبَّقة على الصفحة. هذا يسهّل فهم هيكل التخطيط وتصحيح ما يتم عرضه في كل مكان:
الاستخدام مع منصة تصميم MCP
تتوافق المهارات بشكل جيد مع منصات تصميم MCP (مثل Penpot أو Figma MCP). عند توصيل واحدة، يمكن لقراءة مواصفات المكونات ورموز التصميم مباشرة من ملفات التصميم الخاصة بك وتنفيذها باستخدام تقاليد المهارة. إنها حلقة أكثر إحكامًا بين التصميم والرمز، خاصة عند العمل من نظام تصميم منظم.
انسخ وعدّل
تُعيد بعض التقاليد في المهارات تفضيلات شخصية، مثل هيكلية مجلد SCSS. يمكنك نسخ المستودع وتعديل المهارات لتتوافق مع سير عملك وتقاليده الخاصة.
شارك ما تبنيه
جرّبها وأخبرنا كيف سارت الأمور! نحن نود أن نسمع كيف تستخدم المهارات، وما الذي بنيتَه بها، وأين تقصر. التعليقات والتصحيحات والنسخ مرحّب بها جميعًا.