● مجتمع
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.
لماذا تستخدمه
الميزات الأساسية
- ثلاثة أوضاع: Slide Deck، Scroll Story، Interactive Deck
- HTML قائم بذاته — ملف واحد، في أي متصفح
- الرسوم المتحركة GSAP، خطوط Google، Chart.js (CDN)
- التنقل: لوحة المفاتيح / النقر / اللمس / التمرير / عجلة التمرير
- تصدير اختياري .pptx عبر pptxgenjs
عرض مباشر
كيف يبدو في الممارسة
interactive-slides-skill.replay
▶ جاهز
حالات الاستخدام
استخدامات عملية: Interactive Slides
متى تستخدمه: لديك المحتوى. تريد شكل سطح حقيقي في دقائق.
الخطوات
-
استدعاء المهارة
/ الشرائح التفاعلية - الوضع: مجموعة الشرائح. المحتوى: <صفحة واحدة>. الموضوع: الحد الأدنى من الظلام.✓ تم النسخ
→ يولد Deck.html؛ يفتح في المتصفح
-
تكرار الأقسام
أضف قسم "الجر" مع مخطط خطي لـ MRR.✓ تم النسخ
→ يتم عرض مخطط خطي Chart.js داخل الشريحة
-
تصدير .pptx
تصدير كـ pitch.pptx.✓ تم النسخ
→ تم حفظ ملف .pptx القابل للتحرير؛ النص قابل للتحرير بالكامل في PowerPoint
النتيجة: مجموعة يمكنك عرضها اليوم وإرسالها بالبريد الإلكتروني بتنسيق .pptx غدًا.
المزالق
- يفتقر ملف .pptx المُصدَّر إلى الرسوم المتحركة — الرسوم المتحركة بتنسيق HTML لا يتم إرسالها ذهابًا وإيابًا؛ احتفظ بـ HTML للمحادثات المباشرة، و.pptx لعمليات التسليم
متى تستخدمه: تريد قطعة طويلة ذات نمط متوسط مع صور مرئية يتم تشغيلها بالتمرير.
الخطوات
-
اختر الوضع
الوضع: انتقل القصة. المحتوى: هذه المقالة. أضف المخططات والمرئيات التي يتم تشغيلها بالتمرير.✓ تم النسخ
→ الإخراج عبارة عن صفحة قابلة للتمرير تحتوي على أقسام GSAP المثبتة
-
سرعة اللحن
قم بإبطاء تمرير الدبوس في قسم "المشكلة".✓ تم النسخ
→ تم تعديل الجدول الزمني للفرك
النتيجة: قطعة تمرير جذابة ينهيها القراء بالفعل.
المزالق
- التحميل الزائد مع الآثار — رسم متحرك واحد لكل قسم؛ يجب أن تكون الراحة هادئة
متى تستخدمه: تريد شرائح تحتوي على تمارين تفاعلية صغيرة مضمنة.
الخطوات
-
الوضع: تفاعلي
الوضع: سطح تفاعلي. قم بتضمين حقل إدخال + Chart.js الذي يتم تحديثه مباشرة.✓ تم النسخ
→ عنصر تفاعلي سلكي؛ تحديثات الرسم البياني على الإدخال
-
إضافة استطلاع
أضف شريحة "اختيار واحدة" التي تسجل النقرات محليًا وتسجلها.✓ تم النسخ
→ تحديثات العداد المحلية فقط عند النقر
النتيجة: سطح ذو شعور حي بدون خلفية.
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
قم بإنشاء المخططات عبر ECharts وقم بتضمينها في المجموعة
اعرض مخطط الإيرادات باستخدام مخططات mcp بتنسيق SVG؛ تضمينها في شريحة "الجر".✓ تم النسخ
قم بتطبيق رموز العلامة التجارية على موضوع سطح السفينة
استخدم الرموز المميزة للعلامة التجارية acme للوحة السطح واكتبها.✓ تم النسخ
اختر مكونات واجهة المستخدم الخاصة بوضع Interactive Deck
الوضع التفاعلي: استخدم شاشة التحديد Magic UI لشريحة شعارات الثقة.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- لا أحد
- الرموز لكل استدعاء
- معتدل - محتوى المجموعة يبلغ طوله HTML
- التكلفة المالية
- حر
- نصيحة
- احتفظ بالنثر لكل شريحة أقل من 80 كلمة؛ الطوابق تنتفخ بسرعة على خلاف ذلك.
الأمان
الصلاحيات والأسرار ونطاق الأثر
تخزين بيانات الاعتماد: لا أحد
نقل البيانات الخارجي: يتم تحميل GSAP وGoogle Fonts وChart.js من CDN. إذا كنت بحاجة إلى عدم الاتصال بالإنترنت بشكل كامل، فاطلب المهارة لتضمين المكتبات.
- تبعيات CDN تعني أن المستلمين يحتاجون إلى شبكة لعرض الرسوم المتحركة. بالنسبة للعروض التوضيحية ذات الفجوات الهوائية، اطلب بنية مضمنة.
- تقوم الطوابق التفاعلية بتخزين الحالة في localStorage؛ لاحظ ما إذا كان سيتم مشاركة المجموعة بشكل عام.
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
لا تتقدم الشرائح باستخدام مفاتيح الأسهم
تأكد من ربط مستمع لوحة المفاتيح؛ يتم حظر بعض المتصفحات عند تقديم ملف 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 | الخريطة الذهنية مناسبة بشكل أفضل من المجموعة | شكل روائي مختلف |