/ الدليل / الملعب / frontend-slides
← كل الخوادم ↗ GitHub
● مجتمع zarazhangrui ⚡ فوري

frontend-slides

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

Generate web-native slide decks with Claude — HTML/CSS slides, real transitions, no PowerPoint, shareable via URL.

frontend-slides is a Claude Code skill that produces slide decks as single-page HTML/CSS sites. Each slide is a section; transitions are CSS; code snippets render properly; you host on any static server. Good for tech talks, demos, and pitches where a browser-first deck beats a file to download.

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

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

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

عرض مباشر

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

جاهز

التثبيت

اختر العميل

~/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

Build a 20-minute tech talk deck from an outline

👤 Devs presenting at meetups / conferences ⏱ ~90 min intermediate

متى تستخدمه: You have an outline and 48 hours. You don't want to wrestle with Keynote templates.

المتطلبات الأساسية
  • Skill installed — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
  • Outline in markdown — One file with section headings = slides
الخطوات
  1. Scaffold
    Use frontend-slides. From /talks/outline.md, generate a deck in /talks/deck/. One HTML per slide pattern, shared CSS.✓ تم النسخ
    → Folder with index.html + slide assets; opens in browser
  2. Polish code slides
    For code slides, use my repo's actual style (look at src/example.ts). Add syntax highlighting.✓ تم النسخ
    → Code renders with proper highlighting and your formatting
  3. PDF backup
    Export to PDF for the "projector won't connect" scenario.✓ تم النسخ
    → PDF saved alongside HTML

النتيجة: A deck you can iterate on with git, host on GitHub Pages, and present from a browser.

المزالق
  • Venue WiFi is bad and your deck has remote assets — Inline/embed everything; test offline before the talk
اجمعها مع: filesystem

A demo deck where code + UI embed live in slides

👤 Founders showing a prototype ⏱ ~120 min intermediate

متى تستخدمه: You want slides where you can actually interact with the product mid-deck.

الخطوات
  1. Layout
    Generate a 10-slide pitch deck. On slide 4, embed an iframe of the product demo. On slide 7, embed a live CodePen.✓ تم النسخ
    → Deck has iframes at the right slides
  2. Rehearse responsiveness
    Re-render for a 1024x768 projector. Does anything break?✓ تم النسخ
    → Breakpoint fixes applied

النتيجة: A deck that doesn't feel like a deck — it feels like the product.

المزالق
  • Iframe CSP blocks embed — Host the demo under a domain that allows framing, or use a recording

التركيبات

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

frontend-slides-skill + filesystem

Version-control the deck alongside your repo

Scaffold into /talks/2026-05-conf/ and commit.✓ تم النسخ
frontend-slides-skill + github

Deploy via GitHub Pages

Push the deck to a gh-pages branch and show me the URL.✓ تم النسخ

الأدوات

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

الأداةالمدخلاتمتى تستدعيهاالتكلفة
scaffold_deck outline.md Start of any deck 0
add_slide title, content Append a slide 0
pdf_export deck/ Backup deliverable 0

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

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

حصة API
N/A
الرموز لكل استدعاء
Proportional to deck size
التكلفة المالية
Free
نصيحة
Generate the skeleton first, then polish slide by slide rather than one huge pass

الأمان

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

الحد الأدنى من الصلاحيات: filesystem-write
تخزين بيانات الاعتماد: None
نقل البيانات الخارجي: None; your deck may reference remote assets

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

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

Transitions don't work in Safari

Check browser compatibility table in skill docs; default config uses prefixed properties

Code syntax highlighting missing

Bundled Prism/Shiki requires asset loading — make sure relative paths resolve when hosted

PDF export mangles layouts

Use Chrome headless for print — the skill's default is Puppeteer with landscape preset

البدائل

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

البديلمتى تستخدمهاالمقايضة
reveal.js / SlidevYou want a full framework and are comfortable configuring itMore features; more learning
Keynote / PowerPointCorporate settings require file-based decksNot web-native; harder to share

المزيد

الموارد

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

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

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