需要制作数据驱动演示幻灯片时，用…

当需要创建带图表、动画、可分发为单个 HTML 文件的演示幻灯片时使用。

适用场景

解决思路

1. 先向用户收集需求：演示主题、幻灯片数量（通常 5-8 张）、需要哪些数据/图表（时间序列、对比、示意图、区域图）、叙事结构（问题→方案、前后对比、技术深入）。
2. 做数据评估（关键）：在设计幻灯片前，判断源内容是否包含真实量化数据（数字、百分比、度量、时间序列、成本、指标）。只有存在真实数据的幻灯片才创建 Recharts 可视化。不要为了填满图表而捏造、估算或编造数据。有真实数据→用 Recharts 图表（柱状、面积、折线等）；无数据→用文本布局：卡片、表格、项目符号列、示意图或引用块。若源内容纯定性（叙述、观点、策略、流程描述），演示应零图表，且仅在至少一张幻灯片有真实数据时才在项目中包含 Recharts 和 Charts.jsx。
3. 搭建项目结构：<project-name>/ 下含 index.html、package.json、vite.config.js 和 src/（main.jsx、App.jsx、App.css、Charts.jsx）。
4. index.html 中引入 Google Fonts 的 Rubik 字体和 Material Symbols Outlined 图标字体，设置 viewport meta，body 内放 <div id="root"></div> 和 <script type="module" src="/src/main.jsx"></script>。
5. package.json 设置 type 为 module，scripts 含 dev/build/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。
6. vite.config.js 使用 defineConfig，plugins 为 [react(), viteSingleFile()]。
7. main.jsx 用 ReactDOM.createRoot 渲染 <App /> 并导入 App.css。
8. 阅读 references/design-system.md 获取完整的 Sentry 配色、排版、CSS 变量、布局工具类和动画系统。
9. 在 App.jsx 中把幻灯片定义为返回 JSX 的函数数组 SLIDES。每个幻灯片函数返回 <div className="slide-content">，内含 <h2> 标题、可选副标题段落、主内容（图表、卡片、示意图、表格），以及动画类 .anim、.d1、.d2、.d3 实现错峰淡入。不要在标题上方添加分类标签胶囊/徽章（如 "BACKGROUND"、"EXPERIMENTS"），它们显得通用且无价值，让标题自己说话。
10. 实现导航：键盘导航（ArrowRight/Space 下一页，ArrowLeft 上一页）和底部导航浮层（上一页/下一页按钮、圆点指示器、幻灯片编号）。导航无边框无背景，透明悬浮。每张幻灯片左上角固定一个低对比度的小 Sentry 字形水印。
11. App 组件用 useState 管理当前页 cur，go 函数用 Math.max/Math.min 限制范围；useEffect 监听 keydown，若 e.target.tagName 为 INPUT 则忽略，ArrowRight 或空格调用 go(1) 并 preventDefault，ArrowLeft 调用 go(-1) 并 preventDefault。渲染时：cur>0 时显示 glyph-watermark（SentryGlyph size=50 加 watermark-title）；progress 条宽度为 ((cur+1)/SLIDES.length)*100%；SLIDES.map 渲染每张幻灯片，当前页加 active 类和 anim 类；最后渲染 Nav 组件。
12. 仅在存在真实数据时创建图表：若没有幻灯片需要图表，完全跳过此步，不创建 Charts.jsx 也不导入 Recharts。有真实数据时阅读 references/chart-patterns.md 获取 Recharts 组件模式（坐标轴配置、颜色常量、图表类型、数据生成技巧）。
13. 把所有图表组件放在 Charts.jsx。关键模式：用 ResponsiveContainer 并指定高度；包在 max-width 920px 的 .chart-wrap div 中；用 useMemo 生成数据。颜色规则：用 Tableau 风格分类调色板 CAT[] 区分数据系列和分组；仅当颜色本身携带含义（好/坏、成功/失败、警告）时才用语义色 SEM_GREEN、SEM_RED、SEM_AMBER。常用图表：ComposedChart 配堆叠 Area/Line、BarChart、自定义 SVG 示意图。图表中每个数据点都必须来自源内容，不要插值、外推或四舍五入数字来让图表更好看。
14. 应用 Sentry 设计系统 CSS：字体用 Google Fonts 的 Rubik；UI 框架用 CSS 变量（--purple、--dark、--muted），语义 CSS 变量（--semantic-green、--semantic-red、--semantic-amber）仅在颜色传达含义处使用，其他所有数据可视化用分类调色板 CAT[]；幻灯片绝对定位、opacity 过渡；动画用 fadeUp 关键帧配错峰延迟；布局用 .cols 弹性行、.cards 网格、.chart-wrap 容器；标签用 .tag-purple、.tag-red、.tag-green、.tag-amber；Logo 从 references/sentry-logo.svg（完整字标）或 references/sentry-glyph.svg（仅字形）读取官方 SVG，不要硬编码近似图形，始终使用这些文件中的精确 SVG 路径。
15. 套用常见幻灯片模式：标题页=Logo+h1+副标题+作者/日期；问题/背景页=标签+标题+2 列卡片网格带图标标题；数据对比页=标签+标题+并排图表或前后对比表；技术深入页=标签+标题+全宽图表+下方注释要点；总结/决策页=标签+标题+3 列布局带分类标题和项目符号列表。
16. 迭代优化：运行 npm install && npm run dev 启动开发服务器；迭代图表数据模型和视觉设计；调整动画、颜色和布局间距；运行 npm run build 在 dist/ 生成单个 HTML 文件。
17. 最终产出：可键盘导航的幻灯片、Sentry 品牌（颜色、字体、图标）、仅对源内容中真实量化数据的幻灯片使用 Recharts 可视化（不捏造数据）、若无真实数据则完全省略 Charts.jsx 和 Recharts 依赖、构建为单个可分发 HTML 文件、幻灯片切换有平滑淡入动画。

适用边界 · 注意事项

• 源内容纯定性（叙述、观点、策略、流程描述）且无真实量化数据时，不要创建任何图表或引入 Recharts。
• 不确定数据是真实还是推断时，不要创建图表。
• 不要为了填满图表而捏造、估算、插值、外推或四舍五入数字。