skills.rest
hajrasarwar11
hajrasarwar11COMMUNITY
Explore all skills by this author →
GitHub

slides

Build and edit React and Tailwind slide decks from code in Replit.

Updated Mar 19, 2026
Search Tags:#react#workspace#presentation#slides#design-system#deck
One-click install
npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill slides-hajrasarwar11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: slides
Source: https://github.com/hajrasarwar11/DataBase-Engine-with-AI/tree/main/.local/skills/slides
Command: npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill slides-hajrasarwar11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables building and editing slide deck artifacts inside a Replit workspace, allowing developers to craft polished, presentation-ready decks as code.

Core Features & Use Cases

  • Artifact-driven slides: a React + Tailwind CSS slide deck running in a workspace app preview, with per-slide components and a manifest describing slides.
  • Workflow guidance: rules for slide manifests, editor UI integration, and design constraints to ensure export compatibility (16:9, w-screen h-screen overflow-hidden, etc.)
  • Use Case: You want to generate a deck for a product pitch or internal update entirely from code, with deterministic slide components and a shared style system.

Quick Start

Write or generate a slides deck by defining slides as separate components and a manifest, then render to a /slideN route in your workspace.

Frequently Asked Questions about slides

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

FAQPage Schema
How do I build a presentation deck using React components?▼

Build a presentation deck by defining individual slides as React components and linking them through a strict manifest. This manifest dictates slide order and metadata, rendering the deck within a single-page application routing structure.

Can I generate code-driven pitch slides inside a Replit workspace?▼

Yes, you can generate code-driven pitch slides inside a Replit workspace. The system composes slides as code using a React and Tailwind CSS framework, producing a presentation-ready deck artifact in the app preview.

What layout constraints apply when creating slides as code?▼

Slides as code enforce specific frame and layout constraints to ensure export compatibility. You must use a 16:9 aspect ratio with w-screen h-screen overflow-hidden root containers to maintain deterministic slide components.

How does a manifest-driven slide system work?▼

A manifest-driven slide system works by using a strict manifest convention to define slide order and metadata. Each slide is a separate deterministic component, and the system routes presentation views to specific /slideN routes.

Do I need Tailwind CSS to create presentation slides as code?▼

Yes, Tailwind CSS is required to create presentation slides as code. The system uses a React and Tailwind-based slide framework to enforce a shared style system and deterministic layout components across the deck.

What's the best way to maintain a consistent design system across a slide deck?▼

Maintain consistency by using a shared style system with deterministic slide components. The React and Tailwind CSS framework enforces strict layout constraints and a manifest convention to ensure uniform design across all presentation slides.

Related Skills

Explore More Design & Creative Skills→
ouzayrouzayr

slides

Generate React and Tailwind CSS slide decks in Replit workspaces.

Community
Advanced
aryankumarraiaryankumarrai

slides

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

Community
Advanced
Buntyarora97Buntyarora97

slides

Create and edit slide decks with React and Tailwind CSS.

Community
Intermediate
tann200tann200

slides

Generate and edit presentation slide decks using React and Tailwind CSS.

Community
Advanced