/ الدليل / الملعب / Interactive Slides
← كل الخوادم ↗ GitHub
● مجتمع sylvial928 ⚡ فوري

Interactive Slides

بواسطة sylvial928 · sylvial928/interactive-slides

قم بتحويل المحتوى إلى عرض تقديمي HTML متحرك جميل ومكتفي بذاته — Slide Deck، أو Scroll Story، أو Interactive Deck — وقم بتصدير .pptx بشكل اختياري.

إن الشرائح التفاعلية هي مهارة Claude Code التي تنتج ملف HTML واحد يمكنك فتحه في أي متصفح. ثلاثة أوضاع للعرض التقديمي (مجموعة الشرائح الكلاسيكية، قصة التمرير الطويلة، المجموعة التفاعلية الاستكشافية). يتم تحميل GSAP + Google Fonts + Chart.js بواسطة CDN؛ تعمل لوحة المفاتيح/النقر/اللمس/التمرير/التمرير على التنقل خارج الصندوق. يؤدي التصدير الاختياري pptxgenjs إلى إنتاج ملف .pptx قابل للتحرير حتى تتمكن من تسليمه إلى أحد أصحاب المصلحة الذين يعيشون في PowerPoint.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

interactive-slides-skill.replay ▶ جاهز
0/0

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

claude mcp add interactive-slides-skill -- git clone https://github.com/sylvial928/interactive-slides ~/.claude/skills/interactive-slides

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

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

استخدامات عملية: Interactive Slides

تحويل صفحة واحدة إلى مجموعة المستثمرين

👤 المؤسسون ورؤساء الوزراء يبنون أفكارهم ⏱ ~30 min beginner

متى تستخدمه: لديك المحتوى. تريد شكل سطح حقيقي في دقائق.

المتطلبات الأساسية
  • Node + pptxgenjs (اختياري، فقط لتصدير .pptx) — npm i -g pptxgenjs
  • تم تثبيت المهارة — استنساخ git في ~/.claude/skills/interactive-slides
الخطوات
  1. استدعاء المهارة
    / الشرائح التفاعلية - الوضع: مجموعة الشرائح. المحتوى: <صفحة واحدة>. الموضوع: الحد الأدنى من الظلام.✓ تم النسخ
    → يولد Deck.html؛ يفتح في المتصفح
  2. تكرار الأقسام
    أضف قسم "الجر" مع مخطط خطي لـ MRR.✓ تم النسخ
    → يتم عرض مخطط خطي Chart.js داخل الشريحة
  3. تصدير .pptx
    تصدير كـ pitch.pptx.✓ تم النسخ
    → تم حفظ ملف .pptx القابل للتحرير؛ النص قابل للتحرير بالكامل في PowerPoint

النتيجة: مجموعة يمكنك عرضها اليوم وإرسالها بالبريد الإلكتروني بتنسيق ‎.pptx غدًا.

المزالق
  • يفتقر ملف .pptx المُصدَّر إلى الرسوم المتحركة — الرسوم المتحركة بتنسيق HTML لا يتم إرسالها ذهابًا وإيابًا؛ احتفظ بـ HTML للمحادثات المباشرة، و.pptx لعمليات التسليم
اجمعها مع: mcp-echarts

أنشئ شرحًا لقصة التمرير

👤 الكتاب الفنيين والمسوقين ⏱ ~60 min intermediate

متى تستخدمه: تريد قطعة طويلة ذات نمط متوسط ​​مع صور مرئية يتم تشغيلها بالتمرير.

الخطوات
  1. اختر الوضع
    الوضع: انتقل القصة. المحتوى: هذه المقالة. أضف المخططات والمرئيات التي يتم تشغيلها بالتمرير.✓ تم النسخ
    → الإخراج عبارة عن صفحة قابلة للتمرير تحتوي على أقسام GSAP المثبتة
  2. سرعة اللحن
    قم بإبطاء تمرير الدبوس في قسم "المشكلة".✓ تم النسخ
    → تم تعديل الجدول الزمني للفرك

النتيجة: قطعة تمرير جذابة ينهيها القراء بالفعل.

