skills.rest
sergical
sergicalCOMMUNITY
Explore all skills by this author →
Website𝕏@sergicalGitHub

presentation-creator

Generate a single-file HTML presentation with React, Vite, and Recharts.

1|Updated Feb 22, 2026
Search Tags:#data visualization#react#presentation#slides#vite#sentry#recharts
One-click install
npx skills add https://github.com/sergical/pi-config --skill presentation-creator-sergical
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: presentation-creator
Source: https://github.com/sergical/pi-config/tree/main/skills/presentation-creator
Command: npx skills add https://github.com/sergical/pi-config --skill presentation-creator-sergical

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of professional, data-driven presentation slides using React, Vite, and Recharts, complete with Sentry branding and animations, outputting a single distributable HTML file.

Core Features & Use Cases

  • Scaffolds a complete slide-based app: Sets up React, Vite, and Recharts for interactive presentations.
  • Sentry Design System: Applies Sentry's colors, typography, and animations.
  • Data Visualization: Integrates Recharts for charts, but only when real quantitative data is available.
  • Single HTML Output: Builds the entire presentation into one file for easy sharing.
  • Use Case: When asked to "create a presentation about Q3 performance metrics," this skill will generate a React app with slides visualizing key data points using Sentry's design language.

Quick Start

Use the presentation-creator skill to build a Sentry-branded presentation about our Q3 performance metrics, including charts for key data points.

Frequently Asked Questions about presentation-creator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate data-driven presentation slides with React and Vite?▼

To generate data-driven presentation slides with React and Vite, provide your topic, slide count, data, and narrative. The skill scaffolds a single-file HTML application with interactive charts and Sentry branding.

Can I use Recharts for data visualization in my presentation without real quantitative data?▼

You cannot use Recharts for data visualization without real quantitative data. The skill integrates Recharts for charts exclusively when actual quantitative data is present to maintain accurate visual representation.

What is the best way to build a Sentry-branded presentation for performance metrics?▼

The best way to build a Sentry-branded presentation is to use this skill, which applies the Sentry design system colors, typography, and animations to your slides, ensuring consistent branding for performance metrics.

Does the presentation output require multiple files for distribution?▼

The presentation output does not require multiple files. The skill builds the entire React and Vite presentation into a single distributable HTML file for easy sharing and deployment.

What input do I need to provide to create a presentation with this tool?▼

To create a presentation, you need to provide your presentation topic, desired slide count, quantitative data for charts, and the narrative. The skill uses these inputs to generate the final slides.

Are there limitations when adding charts to the generated slides?▼

A key limitation is that charts are only added when real quantitative data is available. The skill avoids generating visualizations for placeholder or qualitative data to maintain analytical integrity.

Related Skills

Explore More Design & Creative Skills→
RxFitRxFit

storyline

Create structured presentation storylines with narrative blocks and slide titles.

Community
Intermediate
tuyoogametuyoogame
124

HTML可视化

Generate interactive self-contained HTML visualizations with inline CSS and JavaScript.

Official
Intermediate
getsentrygetsentry
905

presentation-creator

Scaffold a React, Vite, and Recharts presentation app with Sentry branding.

Official
Advanced
ngocnhanvongocnhanvo

charts

Create static and interactive charts with the recharts library.

Community
Intermediate