slides

Generate cohesive 16:9 slide decks with manifest-driven ordering for Replit.

Updated Mar 22, 2026
One-click install
npx skills add https://github.com/adminsairolotech-bit/sai-rolotech-smart-engines --skill slides-adminsairolotech-bit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/adminsairolotech-bit/sai-rolotech-smart-engines/tree/main/.local/skills/slides
Command: npx skills add https://github.com/adminsairolotech-bit/sai-rolotech-smart-engines --skill slides-adminsairolotech-bit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables building and editing professional slide decks directly in code for the Replit workspace, delivering consistent 16:9 frames with polished visuals.

Core Features & Use Cases

  • Blueprint-driven slide authoring: generate a full deck structure with a title slide, content slides, and a closing holdout.
  • Manifest-driven layouts: enforces a cohesive 16:9 grid and a variety of layouts (title, bullets, two/three-column, big stat) while keeping design consistency.
  • Asset handling: supports both public/ assets and user-attached assets via @assets imports; ensures proper base-path handling for deployment.
  • Validation & first-build workflow: includes brand research, parallel asset generation, and parallel writing of index.html, index.css, slides, and manifest, followed by validation.

Quick Start

Instruct the AI to generate a seven-slide deck about your topic using a cohesive editorial aesthetic.

Frequently Asked Questions about slides

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

FAQPage Schema
How do I create a 16:9 slide deck using React and Tailwind?

You can generate a 16:9 React presentation deck by running a first-build workflow that creates index.html, index.css, individual slide components, and a slides-manifest.json file together. This ensures a cohesive 16:9 grid layout with varied slide formats like title, bullets, and big stat layouts.

Can I build a code-based presentation without animations?

Yes, you can build code-based presentations that enforce a strict no-animations default. The workflow generates full-screen 16:9 slides focused on polished editorial visuals and structural layouts rather than motion-based transitions or effects.

What is the best way to manage assets for a React slide deck?

The best way to manage presentation assets is using a combination of public/ directory files and @assets imports for user-attached files. This method ensures proper base-path handling during deployment and enables parallel asset generation within the first-build workflow.

How does a manifest-driven slide deck maintain layout consistency?

A manifest-driven slide deck uses slides-manifest.json to enforce slide ordering and validate the final deck structure. This controls the 16:9 grid layout and ensures varied formats like two-column or big stat slides remain visually cohesive throughout the presentation.

Does this slide generation workflow support external brand assets?

Yes, the workflow supports external brand assets through @assets imports and parallel asset generation. It includes a brand research step before creating the slides to ensure the generated deck matches your required cohesive aesthetic and visual identity.