New to Claude Skills? Learn how to install them →

Get Claude Skills
getsentry on GitHub

Sentry Presentation Builder

Free

Create data-driven presentations with Sentry branding.

by getsentry907 stars on getsentry/skills
1 views
Updated Aug 8, 2026
Get this skill

Free · Opens the source repo

What Sentry Presentation Builder does

The Sentry Presentation Builder skill enables users to create interactive, data-driven presentation slides using React, Vite, and Recharts. It is specifically designed to scaffold a complete slide-based application styled with the Sentry design system, producing a single distributable HTML file. This tool is ideal for developers and designers who need to present data effectively while adhering to Sentry's branding guidelines.

To get started, users are prompted to gather essential requirements such as the presentation topic, the number of slides, and the type of data or charts needed. A critical aspect of this skill is its focus on real quantitative data; it will only generate visualizations for slides that contain actual data. If the content is purely qualitative, the skill will default to text-based layouts, ensuring that no fabricated data is used.

The project structure is automatically scaffolded, including necessary files such as index.html, package.json, and the main React components. The skill also incorporates keyboard navigation for ease of use during presentations and supports various chart types through Recharts, but only when valid data is available. Users can refer to the included design system documentation for styling guidance, ensuring that presentations are not only functional but also visually aligned with Sentry's branding.

This skill is particularly useful for teams that need to present data insights or project updates in a visually appealing format, making it easier to communicate complex information effectively. By leveraging existing data and Sentry's design principles, users can create professional presentations without the risk of misrepresenting information.

When to use it

Use this tool when you need to create a presentation that includes real data visualizations and follows Sentry's design guidelines.

When not to use it

This skill is not suitable for presentations that rely solely on qualitative data or when there is no real data available for visualization.

What you can build with it

Team Project Update

Use the skill to present project metrics and progress to stakeholders, ensuring all data is accurately represented.

Data Analysis Presentation

Create a presentation that visualizes data findings from research, making complex information easier to digest.

Sentry Branding Showcase

Build a presentation that highlights Sentry's features and benefits, utilizing the design system for brand consistency.

How to install Sentry Presentation Builder

View source

1. Install with the skills CLI

npx skills add getsentry/skills/presentation-creator --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by getsentry

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

{
  "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

Frequently asked questions about Sentry Presentation Builder

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.