presentation-creator

by sentry

Create data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a… npx skills add https://github.com/getsentry/sentry-skills --skill presentation-creator Download ZIPGitHub844

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 2: Scaffold the Project

Create the project structure:

 /
├── index.html
├── package.json
├── vite.config.js
└── src/
 ├── main.jsx
 ├── App.jsx
 ├── App.css
 └── Charts.jsx

index.html

 
 
 
 
 
 
- 
 
- 
 
- 
 TITLE 
 
 
 

 
 
 

package.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

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({ plugins: [react(), viteSingleFile()] })

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './App.css'

ReactDOM.createRoot(document.getElementById('root')).render( )

Step 3: Build the Slide System

Read 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:

const SLIDES = [
 () => ( /* Slide 0: Title */ ),
 () => ( /* Slide 1: Context */ ),
 // ...
];

Each slide function returns a <div className="slide-content"> with:

• An <h2> heading

• Optional subtitle paragraph

• Main content (charts, cards, diagrams, tables)

• 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.

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 && TITLE 
}
 
 {SLIDES.map((S, i) => (
 
 
 
 

 

 ))}
 
 
 );
}

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 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 references/sentry-logo.svg (full wordmark) or references/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 references/sentry-logo.svg or references/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:

• Run npm install && npm run dev to start the dev server

• Iterate on chart data models and visual design

• Adjust animations, colors, and layout spacing

• 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 transitions