frontend-slides (Claude Skill) — Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Les slides sont en HTML — versionnables avec git, différenciables
Transitions et animations CSS (pas de fichiers Keynote fragiles)
Extraits de code avec coloration syntaxique correcte
Responsive — fonctionne laptop → projecteur → téléphone
Export PDF en backup

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

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

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.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 utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

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
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "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
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

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

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

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

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : frontend-slides

Construire un deck de conférence de 20 minutes à partir d'un plan

👤 Devs présentant à des meetups / conférences ⏱ ~90 min intermediate

Quand l'utiliser : Vous avez un plan et 48 heures. Vous ne voulez pas vous battre avec les templates Keynote.

Prérequis

Skill installée — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
Plan en markdown — Un fichier avec des titres de section = slides

Déroulement

Générer la structure

Utilise frontend-slides. À partir de /talks/outline.md, génère un deck dans /talks/deck/. Un HTML par pattern de slide, CSS partagé.✓ Copié

→ Dossier avec index.html + assets de slides ; s'ouvre dans le navigateur
Soigner les slides de code

Pour les slides de code, utilise le style réel de mon dépôt (regarde src/example.ts). Ajoute la coloration syntaxique.✓ Copié

→ Le code s'affiche avec la coloration et votre formatage
Backup PDF

Exporte en PDF pour le scénario « le projecteur ne se connecte pas ».✓ Copié

→ PDF sauvegardé aux côtés du HTML

Résultat : Un deck que vous pouvez itérer avec git, héberger sur GitHub Pages et présenter depuis un navigateur.

Pièges

Le WiFi de la salle est mauvais et votre deck charge des assets distants — Intégrez/incorporez tout ; testez hors ligne avant la conférence

Combiner avec : filesystem

Un deck de démo où code + UI sont intégrés en direct dans les slides

👤 Fondateurs montrant un prototype ⏱ ~120 min intermediate

Quand l'utiliser : Vous voulez des slides où vous pouvez réellement interagir avec le produit en cours de présentation.

Déroulement

Mise en page

Génère un pitch deck de 10 slides. Sur le slide 4, intègre un iframe de la démo produit. Sur le slide 7, intègre un CodePen en direct.✓ Copié

→ Le deck a des iframes aux bons slides
Tester la responsivité

Re-rendu pour un projecteur 1024x768. Est-ce que quelque chose casse ?✓ Copié

→ Correctifs de breakpoints appliqués

Résultat : Un deck qui ne ressemble pas à un deck — il ressemble au produit.

Pièges

La CSP du iframe bloque l'intégration — Hébergez la démo sous un domaine qui autorise le framing, ou utilisez un enregistrement

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

frontend-slides-skill + filesystem

Versionner le deck aux côtés de votre dépôt

Génère dans /talks/2026-05-conf/ et commit.✓ Copié

frontend-slides-skill + github

Déployer via GitHub Pages

Pousse le deck vers une branche gh-pages et montre-moi l'URL.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler
scaffold_deck	outline.md	Début de tout deck
add_slide	title, content	Ajouter un slide
pdf_export	deck/	Livrable de backup

Coût et limites

Coût d'exécution

Quota d'API: N/A
Tokens par appel: Proportionnel à la taille du deck
Monétaire: Gratuit
Astuce: Générez d'abord le squelette, puis peaufinez slide par slide plutôt qu'en une seule passe massive

Sécurité

Permissions, secrets, portée

Portées minimales : filesystem-write

Stockage des identifiants : Aucun

Sortie de données : Aucune ; votre deck peut référencer des assets distants

Dépannage

Erreurs courantes et correctifs

Les transitions ne fonctionnent pas dans Safari

Consultez le tableau de compatibilité navigateurs dans la doc de la skill ; la config par défaut utilise des propriétés préfixées

Coloration syntaxique du code manquante

Prism/Shiki intégré nécessite le chargement des assets — assurez-vous que les chemins relatifs se résolvent lors de l'hébergement

L'export PDF déforme les mises en page

Utilisez Chrome headless pour l'impression — la config par défaut de la skill est Puppeteer en mode paysage

Alternatives

frontend-slides vs autres

Alternative	Quand l'utiliser	Compromis
reveal.js / Slidev	Vous voulez un framework complet et êtes à l'aise pour le configurer	Plus de fonctionnalités ; plus d'apprentissage
Keynote / PowerPoint	Les environnements corporate exigent des decks en fichiers	Pas web-natif ; plus difficile à partager

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills