● مجتمع
smnandre
⚡ فوري
symfony-ux-skills
بواسطة smnandre · smnandre/symfony-ux-skills
علّم Claude مكدس Symfony UX — Live Component و Twig Component و Turbo و Stimulus — حتى يكتب كود Symfony full-stack صحيح.
مجموعة من Agent Skills توثق النظام البيئي لـ Symfony UX (Live Components و Twig Components و Turbo و Stimulus controllers و Autocomplete و التكاملات مع React/Vue/Svelte). بعد استنساخها إلى ~/.claude/skills/، يحمّل Claude المهارة ذات الصلة كلما طلبت Live Component أو Stimulus controller أو Turbo Frame، ويتبع اصطلاحات Symfony UX بدلاً من اختراع أنماط جديدة.
لماذا تستخدمه
الميزات الأساسية
- تغطي كل سطح Symfony UX — Live و Twig و Turbo و Stimulus و Autocomplete و Chartjs و Dropzone وجسور React/Vue/Svelte
- يختار Claude حزمة UX الصحيحة للمشكلة بدلاً من كتابة JavaScript يدويًا
- تُرمّز الأنماط الأصيلة: LiveAction و LiveProp و LiveListener و stimulus targets/values
- تعمل مع Claude Code و Codex و Gemini — مهارات markdown عادية، بدون توقيت تشغيل
- تتم صيانتها بواسطة smnandre، مساهم أساسي في Symfony UX
عرض مباشر
كيف يبدو في الممارسة
symfony-ux-skill.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: symfony-ux-skills
متى تستخدمه: تحتاج إلى نموذج تفاعلي أو مرشح أو قائمة يتم تحديثها على الخادم دون إعادة تحميل الصفحة بأكملها.
الخطوات
-
اوصف المكون الذي تحتاجه
بناء Live Component لمرشح بحث المنتجات مع خانات اختيار للفئات واستعلام نصي — يحدّث النتائج مباشرة أثناء كتابة المستخدم.✓ تم النسخ
→ يشير Claude إلى LiveProp و LiveAction و debounce modifiers من المهارة
-
دع Claude ينشئ هيكل PHP + Twig
إنشاء فئة المكون PHP و قالب Twig. استخدم الخصائص، وليس الملاحظات.✓ تم النسخ
→ يتبع إخراج الملف تسمية Symfony UX (src/Twig/Components/...)
-
اطلب من Claude توصيل الصفحة الأبوية
أظهر لي كيفية تضمين هذا المكون في صفحة Twig موجودة وتمرير الحالة الأولية.✓ تم النسخ
→ يستخدم مساعد {{ component() }} بشكل صحيح
النتيجة: Live Component يعمل بشكل صحيح مع تحديد نوع LiveProp الصحيح وبدون JavaScript مخصص.
المزالق
- يخلط Claude بين مفاهيم Live Component و Twig Component — أعد السؤال باستخدام اسم الحزمة بشكل صريح: 'استخدم symfony/ux-live-component وليس twig-component'
متى تستخدمه: تطبيقك يحتوي على jQuery أو JavaScript عادي مشتت في Twig — تريد الانتقال إلى Stimulus بنظافة.
المتطلبات الأساسية
- Symfony UX + Stimulus مُعدّة (importmap أو Webpack Encore) — symfony console importmap:require @hotwired/stimulus if missing
الخطوات
-
الصق مقطع الكود القديم واطلب تحويل Stimulus
حول مقطع jQuery هذا إلى Stimulus controller أصيل مع targets و values.✓ تم النسخ
→ Controller بـ static targets و static values و actions واضحة
-
تحديث قالب Twig
أظهر لي سمات data-controller و data-*-target و data-action لجانب Twig.✓ تم النسخ
→ سمات البيانات الصحيحة، بدون معالجات مضمنة
النتيجة: Stimulus controller نظيف مع توصيل Twig جاهز للـ commit.
المزالق
- عدم تطابق اسم Controller بين الملف و سمة data-controller — ذكّر Claude بقاعدة التسمية: hello_controller.js → data-controller=hello
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
يقرأ Claude ملفات Twig/PHP الموجودة لديك وينشئ مكونات تطابق أسلوب قاعدة الكود
اقرأ src/Entity/Product.php و src/Twig/Components/ ثم أضف LiveComponent جديد لمرشح المنتجات متابعًا الأنماط نفسها.✓ تم النسخ
فتح PR للمكون الجديد بمجرد أن تكون الملفات على القرص
قم بـ commit لملفات LiveComponent الجديدة إلى فرع وافتح PR بعنوان 'Live product filter'.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- لا توجد — المهارة هي markdown محلي
- الرموز لكل استدعاء
- يضيف حوالي 2–8k token للسياق عند تنشيط المهارة
- التكلفة المالية
- مجاني، مرخص بموجب MIT
- نصيحة
- احتفظ بمجلد المهارة صغيرًا — استنسخ فقط المهارات الفرعية التي تستخدمها إذا كان السياق محدودًا
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: لا توجد — لا توجد بيانات اعتماد مطلوبة
نقل البيانات الخارجي: لا توجد — حزمة تعليمات بحتة، لا توجد استدعاءات شبكة
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
يستخدم Claude PHP عامة بدلاً من Symfony UX
اطلب بشكل صريح: 'استخدم symfony-ux-skills التي قمت بتحميلها'
يشير الكود المُنتج إلى حزم UX لم تقم بتثبيتها
composer require الحزمة أو أخبر Claude بالحزم المثبتة
تحقق: composer show | grep symfony/ux
البدائل
symfony-ux-skills مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| sivalabs-agent-skills | تعمل في Spring Boot بدلاً من Symfony | مكدس مختلف تمامًا |
| claude-wordpress-skills | تعمل في WordPress / PHP لكن ليس Symfony | أنماط خاصة بـ WordPress، بدون Twig/Turbo |