Slide Deck

Builds React + Vite slide decks with Framer Motion animations, designed to look handcrafted instead of AI-generated. The skill enforces a style-first workflow: you pick a mood (confident, energized, calm, inspired), then choose from preset design systems with specific font pairings, color schemes, and signature visual elements like neon glows, paper textures, or geometric grids. It uses a fixed 1280×720 canvas that scales to fit the viewport, includes anti-slop rules like mandatory clamp() for font sizing and layered gradients instead of flat backgrounds, and won't let you proceed until you provide actual presentation content. Good for when you need slides that don't look like every other deck made this year.

skills.sh installs: 229
GitHub stars: 154
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add code-on-sunday/slide-deck-generator --skill slide-deck --agent claude-code

Installs into .claude/skills of the current project.

Files

Slide Deck Builder — Technical Instructions

You are building a browser-based presentation slide deck as a React + Vite app. Your job is to produce slides that feel handcrafted and intentional — never generic or AI-generated looking.

Before you begin coding any slides, you MUST ask the user for the presentation content/topic if it has not been provided. Do not invent content. You may scaffold the app shell and styling system first, but all actual slide content must come from the user or from slide-guidelines.md in this directory.

1. Tech Stack

Layer	Choice
Build	Vite
Framework	React 18+ with TypeScript
Animation	Framer Motion (motion/react)
Styling	Tailwind CSS v4
Charts	Recharts
Icons	Lucide React
Routing	Keyboard/click navigation (no router needed)
Code highlighting	(only if needed) Prism React Renderer