/ الدليل / الملعب / frontend-slides
● مجتمع zarazhangrui ⚡ فوري

frontend-slides

بواسطة zarazhangrui · zarazhangrui/frontend-slides

ولّد عروض شرائح ويب أصيلة مع Claude — شرائح HTML/CSS، انتقالات حقيقية، لا PowerPoint، قابلة للمشاركة عبر URL.

frontend-slides مهارة Claude Code تُنتج عروض شرائح كمواقع HTML/CSS أحادية الصفحة. كل شريحة قسم؛ الانتقالات CSS؛ مقتطفات الكود تُعرض بشكل صحيح؛ تستضيف على أي خادم ثابت. مناسبة للمحادثات التقنية والعروض التجريبية والعروض التقديمية حيث تتفوق حزمة المتصفح على ملف للتنزيل.

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

استخدامات عملية: frontend-slides

بناء عرض محادثة تقنية لمدة 20 دقيقة من مخطط

👤 المطورون الذين يُقدّمون في اجتماعات/مؤتمرات ⏱ ~90 min intermediate

متى تستخدمه: لديك مخطط و48 ساعة. لا تريد الصراع مع قوالب Keynote.

المتطلبات الأساسية
  • المهارة مثبَّتة — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
  • المخطط بصيغة markdown — ملف واحد بعناوين أقسام = شرائح
الخطوات
  1. الهيكلة
    استخدم frontend-slides. من /talks/outline.md، ولّد عرضًا في /talks/deck/. نمط HTML واحد لكل شريحة، CSS مشترك.✓ تم النسخ
    → مجلد يحتوي index.html + أصول الشرائح؛ يفتح في المتصفح
  2. تلميع شرائح الكود
    لشرائح الكود، استخدم أسلوب مستودعي الفعلي (انظر src/example.ts). أضف تمييزًا صياغيًا.✓ تم النسخ
    → الكود يُعرض بتمييز سليم وتنسيقك
  3. نسخة PDF احتياطية
    صدّر إلى PDF لسيناريو «البروجكتور لن يتصل».✓ تم النسخ
    → PDF محفوظ بجانب HTML

النتيجة: عرض يمكن التكرار عليه بـ git، استضافته على GitHub Pages، وتقديمه من متصفح.

المزالق
  • Wi-Fi القاعة سيئ وعرضك يحتوي أصولًا بعيدة — ضمّن كل شيء؛ اختبر بلا اتصال قبل المحادثة
اجمعها مع: filesystem

عرض تجريبي يدمج الكود والواجهة بشكل مباشر في الشرائح

👤 المؤسسون الذين يعرضون نموذجًا أوليًا ⏱ ~120 min intermediate

متى تستخدمه: تريد شرائح يمكنك فيها فعليًا التفاعل مع المنتج في منتصف العرض.

الخطوات
  1. التخطيط
    ولّد عرضًا تقديميًا من 10 شرائح. في الشريحة 4، ضمّن iframe للعرض التجريبي للمنتج. في الشريحة 7، ضمّن CodePen مباشرًا.✓ تم النسخ
    → العرض يحتوي iframes في الشرائح الصحيحة
  2. تجربة التجاوب
    أعد التصيير لبروجكتور 1024x768. هل ينكسر شيء؟✓ تم النسخ
    → إصلاحات نقاط التوقف مُطبَّقة

النتيجة: عرض لا يبدو عرضًا — يبدو المنتج نفسه.

المزالق
  • CSP يحجب تضمين iframe — استضف العرض التجريبي تحت نطاق يسمح بالتأطير، أو استخدم تسجيلًا

التركيبات

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

frontend-slides-skill + filesystem

إدارة إصدار العرض بجانب مستودعك

ضع الهيكل في /talks/2026-05-conf/ وأودعه.✓ تم النسخ
frontend-slides-skill + github

نشر عبر GitHub Pages

ادفع العرض إلى فرع gh-pages وأرني عنوان URL.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
scaffold_deck outline.md بداية أي عرض 0
add_slide title, content إضافة شريحة 0
pdf_export deck/ مُسلَّم احتياطي 0

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

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

حصة API
N/A
الرموز لكل استدعاء
يتناسب مع حجم العرض
التكلفة المالية
مجاني
نصيحة
ولّد الهيكل أولًا، ثم لمّع شريحةً بشريحة بدلًا من جولة واحدة ضخمة

الأمان

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

الحد الأدنى من الصلاحيات: filesystem-write
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: لا شيء؛ عرضك قد يستعين بأصول بعيدة

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

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

الانتقالات لا تعمل في Safari

تحقق من جدول توافق المتصفح في وثائق المهارة؛ الإعداد الافتراضي يستخدم خصائص مسبوقة

تمييز صياغة الكود مفقود

Prism/Shiki المحزوم يتطلب تحميل الأصول — تأكد من حل المسارات النسبية عند الاستضافة

تصدير PDF يُشوّه التخطيطات

استخدم Chrome غير المرئي للطباعة — الافتراضي في المهارة Puppeteer مع ضبط landscape

البدائل

frontend-slides مقابل البدائل

البديلمتى تستخدمهاالمقايضة
reveal.js / Slidevتريد إطار عمل كاملًا وتُريح نفسك مع إعدادهمزايا أكثر؛ تعلم أكثر
Keynote / PowerPointالبيئات المؤسسية تتطلب عروضًا قائمة على الملفاتليس ويبًا أصيلًا؛ أصعب للمشاركة

المزيد

الموارد

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

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

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