المزالق
  • التحميل الزائد مع الآثار — رسم متحرك واحد لكل قسم؛ يجب أن تكون الراحة هادئة

منصة تجريبية تفاعلية لورشة عمل

👤 يدير المعلمون و DevRel ورش العمل ⏱ ~90 min intermediate

متى تستخدمه: تريد شرائح تحتوي على تمارين تفاعلية صغيرة مضمنة.

الخطوات
  1. الوضع: تفاعلي
    الوضع: سطح تفاعلي. قم بتضمين حقل إدخال + Chart.js الذي يتم تحديثه مباشرة.✓ تم النسخ
    → عنصر تفاعلي سلكي؛ تحديثات الرسم البياني على الإدخال
  2. إضافة استطلاع
    أضف شريحة "اختيار واحدة" التي تسجل النقرات محليًا وتسجلها.✓ تم النسخ
    → تحديثات العداد المحلية فقط عند النقر

النتيجة: سطح ذو شعور حي بدون خلفية.

التركيبات

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

interactive-slides-skill + mcp-echarts

قم بإنشاء المخططات عبر ECharts وقم بتضمينها في المجموعة

اعرض مخطط الإيرادات باستخدام مخططات mcp بتنسيق SVG؛ تضمينها في شريحة "الجر".✓ تم النسخ
interactive-slides-skill + claude-code-design-skills

قم بتطبيق رموز العلامة التجارية على موضوع سطح السفينة

استخدم الرموز المميزة للعلامة التجارية acme للوحة السطح واكتبها.✓ تم النسخ
interactive-slides-skill + magic-ui-mcp

اختر مكونات واجهة المستخدم الخاصة بوضع Interactive Deck

الوضع التفاعلي: استخدم شاشة التحديد Magic UI لشريحة شعارات الثقة.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
/interactive-slides (SKILL) mode + content + theme في أي وقت تحتاج إلى مجموعة أو قصة تمرير من المحتوى الموجود لديك بالفعل 0

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

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

حصة API
لا أحد
الرموز لكل استدعاء
معتدل - محتوى المجموعة يبلغ طوله HTML
التكلفة المالية
حر
نصيحة
احتفظ بالنثر لكل شريحة أقل من 80 كلمة؛ الطوابق تنتفخ بسرعة على خلاف ذلك.

الأمان

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

تخزين بيانات الاعتماد: لا أحد
نقل البيانات الخارجي: يتم تحميل GSAP وGoogle Fonts وChart.js من CDN. إذا كنت بحاجة إلى عدم الاتصال بالإنترنت بشكل كامل، فاطلب المهارة لتضمين المكتبات.

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

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

لا تتقدم الشرائح باستخدام مفاتيح الأسهم

تأكد من ربط مستمع لوحة المفاتيح؛ يتم حظر بعض المتصفحات عند تقديم ملف HTML من file://. جرب خادمًا محليًا: python3 -m http.server.

تحقق: Open dev console; inspect keyup handler
.pptx تصدير الرسوم المتحركة المفقودة

الرسوم المتحركة هي HTML فقط؛ .pptx يصدر النص + التخطيط. استخدم HTML للبث المباشر؛ .pptx لتسليم البريد الإلكتروني.

تحقق: Open the .pptx in PowerPoint; check layout only
تبدو الخطوط خاطئة في وضع عدم الاتصال

اطلب مهارة تضمين @font-face مع معرفات URI لبيانات base64 للاستخدام دون اتصال بالإنترنت.

تحقق: Open airplane-mode; load the HTML

البدائل

Interactive Slides مقابل البدائل

البديلمتى تستخدمهاالمقايضة
mck-ppt-design-skillتريد شرائح .pptx ذات النمط الاستشاري، وليس HTMLأقل تفاعلية؛ المزيد من تلميع الشرائح
mermaid-skillأنت بحاجة إلى مخططات، وليس سطح السفينةقطعة أثرية مختلفة
markmap-mcp-serverالخريطة الذهنية مناسبة بشكل أفضل من المجموعةشكل روائي مختلف

المزيد

الموارد

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

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

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