presentation-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Sentry Presentation Builder

Sentry演示文稿构建工具

Create interactive, data-driven presentation slides using React + Vite + Recharts, styled with the Sentry design system and built as a single distributable HTML file.

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

Step 1: Gather Requirements

步骤1：收集需求

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)

询问用户：

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

Step 2: Scaffold the Project

步骤2：搭建项目结构

Create the project structure:

<project-name>/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── Charts.jsx

创建如下项目结构：

<project-name>/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    └── Charts.jsx

index.html

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>

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

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

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

javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({ plugins: [react(), viteSingleFile()] })

javascript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({ plugins: [react(), viteSingleFile()] })

main.jsx

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

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

步骤3：构建幻灯片系统

Read

${CLAUDE_SKILL_ROOT}/references/design-system.md

for the complete Sentry color palette, typography, CSS variables, layout utilities, and animation system.

阅读

${CLAUDE_SKILL_ROOT}/references/design-system.md

获取完整的Sentry配色方案、排版规范、CSS变量、布局工具和动画系统。

App.jsx Structure

App.jsx结构

Define slides as an array of functions returning JSX:

jsx

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

Each slide function returns a

<div className="slide-content">

with:

.tag

label (e.g.,

<span className="tag tag-purple">Background</span>

)

An
```
<h2>
```
heading
Optional subtitle paragraph
Main content (charts, cards, diagrams, tables)
Animation classes:
```
.anim
```
,
```
.d1
```
,
```
.d2
```
,
```
.d3
```
for staggered fade-in

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

jsx

const SLIDES = [
  () => ( /* 幻灯片0：标题页 */ ),
  () => ( /* 幻灯片1：背景介绍 */ ),
  // ...
];

每个幻灯片函数返回一个包含以下内容的

<div className="slide-content">

：

一个

.tag

标签（例如：

<span className="tag tag-purple">背景介绍</span>

）

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

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.

jsx

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

实现键盘导航（右键/空格=下一页，左键=上一页）和底部导航覆盖层，包含上一页/下一页按钮、圆点指示器和幻灯片编号。导航栏无边框和背景——透明悬浮显示。每个幻灯片的左上角固定显示一个低对比度的Sentry标志水印。

jsx

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

步骤4：创建图表

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

阅读

${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示意图

Step 5: Style with Sentry Design System

步骤5：应用Sentry设计系统样式

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.

应用设计系统参考文档中的完整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
```
用于幻灯片标签
Logo：从
```
${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg
```
（完整文字标志）或
```
sentry-glyph.svg
```
（仅图形标志）读取官方SVG。请勿硬编码近似版本——始终使用这些文件中的精确SVG路径。

Step 6: Common Slide Patterns

步骤6：常见幻灯片模式

Title Slide

标题页

Logo (from

${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg

sentry-glyph.svg

) + h1 + subtitle + author/date info.

Logo（来自

${CLAUDE_SKILL_ROOT}/references/sentry-logo.svg

或

sentry-glyph.svg

）+ h1标题 + 副标题 + 作者/日期信息。

Problem/Context Slide

问题/背景页

Tag + heading + 2-column card grid with icon headers.

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

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.

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

Step 7: Iterate and Refine

步骤7：迭代优化

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

初始搭建完成后：

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

Output Expectations

输出预期

A working React + Vite project that:

Renders as a keyboard-navigable slide deck
Uses Sentry branding (colors, fonts, icons)
Contains data-driven Recharts visualizations
Builds to a single distributable HTML file
Has smooth fade-in animations on slide transitions

一个可运行的React + Vite项目，具备以下特性：

可通过键盘导航的幻灯片演示
使用Sentry品牌风格（颜色、字体、图标）
包含数据驱动的Recharts可视化图表
可构建为单个可分发的HTML文件
幻灯片切换时具有流畅的渐入动画