Frontend Slides

This one builds viewport-fitted HTML presentations in a single file with no dependencies. It handles new decks from scratch, converts PowerPoint files using python-pptx, and fixes existing HTML slides that overflow or look generic. The workflow centers on visual exploration rather than style questionnaires: you get three live preview slides to pick from before committing to a direction. Every slide is locked to 100vh with clamp-based scaling, so nothing scrolls or breaks on weird screen sizes. It enforces density limits, respects reduced motion, and includes keyboard plus touch navigation out of the box. Good for conference talks, pitch decks, or any situation where you need something that looks intentional instead of template-purple-gradient-default.

skills.sh installs: 6.5K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill frontend-slides --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Inspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).

When to Activate

Creating a talk deck, pitch deck, workshop deck, or internal presentation
Converting .ppt or .pptx slides into an HTML presentation
Improving an existing HTML presentation's layout, motion, or typography
Exploring presentation styles with a user who does not know their design preference yet

Non-Negotiables

Zero dependencies: default to one self-contained HTML file with inline CSS and JS.
Viewport fit is mandatory: every slide must fit inside one viewport with no internal scrolling.
Show, don't tell: use visual previews instead of abstract style questionnaires.
Distinctive design: avoid generic purple-gradient, Inter-on-white, template-looking decks.
Production quality: keep code commented, accessible, responsive, and performant.

Before generating, read STYLE_PRESETS.md for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.