skills.rest
tiancaiamao
tiancaiamaoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

presentation-creator

Create branded React and Vite slide decks with keyboard navigation and single-file HTML output.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the friction of designing polished, interactive presentation decks by turning source material into a structured slide experience with consistent branding, navigation, and layout.

Core Features & Use Cases

  • Presentation Scaffolding: Builds a complete React + Vite slide deck structure with reusable slide functions, keyboard navigation, progress indicators, and a single-file HTML build output.
  • Sentry-Branded Design System: Applies the Sentry visual system with exact logo and glyph usage, typography, spacing, color rules, and motion styling for a cohesive deck.
  • Data-Driven Slides: Adds Recharts visualizations only when real quantitative data exists, and falls back to text, tables, diagrams, and cards when content is qualitative.
  • Use Case: Create a product, technical, or strategy presentation from notes and source content, then export it as a polished, distributable slide deck.

Quick Start

Create a Sentry-branded slide deck about your topic, tell me how many slides you want, and provide any real data so I can decide which slides should use charts.

Frequently Asked Questions about presentation-creator

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

FAQPage Schema
How do I build branded presentation slides from raw data using React and Vite?▼

To build branded presentation slides with React and Vite, this Skill scaffolds a complete deck structure with reusable slide functions, keyboard navigation, and single-file HTML output, applying Sentry design-system styling for cohesive visual branding.

Can I add Recharts visualizations to my presentation only when quantitative data exists?▼

Yes, Recharts visualizations are added to your presentation only when real quantitative data exists. For qualitative content, the deck falls back to text, tables, diagrams, and cards to ensure accurate data representation.

What is the best way to create a single-file HTML presentation deck from technical notes?▼

The best way to create a single-file HTML presentation deck from technical notes is by using a React and Vite slide-building workflow that compiles your source material into a distributable, interactive format with progress indicators.

Does the Sentry design system provide typography and color rules for presentation slides?▼

The Sentry design system provides exact typography, spacing, color rules, logo usage, and motion styling for presentation slides. This ensures your technical deep dives and narrative presentations maintain cohesive visual branding.

How do I create a data-driven technical deep dive presentation with keyboard navigation?▼

You create a data-driven technical deep dive presentation by providing your source material and real data. The Skill builds a structured React slide experience with keyboard navigation, deciding which slides use charts versus text or diagrams.

What are the limitations of using Recharts for qualitative presentation slides?▼

Recharts is limited to slides backed by real quantitative data and should not be used for qualitative presentation slides. When quantitative data is absent, the deck falls back to text, tables, diagrams, and cards instead of visualizations.

Related Skills

Explore More Design & Creative Skills→
sergicalsergical
1

presentation-creator

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

Community
Advanced
hiyeshuhiyeshu
205

codeck-export

Export HTML presentation decks to PDF and PPTX with automated quality checks.

Community
Advanced
HazATHazAT
437

presentation-creator

Generate interactive React and Vite presentation slides with Recharts and Sentry design.

Community
Advanced
4tie4tie

slides

Build and manage React-based slide decks with PPTX import and PDF or PPTX export.

Community
Advanced