getsentry/creador-de-presentaciones

¿Qué hace creador-de-presentaciones?

Crea diapositivas de presentaciones basadas en datos utilizando React, Vite y Recharts con la marca de Sentry. Úsalo cuando te pidan "crear una presentación", "hacer diapositivas", "armar un deck", "crear una presentación de datos", "hacer una presentación de Sentry". Genera una aplicación completa basada en diapositivas con gráficos, animaciones y salida HTML en un solo archivo.

¿Qué hace?

Este skill configura un proyecto de Vite con React, Recharts y estilos de Sentry para construir una presentación de diapositivas que:

• Carga datos desde un archivo CSV o JSON (los datos de ejemplo se incluyen o se generan).
• Renderiza diapositivas con componentes React, cada diapositiva puede contener texto, gráficos (de Recharts), imágenes y animaciones.
• Permite navegación entre diapositivas (teclado o clic).
• Genera un único archivo HTML listo para compartir o incrustar.
• Incluye la marca de Sentry (colores, logo, tipografía) de forma predeterminada.

¿Por qué es útil?

• Ahorra tiempo: No necesitas configurar manualmente un proyecto de presentación desde cero.
• Consistencia: Todas las presentaciones siguen la misma estructura y estilo.
• Flexibilidad: Puedes personalizar las diapositivas, los datos y los gráficos.
• Portabilidad: El resultado es un solo archivo HTML, fácil de enviar por correo o subir a un servidor.

Plataformas compatibles

• Claude Code
• Cursor
• Codex (OpenAI)
• Cualquier agente de IA que soporte la ejecución de skills o comandos de scaffolding

Cómo funciona

1. El agente recibe una solicitud para crear una presentación (por ejemplo, "crea una presentación sobre el rendimiento de la aplicación").
2. El skill ejecuta un comando de scaffolding que crea una carpeta con el proyecto Vite.
3. Se genera una estructura de archivos que incluye:
   • package.json con dependencias (react, recharts, vite).
   • vite.config.js configurado para exportar un solo HTML.
   • src/ con componentes de diapositivas (Slide1.jsx, Slide2.jsx, etc.).
   • src/data/ con datos de ejemplo (por ejemplo, datos.json).
   • src/App.jsx que maneja la navegación.
   • src/index.css con estilos de Sentry.
4. El agente puede modificar los datos y el contenido de las diapositivas según la solicitud.
5. Finalmente, se ejecuta npm run build para generar el archivo dist/index.html.

Ejemplo de uso

Solicitud del usuario: "Crea una presentación de 3 diapositivas sobre el uso de la API, con un gráfico de barras que muestre solicitudes por endpoint."

Acción del agente (usando el skill):

1. El skill crea el proyecto base.
2. El agente personaliza los datos y las diapositivas:
   • Diapositiva 1: Título y descripción.
   • Diapositiva 2: Gráfico de barras con datos de endpoints.
   • Diapositiva 3: Conclusiones.
3. Se genera el archivo HTML final.

Resultado: Un deck listo para presentar en minutos.

Notas técnicas

• Dependencias principales: react, react-dom, recharts, vite.
• Salida: dist/index.html (autocontenido).
• Personalización: Los estilos de Sentry se pueden sobrescribir editando src/index.css.
• Datos: Se recomienda usar datos simulados o subir un archivo CSV/JSON.

Referencia rápida de comandos

# Construir el proyecto (genera dist/index.html)
npm run build

# Iniciar servidor de desarrollo
npm run dev

Licencia

Este skill se proporciona bajo los términos de la licencia MIT (ver archivo LICENSE en el repositorio original).