Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

getsentry/presentation-creator

Name: presentation-creator
Author: getsentry

plugins/sentry-skills/skills/presentation-creator/SKILL.md

npx skillsauth add getsentry/skills presentation-creator

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Clean

VirusTotalMulti-engine malware detection

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

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 ${CLAUDE_SKILL_ROOT}/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 ${CLAUDE_SKILL_ROOT}/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 ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg (full wordmark) or 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 ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg or 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

getsentry/presentation-creator

plugins/sentry-skills/skills/presentation-creator/SKILL.md

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.

439 stars

development

Updated Mar 19, 2026

$ install --global

skillsauth

npx skillsauth add getsentry/skills presentation-creator

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

4 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Clean

VirusTotalMulti-engine malware detection

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Mar 19, 2026, 7:59 PM197.2s3 files scanned

SKILL.md

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.

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)

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.

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 ${CLAUDE_SKILL_ROOT}/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

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)

If NO slides require charts, skip this step entirely — do not create Charts.jsx or import Recharts.

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 ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg (full wordmark) or 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 ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg or 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

Related Skills

getsentry/document-api-endpoint

development

VerifiedTrustedOfficial

Document and type a Sentry API endpoint. Write or fix @extend_schema decorators, specify response TypedDicts, type request parameters, correct type drift between the declared schema and the runtime response, and validate the generated spec. Use when asked to "document an endpoint", "add OpenAPI docs", "add/fix @extend_schema", "type an endpoint response", "fix the response type", "fix type drift", "reuse a response type", "split an overloaded endpoint", "specify the response schema", "add a TypedDict response", "migrate a legacy api-docs path", "fix a parameter type", or "make an endpoint public" / "promote an endpoint" (promotion is one section here).

777SKILL.mdUpdated Jun 9, 2026

getsentry/document-api-endpoint

getsentry/pr-writer

documentation

VerifiedTrustedOfficial

Create, refresh, and rewrite PR titles and descriptions following Sentry conventions. Use when opening a PR, writing or updating a PR title/body/description, refreshing an existing PR after material changes, or preparing branch changes for review.

777SKILL.mdUpdated Apr 20, 2026

getsentry/claude-settings-audit

tools

VerifiedTrustedOfficial

Analyze a repository to generate recommended Claude Code settings.json permissions. Use when setting up a new project, auditing existing settings, or determining which read-only bash commands to allow. Detects tech stack, build tools, and monorepo structure.

770SKILL.mdUpdated Apr 20, 2026

getsentry/claude-settings-audit

getsentry/triage-frontend-issues

development

VerifiedTrustedOfficial

Triage new issues in the Sentry `javascript` project by archiving non-actionable noise. Use when asked to "triage issues", "triage the javascript project", "archive non-actionable issues", "triage new frontend issues", or "clean up the sentry/javascript queue". Operates only on the sentry/javascript project, only archives (never resolves), and always archives with `untilEscalating`.

733SKILL.mdUpdated May 22, 2026

getsentry/triage-frontend-issues

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/getsentry/skills.git

# Copy into Claude Code skills folder (global)
cp -r skills/plugins/sentry-skills/skills/presentation-creator ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

getsentry/skills

439 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT