skills.rest
peerasak-u
peerasak-uCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

peerasak-presentation-creator

Generates a branded, data-driven HTML deck from a topic and dataset using React, Vite, and Recharts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams rapidly generate data-driven presentation decks using React, Vite, and Recharts, delivering branded, production-ready slides instead of manual setup.

Core Features & Use Cases

  • Scaffolds a complete slide-based app that outputs a single-file HTML deck.
  • Supports data-driven charts when source data exists, and text-based layouts when data is qualitative.
  • Provides keyboard navigation, a bottom overlay navigation, and a subtle watermark branding.
  • Enforces a design-system-driven palette and branding across the deck.

Quick Start

Create a new data-driven presentation project and scaffold a React + Vite + Recharts deck using the input topic and dataset.

Frequently Asked Questions about peerasak-presentation-creator

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

FAQPage Schema
How do I generate interactive React presentation slides from raw data?▼

To generate interactive React presentation slides, this Skill scaffolds a Vite and Recharts project that automatically formats your dataset into a 5-8 slide deck. It outputs a self-contained, production-ready HTML file with branded styling and keyboard navigation.

What is the best way to build data-driven slide decks using Vite and Recharts?▼

The best way to build data-driven slide decks with Vite and Recharts is to automate the scaffolding process. This approach enforces a design-system palette, includes optional asset directories, and renders charts only when real source data is available.

Can I create a presentation with charts if my dataset only contains qualitative text?▼

You can still create a presentation with qualitative text. The deck applies text-based layouts for qualitative data and only generates Recharts data-visualizations when actual quantitative source data exists.

Does this presentation generator support keyboard navigation and custom branding?▼

Yes, the generated presentation supports keyboard navigation and custom branding. It includes a bottom overlay navigation, enforces a design-system-driven palette, and applies a subtle watermark across the deck.

What are the limitations of using Recharts for data visualization in slide presentations?▼

A limitation of using Recharts for slide presentations is that charts are restricted to slides where real data exists. Additionally, the deck structure is constrained to 5-8 slides, which may not suit topics requiring deeper coverage.

Related Skills

Explore More Data & Analytics Skills→
tiancaiamaotiancaiamao
5

presentation-creator

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

Community
Advanced
s23hs23h

report-style-guide

Generate self-contained HTML data reports with metrics dashboards and charts.

Community
Intermediate
sergicalsergical
1

presentation-creator

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

Community
Advanced
rovannirovanni
1

md-slides

Convert Markdown notes into Marp-based slides and export to PDF, PPTX, or HTML.

Community
Intermediate