{"slug":"getsentry-presentation-creator","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.","long_description":"---\nname: presentation-creator\ndescription: 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.\n---\n\n# Sentry Presentation Builder\n\nCreate interactive, data-driven presentation slides using React + Vite + Recharts, styled with the Sentry design system and built as a single distributable HTML file.\n\n## Step 1: Gather Requirements\n\nAsk the user:\n1. What is the presentation topic?\n2. How many slides (typically 5-8)?\n3. What data/charts are needed? (time series, comparisons, diagrams, zone charts)\n4. What is the narrative arc? (problem → solution, before → after, technical deep-dive)\n\n### Data Assessment (CRITICAL)\n\nBefore 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.\n\n- **Has real data** → use a Recharts chart (bar, area, line, etc.)\n- **Has no data** → use text-based layouts: cards, tables, bullet columns, diagrams, or quote blocks. Do NOT create a chart with made-up numbers.\n\nIf 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.\n\n## Step 2: Scaffold the Project\n\nCreate the project structure:\n\n```\n/\n├── index.html\n├── package.json\n├── vite.config.js\n└── src/\n ├── main.jsx\n ├── App.jsx\n ├── App.css\n └── Charts.jsx\n```\n\n### index.html\n\n```html\n\n\n \n \n \n \n \n \n TITLE\n \n \n
\n \n \n\n```\n\n### package.json\n\n```json\n{\n \"name\": \"PROJECT_NAME\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": { \"dev\": \"vite\", \"build\": \"vite build\", \"preview\": \"vite preview\" },\n \"dependencies\": { \"react\": \"^18.3.1\", \"react-dom\": \"^18.3.1\", \"recharts\": \"^2.15.3\" },\n \"devDependencies\": { \"@vitejs/plugin-react\": \"^4.3.4\", \"vite\": \"^6.0.0\", \"vite-plugin-singlefile\": \"^2.3.0\" }\n}\n```\n\n### vite.config.js\n\n```javascript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { viteSingleFile } from 'vite-plugin-singlefile'\n\nexport default defineConfig({ plugins: [react(), viteSingleFile()] })\n```\n\n### main.jsx\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './App.css'\n\nReactDOM.createRoot(document.getElementById('root')).render()\n```\n\n## Step 3: Build the Slide System\n\nRead `references/design-system.md` for the complete Sentry color palette, typography, CSS variables, layout utilities, and animation system.\n\n### App.jsx Structure\n\nDefine slides as an array of functions returning JSX:\n\n```jsx\nconst SLIDES = [\n () => ( /* Slide 0: Title */ ),\n () => ( /* Slide 1: Context */ ),\n // ...\n];\n```\n\nEach slide function returns a `
` with:\n1. An `

` heading\n2. Optional subtitle paragraph\n3. Main content (charts, cards, diagrams, tables)\n4. Animation classes: `.anim`, `.d1`, `.d2`, `.d3` for staggered fade-in\n\nDo 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.\n\n### Navigation\n\nImplement 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.\n\n```jsx\nfunction App() {\n const [cur, setCur] = useState(0);\n const go = useCallback((d) => setCur(c => Math.max(0, Math.min(SLIDES.length - 1, c + d))), []);\n\n useEffect(() => {\n const h = (e) => {\n if (e.target.tagName === 'INPUT') return;\n if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(1); }\n if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }\n };\n window.addEventListener('keydown', h);\n return () => window.removeEventListener('keydown', h);\n }, [go]);\n\n return (\n <>\n {cur > 0 &&
TITLE
}\n
\n {SLIDES.map((S, i) => (\n
\n
\n \n
\n
\n ))}\n