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