slides

Name: slides
Availability: InStock
Author: Aryan

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

Ready to run

npx skills add https://github.com/aryankumarrai/VarAI --skill slides-aryankumarrai

💬 Prompt for ChatGPT / Claude Chat▼

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.