Frontend Slides

👤 Zarazhangrui

•

📅 January 29, 2026

•

⭐ 393

Introduction

Frontend Slides is a sophisticated Claude Skill designed to bridge the gap between abstract ideas and production-quality visual presentations. Instead of generating generic “AI-style” decks, this skill focuses on a “Show, Don’t Tell” philosophy, allowing users to discover their preferred aesthetic through interactive visual exploration.

Whether you are starting from a rough napkin sketch or an existing .pptx file, Frontend Slides generates zero-dependency HTML files that run entirely in the browser. These presentations are not just static pages; they are animation-rich, accessible, and highly performant web experiences.

Key Features:

Zero Dependencies: Generates single HTML files with inline CSS and JS. No npm, no build tools, no external libraries required.
Visual Exploration: Generates mini-previews of different design moods (e.g., “Neon Cyber,” “Corporate Elegant”) so you can choose a vibe before building the full deck.
PPTX Conversion: Seamlessly extracts text and images from existing PowerPoint files using Python and converts them into modern web formats.
Premium Typography: Utilizes high-quality font pairings from Fontshare and Google Fonts to avoid the “system font” look.
Interactive Motion: Built-in support for scroll-triggered animations, keyboard navigation, and touch-friendly interactions.

Installation

To use the full capabilities of Frontend Slides, especially the PowerPoint conversion features, ensure your environment is prepared for Claude to execute the necessary scripts.

Python Environment: Ensure Python 3.x is installed.
Conversion Dependencies: Claude will use the python-pptx library to handle file extractions. You can pre-install it via: pip install python-pptx
Skill Configuration: Add the skill definition to your Claude Code environment or project instructions. Claude will follow the multi-phase workflow (Discovery -> Style -> Generation) defined in the system prompts.

Usage

Frontend Slides operates in three primary modes depending on your starting point.

Mode A: Creating from Scratch

Simply provide a topic or a set of rough notes. Claude will guide you through a content discovery phase to determine the purpose (Pitch, Tutorial, Talk) and length of the deck.

Example Prompt:

“I want to create a 10-slide pitch deck for a new decentralized finance protocol. I have the core features listed in notes.txt. Let’s start the discovery process.”

Mode B: PowerPoint Conversion

Upload a .pptx file, and Claude will use a Python-based extraction script to pull out titles, body text, and images, then transform them into a modern web presentation.

Example Prompt:

“Convert quarterly_report.pptx into a high-end HTML presentation. Please extract the images and suggest a ‘Corporate Elegant’ style.”

Mode C: Style Discovery (The Design Lab)

Before generating the full deck, Claude will create a .claude-design/slide-previews/ directory containing three distinct visual directions. You can open these in your browser to see the animations and typography in action before committing to a final build.

Technical Architecture

The generated presentations follow a strict, high-quality code structure:

CSS Custom Properties: All themes are controlled via :root variables, making it easy to tweak colors and fonts globally.
SlidePresentation Class: A clean JavaScript controller handles keyboard listeners (arrows, space), progress bar updates, and navigation dots.
Intersection Observer: Animations are triggered efficiently as slides enter the viewport using the .visible class.
Responsive Design: All decks are mobile-friendly by default, with heavy effects automatically disabled on smaller screens to ensure performance.

Tip: If you want to customize the look after generation, look for the /* CSS CUSTOM PROPERTIES (THEME) */ section at the top of the generated HTML file. Changing a single --accent hex code will update the entire presentation’s visual identity.