skills.rest
aryankumarrai
aryankumarraiCOMMUNITY
Explore all skills by this author →
GitHub

slides

Generate slide decks as React and Tailwind CSS applications with PPTX export.

Updated Mar 12, 2026
Search Tags:#react#tailwind css#presentation#slides#visual editing#code-based design
One-click install
npx skills add https://github.com/aryankumarrai/VarAI --skill slides-aryankumarrai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/aryankumarrai/VarAI/tree/main/.local/skills/slides
Command: npx skills add https://github.com/aryankumarrai/VarAI --skill slides-aryankumarrai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill empowers you to create visually compelling, professional slide decks directly from your code, streamlining the presentation design process.

Core Features & Use Cases

  • Code-Based Slide Creation: Define slides using React and Tailwind CSS for pixel-perfect control.
  • Visual Editing: Leverage an integrated visual editor for real-time adjustments to layout, colors, and text.
  • Use Case: Generate a pitch deck for a new product launch, complete with brand-aligned visuals and clear messaging, all managed within your development environment.

Quick Start

Use the slides skill to create a new presentation about our Q3 product roadmap.

Frequently Asked Questions about slides

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

FAQPage Schema
How do I create React presentations with Tailwind CSS?▼

You can create React presentations by defining slides as static JSX components styled with Tailwind CSS, then using the visual editor for real-time layout adjustments. The skill manages slide ordering through a dynamic manifest and renders decks in a 16:9 aspect ratio preview.

Can I export my code-based slides to PPTX?▼

Yes, you can export code-based slides to PPTX format. The skill generates slide deck artifacts as React applications and supports PPTX export, allowing you to take your visually edited, Tailwind CSS-styled presentations outside the development environment.

Does the visual editor support dynamic React components?▼

No, the visual editor requires static JSX for compatibility. While slides are defined using React and Tailwind CSS for pixel-perfect control, you must use static JSX components to ensure the visual editing features function properly during real-time adjustments.

What is the best way to manage slide ordering in a React deck?▼

The best way to manage slide ordering is through dynamic manifest updates. The skill handles slide ordering and metadata via a manifest system, allowing you to reorganize your React and Tailwind CSS presentation slides efficiently.

Can I use Tailwind CSS for pixel-perfect slide design?▼

Yes, Tailwind CSS enables pixel-perfect slide design. You define slides using React and Tailwind CSS for precise visual control, then leverage the integrated visual editor to make real-time adjustments to colors, text, and layout within the 16:9 aspect ratio preview.

Related Skills

Explore More Design & Creative Skills→
pinion05pinion05
3

pptx

Read, edit, and generate PowerPoint slide decks with Python scripts.

Community
Advanced
caobingshengcaobingsheng
1

pptx

Generate PPTX slide decks from content sources and templates.

Community
Advanced
ouzayrouzayr

slides

Generate React and Tailwind CSS slide decks in Replit workspaces.

Community
Advanced
MuhammadUAMuhammadUA

presentations

Create, validate, and export 1920x1080 HTML slide decks to PDF and PPTX.

Community
Intermediate