presentation-creator
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.
Best use case
presentation-creator is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using presentation-creator should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/presentation-creator/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How presentation-creator Compares
| Feature / Agent | presentation-creator | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'
export default defineConfig({ plugins: [react(), viteSingleFile()] })
```
### main.jsx
```jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './App.css'
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
```
## Step 3: Build the Slide System
Read `${CLAUDE_SKILL_ROOT}/references/design-system.md` for the complete Sentry color palette, typography, CSS variables, layout utilities, and animation system.
### App.jsx Structure
Define slides as an array of functions returning JSX:
```jsx
const SLIDES = [
() => ( /* Slide 0: Title */ ),
() => ( /* Slide 1: Context */ ),
// ...
];
```
Each slide function returns a `<div className="slide-content">` with:
1. An `<h2>` heading
2. Optional subtitle paragraph
3. Main content (charts, cards, diagrams, tables)
4. Animation classes: `.anim`, `.d1`, `.d2`, `.d3` for staggered fade-in
Do NOT add category tag pills/badges above headings (e.g., "BACKGROUND", "EXPERIMENTS"). They look generic and add no value. Let the heading speak for itself.
### Navigation
Implement keyboard navigation (ArrowRight/Space = next, ArrowLeft = prev) and a bottom nav overlay with prev/next buttons, dot indicators, and slide number. The nav has **no border or background** — it floats transparently. A small low-contrast Sentry glyph watermark sits fixed in the top-left corner of every slide.
```jsx
function App() {
const [cur, setCur] = useState(0);
const go = useCallback((d) => setCur(c => Math.max(0, Math.min(SLIDES.length - 1, c + d))), []);
useEffect(() => {
const h = (e) => {
if (e.target.tagName === 'INPUT') return;
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(1); }
if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
};
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [go]);
return (
<>
{cur > 0 && <div className="glyph-watermark"><SentryGlyph size={50} /><span className="watermark-title">TITLE</span></div>}
<div className="progress" style={{ width: `${((cur + 1) / SLIDES.length) * 100}%` }} />
{SLIDES.map((S, i) => (
<div key={i} className={`slide ${i === cur ? 'active' : ''}`}>
<div className={`slide-content${i === cur ? ' anim' : ''}`}>
<S />
</div>
</div>
))}
<Nav cur={cur} total={SLIDES.length} go={go} setCur={setCur} />
</>
);
}
```
## Step 4: Create Charts (Only When Data Exists)
**IMPORTANT: Only create charts for slides backed by real, concrete data from the source content.** If a slide's content is qualitative (strategies, learnings, process descriptions, opinions), use text-based layouts instead (cards, tables, bullet lists, columns). Never invent numbers, fabricate percentages, or generate synthetic data to populate a chart. If you are unsure whether data is real or inferred, do NOT create a chart.
If NO slides require charts, skip this step entirely — do not create `Charts.jsx` or import Recharts.
When real data IS available, read `${CLAUDE_SKILL_ROOT}/references/chart-patterns.md` for Recharts component patterns including axis configuration, color constants, chart types, and data generation techniques.
Put all chart components in `Charts.jsx`. Key patterns:
- Use `ResponsiveContainer` with explicit height
- Wrap in `.chart-wrap` div with max-width 920px
- Use `useMemo` for data generation
- **Color rule**: Use the Tableau-inspired categorical palette (`CAT[]`) for distinguishing data series and groups. Only use semantic colors (`SEM_GREEN`, `SEM_RED`, `SEM_AMBER`) when the color itself carries meaning (good/bad, success/failure, warning).
- Common charts: `ComposedChart` with stacked `Area`/`Line`, `BarChart`, custom SVG diagrams
- **Every data point in a chart must come from the source content.** Do not interpolate, extrapolate, or round numbers to make charts look better.
## Step 5: Style with Sentry Design System
Apply the complete CSS from the design system reference. Key elements:
- **Font**: Rubik from Google Fonts
- **Colors**: CSS variables for UI chrome (`--purple`, `--dark`, `--muted`). Semantic CSS variables (`--semantic-green`, `--semantic-red`, `--semantic-amber`) only where color conveys meaning. Categorical palette (`CAT[]`) for all other data visualization.
- **Slides**: Absolute positioned, opacity transitions
- **Animations**: `fadeUp` keyframe with staggered delays
- **Layout**: `.cols` flex rows, `.cards` grid, `.chart-wrap` containers
- **Tags**: `.tag-purple`, `.tag-red`, `.tag-green`, `.tag-amber` for slide labels
- **Logo**: Read the official SVG from `${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg` (full wordmark) or `sentry-glyph.svg` (glyph only). Do NOT hardcode an approximation — always use the exact SVG paths from these files.
## Step 6: Common Slide Patterns
### Title Slide
Logo (from `${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg` or `sentry-glyph.svg`) + h1 + subtitle + author/date info.
### Problem/Context Slide
Tag + heading + 2-column card grid with icon headers.
### Data Comparison Slide
Tag + heading + side-by-side charts or before/after comparison table.
### Technical Deep-Dive Slide
Tag + heading + full-width chart + annotation bullets below.
### Summary/Decision Slide
Tag + heading + 3-column layout with category headers and bullet lists.
## Step 7: Iterate and Refine
After initial scaffolding:
1. Run `npm install && npm run dev` to start the dev server
2. Iterate on chart data models and visual design
3. Adjust animations, colors, and layout spacing
4. Build final output: `npm run build` produces a single HTML file in `dist/`
## Output Expectations
A working React + Vite project that:
- Renders as a keyboard-navigable slide deck
- Uses Sentry branding (colors, fonts, icons)
- Contains Recharts visualizations **only for slides with real quantitative data** from the source content — no fabricated data
- Omits `Charts.jsx` and the Recharts dependency entirely if no slides have real data
- Builds to a single distributable HTML file
- Has smooth fade-in animations on slide transitionsRelated Skills
Skill Creator Pro
A skill for creating new skills and iteratively improving them.
zustand-store-creator
Zustand Store Creator - Auto-activating skill for Frontend Development. Triggers on: zustand store creator, zustand store creator Part of the Frontend Development skill category.
websocket-client-creator
Websocket Client Creator - Auto-activating skill for API Integration. Triggers on: websocket client creator, websocket client creator Part of the API Integration skill category.
webhook-sender-creator
Webhook Sender Creator - Auto-activating skill for API Integration. Triggers on: webhook sender creator, webhook sender creator Part of the API Integration skill category.
waf-rule-creator
Waf Rule Creator - Auto-activating skill for Security Advanced. Triggers on: waf rule creator, waf rule creator Part of the Security Advanced skill category.
vue-composable-creator
Vue Composable Creator - Auto-activating skill for Frontend Development. Triggers on: vue composable creator, vue composable creator Part of the Frontend Development skill category.
vitest-test-creator
Vitest Test Creator - Auto-activating skill for Test Automation. Triggers on: vitest test creator, vitest test creator Part of the Test Automation skill category.
vitepress-config-creator
Vitepress Config Creator - Auto-activating skill for Technical Documentation. Triggers on: vitepress config creator, vitepress config creator Part of the Technical Documentation skill category.
vertex-ai-pipeline-creator
Vertex Ai Pipeline Creator - Auto-activating skill for GCP Skills. Triggers on: vertex ai pipeline creator, vertex ai pipeline creator Part of the GCP Skills skill category.
tutorial-outline-creator
Tutorial Outline Creator - Auto-activating skill for Technical Documentation. Triggers on: tutorial outline creator, tutorial outline creator Part of the Technical Documentation skill category.
troubleshooting-guide-creator
Troubleshooting Guide Creator - Auto-activating skill for Technical Documentation. Triggers on: troubleshooting guide creator, troubleshooting guide creator Part of the Technical Documentation skill category.
threat-model-creator
Threat Model Creator - Auto-activating skill for Security Advanced. Triggers on: threat model creator, threat model creator Part of the Security Advanced skill category.