What kind of animations are included?

The presentations include meaningful entry animations triggered by an Intersection Observer, along with smooth transitions for keyboard, touch, and scroll navigation.

How does the 'viewport-safe' rule work?

Every generated slide is strictly constrained to 100vh/100dvh, using CSS clamp() for scaling to ensure content never requires scrolling and looks perfect on any screen size.

Can I convert my existing PowerPoint files to web formats?

Yes, the skill can use Python tools like python-pptx to extract text, images, and notes from .pptx files and transform them into interactive HTML slides.

How do I choose a design style?

The skill generates three different single-slide previews based on your goals, allowing you to visually pick or mix elements before building the full presentation.

Does Frontend Slides require external libraries like Reveal.js?

No, the skill follows a 'zero-dependency' principle, generating a single self-contained HTML file with all necessary CSS and JavaScript included.

Frontend Slides

Name: Frontend Slides
Author: saar120

bysaar120

0•

デザインツール

Create animation-rich, zero-dependency HTML presentations and convert PowerPoint files into production-quality web formats directly within Claude Code.

Frontend Slides is a specialized Claude Code skill designed to transform ideas, notes, or existing PowerPoint files into high-performance, responsive HTML presentations. It eliminates the need for external frameworks by generating self-contained files with inline CSS and JS, ensuring every slide fits perfectly within the viewport without scrolling. The skill prioritizes visual exploration by generating tangible style previews, helping users discover their aesthetic through live examples rather than abstract choices. Whether you are converting a legacy .pptx or building a high-stakes pitch deck from scratch, it ensures professional typography, smooth animations, and full cross-platform accessibility.

主な機能

01Zero-dependency generation creating self-contained HTML/CSS/JS files.

02Mandatory viewport-safe design with fluid scaling and overflow prevention.

03Native navigation support for keyboard, touch gestures, and mouse wheels.

040 GitHub stars

05Visual style discovery via three distinct, single-slide design previews.

06Automated PowerPoint (.pptx) conversion using Python-based extraction.

ユースケース

01Building responsive internal training materials that run offline in any browser.

02Converting legacy PowerPoint decks into modern, interactive web-based presentations.

03Creating high-impact pitch decks or conference slides with custom animations.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add saar120/skillgate-registry frontend-slides

For use in Claude.ai and ChatGPT

主な機能

01Zero-dependency generation creating self-contained HTML/CSS/JS files.

02Mandatory viewport-safe design with fluid scaling and overflow prevention.

03Native navigation support for keyboard, touch gestures, and mouse wheels.

040 GitHub stars

05Visual style discovery via three distinct, single-slide design previews.

06Automated PowerPoint (.pptx) conversion using Python-based extraction.

ユースケース

01Building responsive internal training materials that run offline in any browser.

02Converting legacy PowerPoint decks into modern, interactive web-based presentations.

03Creating high-impact pitch decks or conference slides with custom animations.