# Presentation Creator

Create data-driven presentation slides using React, Vite, and Recharts with Sentry...

- Repository: https://github.com/getsentry/skills (1107 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-10-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add getsentry/skills --skill presentation-creator -g -a claude-code -y`
Codex: `npx skills add getsentry/skills --skill presentation-creator -g -a codex -y`
Cursor: `npx skills add getsentry/skills --skill presentation-creator -g -a cursor -y`
Gemini CLI: `npx skills add getsentry/skills --skill presentation-creator -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add getsentry/skills`

## Description

Create data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a deck", "create a data presentation", "build a Sentry presentation". Scaffolds a complete slide-based app with charts, animations, and single-file HTML output.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Sentry Presentation Builder

Create interactive, data-driven presentation slides using React + Vite + Recharts, styled with the Sentry design system and built as a single distributable HTML file.

## Step 1: Gather Requirements

Ask the user:
1. What is the presentation topic?
2. How many slides (typically 5-8)?
3. What data/charts are needed? (time series, comparisons, diagrams, zone charts)
4. What is the narrative arc? (problem → solution, before → after, technical deep-dive)

### Data Assessment (CRITICAL)

Before designing any slides, assess whether the source content contains **real quantitative data** (numbers, percentages, measurements, time series, costs, metrics). Only create Recharts visualizations for slides where real data exists. Do NOT fabricate, estimate, or invent data to fill charts.

- **Has real data** → use a Recharts chart (bar, area, line, etc.)
- **Has no data** → use text-based layouts: cards, tables, bullet columns, diagrams, or quote blocks. Do NOT create a chart with made-up numbers.

If the source content is purely qualitative (narrative, opinions, strategy, process descriptions), the presentation should use zero charts. Recharts and `Charts.jsx` should only be included in the project if at least one slide has real data to visualize.

## Step 2: Scaffold the Project

Create the project structure:

```
<project-name>/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── Charts.jsx
```

### index.html

The rest: https://github.com/getsentry/skills/blob/HEAD/skills/presentation-creator/SKILL.md