presentation-creator

FreeNo executable scriptsNot checked

Create data-driven presentation slides using React, Vite, and Recharts with Sentry branding. Use when asked to "create a presentation", "build slides", "make a

by Sentry

Install skill Repository Embed

About this skill

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:

What is the presentation topic?
How many slides (typically 5-8)?
What data/charts are needed? (time series, comparisons, diagrams, zone charts)
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:

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

Summar

Install presentation-creator in Claude Code & Claude Desktop

Sign up to install this skill

Create a free account to reveal the install command and save the skill to your library.

Reveal the one-line install command
Save skills to your synced library
Get notified when skills update

Allowed tools

Tools this skill is permitted to call.

No restriction — this skill can use any tool.

Bundled files

references/chart-patterns.mdreferences/design-system.mdreferences/sentry-glyph.svgreferences/sentry-logo.svg

FAQ

What does the presentation-creator 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.

How do I install the presentation-creator skill?

Copy the skill folder into ~/.claude/skills (the Claude Code tab above does this in one command), or install it as a plugin.

Does the presentation-creator skill run scripts?

No, this skill is instructions only (SKILL.md) with no executable scripts.

Related skills

scripts

XLSX

Read, analyze and build Excel spreadsheets

by Anthropic

no scripts

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c

by Vercel

scripts

vercel-optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usag

by Vercel

scripts

expo-ui

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native app. Covers univers

by Expo

Compare presentation-creator with

presentation-creatorvsXLSX presentation-creatorvsvercel-react-best-practices presentation-creatorvsvercel-optimize presentation-creatorvsexpo-ui

Command Palette

presentation-creator

About this skill

Sentry Presentation Builder

Step 1: Gather Requirements

Data Assessment (CRITICAL)

Step 2: Scaffold the Project

index.html

package.json

vite.config.js

main.jsx

Step 3: Build the Slide System

App.jsx Structure

Navigation

Step 4: Create Charts (Only When Data Exists)

Step 5: Style with Sentry Design System

Step 6: Common Slide Patterns

Title Slide

Problem/Context Slide

Data Comparison Slide

Technical Deep-Dive Slide

Summar

Install presentation-creator in Claude Code & Claude Desktop

Sign up to install this skill

Allowed tools

Bundled files

FAQ

What does the presentation-creator skill do?

How do I install the presentation-creator skill?

Does the presentation-creator skill run scripts?

Related skills

XLSX

vercel-react-best-practices

vercel-optimize

expo-ui

Compare presentation-creator with