/ الدليل / الملعب / symfony-ux-skills
← كل الخوادم ↗ GitHub
● مجتمع 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-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "symfony-ux-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/smnandre/symfony-ux-skills",
        "~/.claude/skills/symfony-ux-skills"
      ],
      "_inferred": true
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "symfony-ux-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/smnandre/symfony-ux-skills",
        "~/.claude/skills/symfony-ux-skills"
      ],
      "_inferred": true
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "symfony-ux-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/smnandre/symfony-ux-skills",
        "~/.claude/skills/symfony-ux-skills"
      ],
      "_inferred": true
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "symfony-ux-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/smnandre/symfony-ux-skills",
        "~/.claude/skills/symfony-ux-skills"
      ],
      "_inferred": true
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "symfony-ux-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/smnandre/symfony-ux-skills",
        "~/.claude/skills/symfony-ux-skills"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "symfony-ux-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/smnandre/symfony-ux-skills",
          "~/.claude/skills/symfony-ux-skills"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add symfony-ux-skill -- git clone https://github.com/smnandre/symfony-ux-skills ~/.claude/skills/symfony-ux-skills

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: symfony-ux-skills

كيفية بناء Symfony Live Component مع Claude

👤 مطورو Symfony الذين يضيفون واجهة مستخدم في الوقت الفعلي دون كتابة JavaScript ⏱ ~20 min intermediate

متى تستخدمه: تحتاج إلى نموذج تفاعلي أو مرشح أو قائمة يتم تحديثها على الخادم دون إعادة تحميل الصفحة بأكملها.

المتطلبات الأساسية
  • مشروع Symfony 6.4+ مع symfony/ux-live-component مثبتًا — composer require symfony/ux-live-component
  • تم استنساخ Skill إلى ~/.claude/skills/ — git clone https://github.com/smnandre/symfony-ux-skills ~/.claude/skills/symfony-ux-skills
الخطوات
  1. اوصف المكون الذي تحتاجه
    بناء Live Component لمرشح بحث المنتجات مع خانات اختيار للفئات واستعلام نصي — يحدّث النتائج مباشرة أثناء كتابة المستخدم.✓ تم النسخ
    → يشير Claude إلى LiveProp و LiveAction و debounce modifiers من المهارة
  2. دع Claude ينشئ هيكل PHP + Twig
    إنشاء فئة المكون PHP و قالب Twig. استخدم الخصائص، وليس الملاحظات.✓ تم النسخ
    → يتبع إخراج الملف تسمية Symfony UX (src/Twig/Components/...)
  3. اطلب من Claude توصيل الصفحة الأبوية
    أظهر لي كيفية تضمين هذا المكون في صفحة Twig موجودة وتمرير الحالة الأولية.✓ تم النسخ
    → يستخدم مساعد {{ component() }} بشكل صحيح

النتيجة: Live Component يعمل بشكل صحيح مع تحديد نوع LiveProp الصحيح وبدون JavaScript مخصص.

المزالق
  • يخلط Claude بين مفاهيم Live Component و Twig Component — أعد السؤال باستخدام اسم الحزمة بشكل صريح: 'استخدم symfony/ux-live-component وليس twig-component'
اجمعها مع: filesystem · git

إعادة كود JavaScript القديم إلى Stimulus controller

👤 المطورون الذين يحدثون واجهة مستخدم تطبيق Symfony ⏱ ~15 min beginner

متى تستخدمه: تطبيقك يحتوي على jQuery أو JavaScript عادي مشتت في Twig — تريد الانتقال إلى Stimulus بنظافة.

المتطلبات الأساسية
  • Symfony UX + Stimulus مُعدّة (importmap أو Webpack Encore) — symfony console importmap:require @hotwired/stimulus if missing
