Frontend Slides

Frontend Slides

Create animation-rich HTML presentations from scratch or by converting PowerPoint files.

Claude / Claude Code
GitHub Copilot
Cursor
VS Code
OpenAI Codex
Document CreationDeveloperTeacher / EducatorDesigner

What it does

Claude generates HTML presentations that are technically a sequence of slides but look like unstyled divs — no transitions, no visual hierarchy between slides, no consistent layout, and no keyboard navigation. This skill loads the patterns for building animation-rich HTML presentations: CSS-based slide transitions, consistent typography and layout across slides, keyboard and touch navigation, speaker notes, and the ability to convert PowerPoint content into a web-based format that looks better than the original. Made by zarazhangrui.

Use case

Creating web-based presentations that can be opened in a browser rather than needing PowerPoint. Particularly useful for technical talks where code needs to be syntax-highlighted and interactive, or for presentations that will be shared as a URL.

The Prompt

Copy and use immediately
"Build a presentation about this technical topic — 10 slides with code examples."
"Convert this PowerPoint outline into an animated HTML slide deck."
"Create a demo presentation with a live code editor embedded in one slide."
"Build a presentation with a countdown timer and speaker notes."
"Make these slides work offline as a standalone HTML file."

How to use

  1. 1

    Describe the presentation: topic, number of slides, content for each, and any specific visual requirements.

  2. 2

    For PowerPoint conversion: provide the outline or key points. Claude builds the HTML version.

  3. 3

    Specify interactivity: code blocks, embedded demos, or interactive elements within slides.

Input / Output

Input

A presentation outline, PowerPoint content to convert, or a topic with key points to structure into slides.

Output

A complete HTML presentation with CSS transitions, keyboard navigation, consistent slide layouts, syntax-highlighted code blocks, and speaker notes. Runs in any browser without installation.

Added 15 Mar 2026Submitted by zarazhangrui👁 45📋 0

Details

Platforms
Claude / Claude CodeGitHub CopilotCursorVS CodeOpenAI Codex
Category
Document Creation
License
apache-2.0

Stats

📋 Copies0
👁 Views45
👍 Upvotes0

Install with skills.sh

npx skillsadd zarazhangrui/skills/frontend-slides

Requires skills.sh CLI

Community Notes

Sign in with GitHub to leave a note.

No notes yet. Be the first to contribute.