Sentry演示文稿构建器：React+Vite+Recharts创建交互式数据驱动幻灯片

presentation-creator by getsentry/skills

289 周安装量

504 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/getsentry/skills --skill presentation-creator

内容创作数据可视化 React

🇨🇳中文介绍

Sentry 演示文稿构建器

使用 React + Vite + Recharts 创建交互式、数据驱动的演示文稿幻灯片，采用 Sentry 设计系统进行样式设计，并构建为单个可分发 HTML 文件。

步骤 1：收集需求

询问用户：

演示文稿的主题是什么？
需要多少张幻灯片？（通常为 5-8 张）
需要哪些数据/图表？（时间序列、比较、图表、区域图）
叙述线索是什么？（问题 → 解决方案、之前 → 之后、技术深度剖析）

数据评估（关键）

在设计任何幻灯片之前，评估源内容是否包含真实的定量数据（数字、百分比、测量值、时间序列、成本、指标）。仅对存在真实数据的幻灯片创建 Recharts 可视化。请勿伪造、估算或编造数据来填充图表。

有真实数据 → 使用 Recharts 图表（条形图、面积图、折线图等）
没有数据 → 使用基于文本的布局：卡片、表格、项目符号列、图表或引用块。请勿使用编造的数字创建图表。

如果源内容完全是定性的（叙述、观点、策略、过程描述），演示文稿应使用零个图表。只有当至少一张幻灯片有真实数据需要可视化时，才应在项目中包含 Recharts 和 Charts.jsx。

步骤 2：搭建项目结构

创建项目结构：

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

步骤 3：构建幻灯片系统

阅读 ${CLAUDE_SKILL_ROOT}/references/design-system.md 以获取完整的 Sentry 调色板、排版、CSS 变量、布局实用程序和动画系统。

将幻灯片定义为返回 JSX 的函数数组：

const SLIDES = [
  () => ( /* Slide 0: Title */ ),
  () => ( /* Slide 1: Context */ ),
  // ...
];

每个幻灯片函数返回一个包含以下内容的 <div className="slide-content">：

一个 <h2> 标题
可选的副标题段落
主要内容（图表、卡片、图表、表格）
动画类：.anim、.d1、.d2、.d3 用于交错淡入效果

请勿在标题上方添加类别标签/徽章（例如“背景”、“实验”）。它们看起来通用且没有价值。让标题本身说明问题。

实现键盘导航（ArrowRight/Space = 下一张，ArrowLeft = 上一张）和一个底部导航覆盖层，包含上一页/下一页按钮、点指示器和幻灯片编号。导航没有边框或背景——它是透明浮动的。一个小的低对比度 Sentry 标志水印固定显示在每张幻灯片的左上角。

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} />
    </>
  );
}

步骤 4：创建图表（仅在数据存在时）

重要：仅对源内容中有真实、具体数据支持的幻灯片创建图表。 如果幻灯片的内容是定性的（策略、经验教训、过程描述、观点），请改用基于文本的布局（卡片、表格、项目符号列表、列）。切勿编造数字、伪造百分比或生成合成数据来填充图表。如果不确定数据是真实的还是推断的，请勿创建图表。

如果没有任何幻灯片需要图表，请完全跳过此步骤——不要创建 Charts.jsx 或导入 Recharts。

当有真实数据可用时，请阅读 ${CLAUDE_SKILL_ROOT}/references/chart-patterns.md 以获取 Recharts 组件模式，包括轴配置、颜色常量、图表类型和数据生成技术。

将所有图表组件放在 Charts.jsx 中。关键模式：

使用具有明确高度的 ResponsiveContainer
用最大宽度为 920px 的 .chart-wrap div 包裹
使用 useMemo 进行数据生成
颜色规则：使用受 Tableau 启发的分类调色板（CAT[]）来区分数据系列和组。仅当颜色本身具有含义（好/坏、成功/失败、警告）时，才使用语义颜色（SEM_GREEN、SEM_RED、SEM_AMBER）。
常见图表：带有堆叠 Area/Line 的 ComposedChart、BarChart、自定义 SVG 图表
图表中的每个数据点都必须来自源内容。 请勿为了图表看起来更好而进行插值、外推或四舍五入数字。

步骤 5：使用 Sentry 设计系统进行样式设计

应用设计系统参考中的完整 CSS。关键元素：

字体：来自 Google Fonts 的 Rubik
颜色：用于 UI 框架的 CSS 变量（--purple、--dark、--muted）。仅当颜色传达含义时，才使用语义 CSS 变量（--semantic-green、--semantic-red、--semantic-amber）。分类调色板（CAT[]）用于所有其他数据可视化。
幻灯片：绝对定位，透明度过渡
动画：具有交错延迟的 fadeUp 关键帧
布局：.cols 弹性行、.cards 网格、.chart-wrap 容器
标签：.tag-purple、.tag-red、.tag-green、.tag-amber 用于幻灯片标签
徽标：从 ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg（完整字标）或 sentry-glyph.svg（仅标志）读取官方 SVG。请勿硬编码近似值——始终使用这些文件中的确切 SVG 路径。

步骤 6：常见幻灯片模式

徽标（来自 ${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg 或 sentry-glyph.svg）+ h1 + 副标题 + 作者/日期信息。

问题/背景幻灯片

标签 + 标题 + 带有图标标题的 2 列卡片网格。

数据比较幻灯片

标签 + 标题 + 并排图表或前后对比表格。

技术深度剖析幻灯片

标签 + 标题 + 全宽图表 + 下方注释项目符号。

总结/决策幻灯片

标签 + 标题 + 带有类别标题和项目符号列表的 3 列布局。

步骤 7：迭代和优化

运行 npm install && npm run dev 以启动开发服务器
迭代图表数据模型和视觉设计
调整动画、颜色和布局间距
构建最终输出：npm run build 在 dist/ 中生成单个 HTML 文件

一个可运行的 React + Vite 项目，它：

呈现为可通过键盘导航的幻灯片演示
使用 Sentry 品牌标识（颜色、字体、图标）
仅对源内容中具有真实定量数据的幻灯片包含 Recharts 可视化——没有伪造数据
如果没有任何幻灯片有真实数据，则完全省略 Charts.jsx 和 Recharts 依赖项
构建为单个可分发 HTML 文件
在幻灯片切换时具有平滑的淡入动画

🇺🇸English

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,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 ${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, , custom SVG diagrams

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

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

Weekly Installs

126

Repository

getsentry/skills

GitHub Stars

454

First Seen

14 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli117

claude-code117

codex117

cursor117

kimi-cli116

github-copilot116

MCP图像生成技能：使用Gemini AI为营销、UI设计、演示文稿创建高质量图像

7,600 周安装

Every data point in a chart must come from the source content. Do not interpolate, extrapolate, or round numbers to make charts look better.

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.

Sentry演示文稿构建器：React+Vite+Recharts创建交互式数据驱动幻灯片

🇨🇳中文介绍

Sentry 演示文稿构建器

步骤 1：收集需求

数据评估（关键）

步骤 2：搭建项目结构

index.html

相关 Skills

package.json

vite.config.js

main.jsx

步骤 3：构建幻灯片系统

App.jsx 结构

导航

步骤 4：创建图表（仅在数据存在时）

步骤 5：使用 Sentry 设计系统进行样式设计

步骤 6：常见幻灯片模式

标题幻灯片

问题/背景幻灯片

数据比较幻灯片

技术深度剖析幻灯片

总结/决策幻灯片

步骤 7：迭代和优化

输出预期

🇺🇸English

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

Summary/Decision Slide

Step 7: Iterate and Refine

Output Expectations

最新 Skills