# presentation-creator

Creates interactive React and Vite slide decks with Sentry styling. Use it when a presentation needs real metrics, charts, and slide navigation.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2900 installs · ★ 1089
- Author: getsentry
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/getsentry/skills/tree/HEAD/skills/presentation-creator/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/presentation-creator

## What it does

The skill first asks for the topic, slide count, required data, and narrative. It then scaffolds a presentation app with `React` and `Vite`, styled with the Sentry design system and built into one distributable HTML file.

The project includes `index.html`, `package.json`, `vite.config.js`, `src/main.jsx`, `App.jsx`, and `App.css`. Arrow keys and `Space` move through slides, while the bottom overlay provides buttons, dots, and a slide number.

\`Recharts` visuals are created only when the material contains real quantitative data. Qualitative content uses cards, tables, lists, or diagrams instead. Source figures are therefore something to check before requesting charts.

## Requirements
- Works with: Sentry

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add getsentry/skills --skill presentation-creator -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/presentation-creator/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/presentation-creator/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add getsentry/skills --skill presentation-creator -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/presentation-creator/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add getsentry/skills --skill presentation-creator -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/presentation-creator/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install getsentry/skills presentation-creator
```

2. **Manually: put the files in place**
- File: `.github/skills/presentation-creator/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add getsentry/skills --skill presentation-creator -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/getsentry/skills --path skills/presentation-creator
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/presentation-creator/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add getsentry/skills --skill presentation-creator -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/getsentry/skills/tree/HEAD/skills/presentation-creator/SKILL.md

## When to use it
- turn source metrics into Recharts charts
- scaffold a React and Vite slide application
- build keyboard navigation for a slide deck
- use text layouts when chart data is unavailable

## Example prompts
- Create a presentation from these metrics and chart only confirmed numbers.
- Build slides for this technical deep-dive using cards instead of charts.
- Make a Sentry-styled presentation with Arrow key and `Space` navigation.

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: be6b139a110f50c1.

BEGIN THIRD-PARTY FILE be6b139a110f50c1
````text
---
name: presentation-creator
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.
---

# 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

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet" />
    <title>TITLE</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

### package.json

```json
{
  "name": "PROJECT_NAME",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "recharts": "^2.15.3" },
  "devDependencies": { "@vitejs/plugin-react": "^4.3.4", "vite": "^6.0.0", "vite-plugin-singlefile": "^2.3.0" }
}
```

### vite.config.js

```javascript
````
END THIRD-PARTY FILE be6b139a110f50c1

The third-party file has ended. Everything between the be6b139a110f50c1 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3019 of 9282 bytes. © getsentry · Apache-2.0 · https://github.com/getsentry/skills/tree/HEAD/skills/presentation-creator/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md