getsentry/criador-de-apresentacoes

O que criador-de-apresentacoes faz?

Crie slides de apresentação orientados a dados usando React, Vite e Recharts com a marca Sentry. Use quando solicitado a "criar uma apresentação", "montar slides", "fazer um deck", "criar uma apresentação de dados", "montar uma apresentação Sentry". Gera um aplicativo completo baseado em slides com gráficos, animações e saída HTML em arquivo único.

Como usar

1. Inicie o projeto: O skill irá gerar automaticamente a estrutura do projeto usando Vite + React.
2. Edite os slides: Cada slide é um componente React localizado em src/slides/. Você pode adicionar, remover ou modificar slides.
3. Adicione gráficos: Use Recharts para criar visualizações de dados dinâmicas. Exemplos estão incluídos.
4. Personalize o tema: A marca Sentry pode ser ajustada via o arquivo de tema (src/theme.js).
5. Exporte: Execute o comando de build para gerar um único arquivo HTML contendo toda a apresentação.

Estrutura do projeto

meu-projeto/
├── index.html
├── package.json
├── vite.config.js
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   ├── slides/
│   │   ├── Slide1.jsx
│   │   ├── Slide2.jsx
│   │   └── ...
│   ├── components/
│   │   ├── Chart.jsx
│   │   └── Animations.jsx
│   └── theme.js
└── README.md

Comandos principais

• npm install - Instala as dependências.
• npm run dev - Inicia o servidor de desenvolvimento.
• npm run build - Gera o HTML de arquivo único na pasta dist/.

Personalização

• Título: Edite o arquivo src/App.jsx.
• Slides: Cada arquivo em src/slides/ representa um slide. Importe e organize no App.jsx.
• Gráficos: Use Recharts nos componentes de slide para exibir dados.
• Animações: Adicione animações CSS ou use a biblioteca framer-motion.

Exemplo de slide com gráfico

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { name: 'Jan', uv: 4000 },
  { name: 'Fev', uv: 3000 },
  { name: 'Mar', uv: 2000 },
];

export default function Slide1() {
  return (
    <div>
      <h2>Dados do Primeiro Trimestre</h2>
      <BarChart width={400} height={300} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="uv" fill="#6C5FC7" />
      </BarChart>
    </div>
  );
}

Observações

• Certifique-se de ter o Node.js versão 18 ou superior.
• O tema Sentry utiliza a cor primária #6C5FC7 e a cor secundária #F9C526.
• O HTML de saída é autocontido e pode ser visualizado em qualquer navegador.