frontend-slides (Claude Skill) — Instalar & Demo ao vivo

Por que usar

Principais recursos

Slides em HTML — versionáveis, com diff rastreável
Transições e animações CSS (sem arquivos frágeis do Keynote)
Trechos de código com syntax highlighting adequado
Responsivo — funciona em laptop → projetor → celular
Exportar para PDF como backup

Demo ao vivo

Como fica na prática

pronto

Instalar

Escolha seu cliente

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

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um 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"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: frontend-slides

Criar um deck para um tech talk de 20 minutos a partir de um esboço

👤 Devs apresentando em meetups e conferências ⏱ ~90 min intermediate

Quando usar: Você tem um esboço e 48 horas. Não quer brigar com templates do Keynote.

Pré-requisitos

Skill instalado — git clone https://github.com/zarazhangrui/frontend-slides ~/.claude/skills/frontend-slides
Esboço em markdown — Um arquivo com títulos de seção = slides

Fluxo

Estruturar

Use frontend-slides. A partir de /talks/outline.md, gere um deck em /talks/deck/. Padrão de um HTML por slide, CSS compartilhado.✓ Copiado

→ Pasta com index.html + assets dos slides; abre no navegador
Polir slides de código

Para slides de código, use o estilo real do meu repositório (veja src/example.ts). Adicione syntax highlighting.✓ Copiado

→ Código renderizado com highlighting adequado e sua formatação
PDF de backup

Exporte para PDF para o cenário "o projetor não conecta".✓ Copiado

→ PDF salvo junto com o HTML

Resultado: Um deck que você pode iterar com git, hospedar no GitHub Pages e apresentar a partir de um navegador.

Armadilhas

O WiFi do local é ruim e seu deck tem assets remotos — Embutir tudo inline; teste offline antes da apresentação

Combine com: filesystem

Um deck de demo onde código e UI aparecem ao vivo nos slides

👤 Fundadores mostrando um protótipo ⏱ ~120 min intermediate

Quando usar: Você quer slides em que pode realmente interagir com o produto no meio da apresentação.

Fluxo

Layout

Gere um pitch deck de 10 slides. No slide 4, incorpore um iframe da demo do produto. No slide 7, incorpore um CodePen ao vivo.✓ Copiado

→ Deck com iframes nos slides certos
Testar responsividade

Renderize novamente para um projetor 1024x768. Algo quebra?✓ Copiado

→ Correções de breakpoint aplicadas

Resultado: Um deck que não parece um deck — parece o produto.

Armadilhas

CSP do iframe bloqueia o embed — Hospede a demo em um domínio que permite framing, ou use uma gravação

Combinações

Combine com outros MCPs para 10× de alavancagem

frontend-slides-skill + filesystem

Versionar o deck junto com o repositório

Estruture em /talks/2026-05-conf/ e faça commit.✓ Copiado

frontend-slides-skill + github

Publicar via GitHub Pages

Faça push do deck para um branch gh-pages e me mostre a URL.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar
scaffold_deck	outline.md	Início de qualquer deck
add_slide	title, content	Adicionar um slide
pdf_export	deck/	Entregável de backup

Custo e limites

O que custa rodar

Cota de API: N/A
Tokens por chamada: Proporcional ao tamanho do deck
Monetário: Gratuito
Dica: Gere o esqueleto primeiro, depois polir slide por slide, em vez de uma única passagem grande

Segurança

Permissões, segredos, alcance

Escopos mínimos: filesystem-write

Armazenamento de credenciais: Nenhum

Saída de dados: Nenhum; seu deck pode referenciar assets remotos

Solução de problemas

Erros comuns e correções

Transições não funcionam no Safari

Verifique a tabela de compatibilidade do navegador na documentação do skill; a configuração padrão usa propriedades com prefixo

Syntax highlighting de código ausente

O Prism/Shiki embutido requer carregamento de assets — certifique-se que os caminhos relativos resolvem quando hospedado

Exportação para PDF distorce layouts

Use Chrome headless para impressão — o padrão do skill é Puppeteer com preset paisagem

Alternativas

frontend-slides vs. outros

Alternativa	Quando usar	Troca
reveal.js / Slidev	Você quer um framework completo e está confortável para configurá-lo	Mais recursos; mais aprendizado
Keynote / PowerPoint	Ambientes corporativos exigem decks baseados em arquivo	Não é nativo para web; mais difícil de compartilhar

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills