AutoGineer
Generated banner for Presentation Creator
Generated logo for Presentation Creator

Presentation Creator

SentryOfficialPublished by Sentry

  • Skill
  • Content generator
  • Documents and content
  • Apache-2.0
  • No issues found
Download ZIP

From the author

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.
— the description by Sentry

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The presentation-creator skill generates a complete, single-file HTML presentation deck using a modern React and Vite stack. It is designed to produce professional, data-rich slides that adhere to the Sentry design system. The skill emphasizes data integrity, requiring users to provide real quantitative data for any visualizations, and provides a structured approach to building slides with keyboard navigation, smooth animations, and responsive layouts.

What it does

  • Scaffolds a React and Vite project structure for slide-based applications.
  • Implements keyboard-navigable slide transitions with progress indicators.
  • Integrates Recharts for data visualization using a strict categorical and semantic color palette.
  • Applies the Sentry design system, including typography, CSS variables, and official branding assets.
  • Produces a single distributable HTML file via Vite build processes.
  • Ensures data-driven slides are only created when real quantitative data is provided.

When to use it

  • When you need to create a professional, data-driven presentation deck.
  • When you want to build a presentation that includes interactive charts and animations.
  • When you need to maintain Sentry branding and design standards in your slides.
  • When you require a portable, single-file HTML output for your presentation.

Advantages

  • Ensures visual consistency with the Sentry design system.
  • Promotes data integrity by preventing the fabrication of chart data.
  • Provides a modern, performant, and interactive presentation experience.
  • Simplifies distribution by bundling the entire presentation into a single HTML file.

Usage examples

“Create a presentation about our Q4 performance metrics.”
The agent will ask for the topic, slide count, and specific data points, then scaffold a React project with charts visualizing the provided Q4 metrics.
“Build a Sentry presentation for the upcoming engineering sync.”
The agent will initialize a project structure using Sentry branding, ready for you to populate with technical deep-dive content and relevant data.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/getsentry/presentation-creator/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip presentation-creator.zip -d .agents/skills

Documentation by Sentry

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
<!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,[email protected],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
{
  "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(<App />)

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:

  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.

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

  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 transitions

Files

references/design-system.md

Sentry Presentation Design System

Color Palette

Color Philosophy

Use two distinct color sets:

  1. Semantic colors — Only when the color itself carries meaning (good/bad, success/failure, warning). Do not use these for arbitrary data grouping.

  2. Categorical colors — For distinguishing data series, groups, or categories where color has no inherent meaning. Inspired by Tableau's palette for maximum distinguishability.

CSS Variables
:root {
  /* ── UI chrome ── */
  --dark: #1c1028;
  --purple: #6c5fc7;
  --purple-light: #b5aade;
  --purple-bg: #ede8f5;
  --bg: #faf9fb;
  --card: #f3f1f5;
  --muted: #80708f;
  --border: #dbd6e1;

  /* ── Semantic (use ONLY when meaning applies) ── */
  --semantic-green: #2ba185;   /* positive, success, good */
  --semantic-red: #f55459;     /* negative, failure, bad */
  --semantic-amber: #d4953a;   /* warning, caution, moderate */
  --semantic-green-bg: #e0f5ef;
  --semantic-red-bg: #fde8e9;
  --semantic-amber-bg: #fdf3e4;
}
JS Color Constants (for Charts.jsx)
// ── UI / chrome ──
const DARK = '#1c1028';
const MUTED = '#80708f';
const BORDER = '#dbd6e1';

// ── Categorical palette (Tableau-inspired) ──
// Use for data series, groups, and categories where color is just a label.
const CAT = [
  '#4e79a7',  // steel blue
  '#f28e2b',  // orange
  '#e15759',  // coral
  '#76b7b2',  // teal
  '#59a14f',  // green
  '#edc948',  // gold
  '#b07aa1',  // mauve
  '#ff9da7',  // pink
  '#9c755f',  // brown
  '#bab0ac',  // gray
];

// ── Semantic (use ONLY when the color conveys meaning) ──
const SEM_GREEN = '#2ba185';   // positive / success / good
const SEM_RED = '#f55459';     // negative / failure / bad
const SEM_AMBER = '#d4953a';   // warning / caution
When to use which
ScenarioPaletteExample
Bar chart comparing 7 SKU typesCAT[0]–CAT[6]Each SKU gets a distinct hue, none implies "good" or "bad"
Stacked area: accepted vs droppedSemanticgreen = accepted (good), red = dropped (bad)
Heatmap cells: adopted vs notSemanticgreen dot = adopted, empty = not
Before/after comparisonCAT[0] / CAT[1]Two neutral colors, neither implies better
Priority columns: Protect / Grow / ExpandSemanticgreen = protect, amber = grow, red = expand gaps
Multiple org lines on same chartCATEach org gets next color in sequence

Typography

Font: Rubik (Google Fonts) with system-ui fallback.

body {
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  color: var(--dark);
  background: var(--bg);
  line-height: 1.7;
  font-size: 0.9rem;
}
ElementSizeWeightExtra
h12.5rem700letter-spacing: -0.03em
h21.55rem600letter-spacing: -0.02em
h31rem600—
subtitle0.95rem400max-width: 620px, color: var(--muted)
body0.9rem400line-height: 1.7

Slide System CSS

.progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--purple); transition: width 0.3s; z-index: 10;
}

.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
.slide.active { opacity: 1; pointer-events: auto; }

.slide-content {
  width: 100%; max-width: 880px;
  padding: 60px 40px 100px;
}

Tags

Used on every slide to label the category (Background, Problem, Proposal, etc.).

.tag {
  display: inline-block; font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 4px;
  margin-bottom: 8px;
}
.tag-purple { background: var(--purple-bg); color: var(--purple); }
.tag-red { background: var(--semantic-red-bg); color: var(--semantic-red); }
.tag-green { background: var(--semantic-green-bg); color: var(--semantic-green); }
.tag-amber { background: var(--semantic-amber-bg); color: var(--semantic-amber); }

Layout Utilities

.cols { display: flex; gap: 40px; max-width: 1060px; }
.col { flex: 1; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 17px;
}

.chart-wrap { max-width: 920px; margin: 0 auto; }

Animations

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.anim h2, .anim .subtitle, .anim .cols,
.anim .cards, .anim .chart-wrap, .anim table,
.anim .zone-diagram, .anim ul {
  opacity: 0; animation: fadeUp 0.5s ease both;
}

.anim .d1 { animation-delay: 0.1s; }
.anim .d2 { animation-delay: 0.2s; }
.anim .d3 { animation-delay: 0.3s; }

Add the .anim class to .slide-content only when the slide is active. Use .d1, .d2, .d3 on child elements for staggered entrance.

Persistent Glyph Watermark

Every slide shows a small, low-contrast Sentry glyph in the top-left corner. Use the exact path from references/sentry-glyph.svg.

.glyph-watermark {
  position: fixed; top: 20px; left: 24px; z-index: 8;
  opacity: 0.12; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
}
.watermark-title {
  font-size: 1.1rem; font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

Hidden on the title slide (slide 0), shown on all others:

{cur > 0 && (
  <div className="glyph-watermark">
    <SentryGlyph size={50} />
    <span className="watermark-title">Presentation Title</span>
  </div>
)}

Navigation

Navigation sits at the bottom of the viewport with no border, no background separation — it floats transparently over the slide. Always show the slide number as {current} / {total}.

nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; padding: 14px;
  z-index: 5;
}
nav button {
  background: none; border: none;
  cursor: pointer; font-family: inherit;
  font-size: 0.8rem; color: var(--muted);
  padding: 4px 8px;
}
nav button:hover { color: var(--dark); }
nav button:disabled { opacity: 0.2; cursor: default; }
.slide-number {
  font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
Dot Indicators
.dots { display: flex; gap: 6px; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: background 0.2s;
}
.dot.on { background: var(--purple); }
Nav Component
function Nav({ cur, total, go, setCur }) {
  return (
    <nav>
      <button onClick={() => go(-1)} disabled={cur === 0}>←</button>
      <div className="dots">
        {Array.from({ length: total }, (_, i) => (
          <div key={i} className={`dot${i === cur ? ' on' : ''}`} onClick={() => setCur(i)} />
        ))}
      </div>
      <button onClick={() => go(1)} disabled={cur === total - 1}>→</button>
      <span className="slide-number">{cur + 1} / {total}</span>
    </nav>
  );
}

Icons

Use Material Symbols Outlined for icons:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=swap" rel="stylesheet" />
<span className="material-symbols-outlined">chevron_right</span>

Comparison Tables

.compare { width: 100%; border-collapse: collapse; }
.compare th {
  text-align: left; font-weight: 600;
  padding: 10px 14px; border-bottom: 2px solid var(--border);
}
.compare td { padding: 10px 14px; border-bottom: 1px solid #f0edf3; }

Do NOT hardcode the Sentry logo as inline SVG. Read the official SVGs from the skill references directory:

  • Full wordmark: references/sentry-logo.svg — the "Sentry" logotype with glyph. Use on title slides.

  • Glyph only: references/sentry-glyph.svg — the standalone glyph mark. Use for compact branding.

Read the SVG file contents and embed them as a React component using dangerouslySetInnerHTML or by extracting the <path> data:

// Read the SVG file, extract the content, and embed it:
function SentryLogo({ width = 120 }) {
  // The SVG content should be read from references/sentry-logo.svg
  // and embedded directly — never use a hardcoded approximation.
  return (
    <svg viewBox="0 0 200 44" width={width} fill="none" aria-hidden="true">
      {/* paste exact path data from sentry-logo.svg */}
    </svg>
  );
}

function SentryGlyph({ size = 32 }) {
  return (
    <svg viewBox="0 0 72 66" width={size} height={size} aria-hidden="true">
      {/* paste exact path data from sentry-glyph.svg */}
    </svg>
  );
}

Wrapup Column Variants

For summary/decision slides with multi-column layouts:

.wrapup-col--muted { border-top: 3px solid #80708f; }
.wrapup-col--muted h3 { color: #3e3450; }
.wrapup-col--muted li::before {
  content: 'chevron_right';
  font-family: 'Material Symbols Outlined';
  color: #80708f;
}

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Sentry
Publisher
Sentry (Official)
Source
getsentry/skills · skills/presentation-creator · commit e94f222
Licence
Apache License 2.0 (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Sentry.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download presentation-creator.zip