الخطوات
  1. الصق مقطع الكود القديم واطلب تحويل Stimulus
    حول مقطع jQuery هذا إلى Stimulus controller أصيل مع targets و values.✓ تم النسخ
    → Controller بـ static targets و static values و actions واضحة
  2. تحديث قالب Twig
    أظهر لي سمات data-controller و data-*-target و data-action لجانب Twig.✓ تم النسخ
    → سمات البيانات الصحيحة، بدون معالجات مضمنة

النتيجة: Stimulus controller نظيف مع توصيل Twig جاهز للـ commit.

المزالق
  • عدم تطابق اسم Controller بين الملف و سمة data-controller — ذكّر Claude بقاعدة التسمية: hello_controller.js → data-controller=hello
اجمعها مع: filesystem

إضافة pagination مدعومة بـ Turbo بدون إعادة تحميل الصفحة

👤 مطورو Symfony الذين يريدون SPA-like UX مع الحد الأدنى من JavaScript ⏱ ~15 min intermediate

متى تستخدمه: لديك قائمة مرقمة وتريد أن يقوم Next/Prev بتبديل المحتوى في المكان.

الخطوات
  1. اطلب من Claude التفاف القائمة في Turbo Frame
    التف حول قائمة المنتجات المرقمة في turbo-frame واجعل روابط الترقيم تستهدف هذا الإطار.✓ تم النسخ
    → يستخدم <turbo-frame id=...> وروابط موجهة للإطار
  2. معالجة الاستجابة الجزئية
    تحديث controller لعرض الإطار فقط عندما يحتوي الطلب على رأس Turbo-Frame.✓ تم النسخ
    → يتحقق Controller من رأس الطلب واختيار القالب الصحيح

النتيجة: يتم تبديل الترقيم في المكان بدون إعادة تحميل الصفحة بأكملها.

المزالق
  • تستمر الصفحة كاملة في إعادة التحميل — يجب أن يطابق frame id على هدف الرابط frame id على الصفحة — كرره لـ Claude
اجمعها مع: filesystem

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

symfony-ux-skill + filesystem

يقرأ Claude ملفات Twig/PHP الموجودة لديك وينشئ مكونات تطابق أسلوب قاعدة الكود

اقرأ src/Entity/Product.php و src/Twig/Components/ ثم أضف LiveComponent جديد لمرشح المنتجات متابعًا الأنماط نفسها.✓ تم النسخ
symfony-ux-skill + github

فتح PR للمكون الجديد بمجرد أن تكون الملفات على القرص

قم بـ commit لملفات LiveComponent الجديدة إلى فرع وافتح PR بعنوان 'Live product filter'.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
live-component-authoring component intent, props, actions تحتاج إلى عنصر واجهة مستخدم تفاعلي في Symfony 0 — prompt-only
twig-component-authoring UI primitive description كتلة عرض قابلة لإعادة الاستخدام بدون تفاعلات خادم مباشرة 0
stimulus-controller-authoring behavior + targets/values التفاعل على جانب العميل الذي لا يحتاج إلى الخادم 0
turbo-integration frame/stream intent تحديثات الصفحة الجزئية واستجابات النموذج 0

التكلفة والحدود

تكلفة التشغيل

حصة API
لا توجد — المهارة هي markdown محلي
الرموز لكل استدعاء
يضيف حوالي 2–8k token للسياق عند تنشيط المهارة
التكلفة المالية
مجاني، مرخص بموجب MIT
نصيحة
احتفظ بمجلد المهارة صغيرًا — استنسخ فقط المهارات الفرعية التي تستخدمها إذا كان السياق محدودًا

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا توجد — لا توجد بيانات اعتماد مطلوبة
نقل البيانات الخارجي: لا توجد — حزمة تعليمات بحتة، لا توجد استدعاءات شبكة

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

لا تتفعل المهارة

تأكد من أن المجلد هو ~/.claude/skills/symfony-ux-skills/ ويحتوي على SKILL.md في الجذر. أعد تشغيل Claude Code.

تحقق: ls ~/.claude/skills/symfony-ux-skills/SKILL.md
يستخدم 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

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills