Frontend Slides
If you've ever needed to turn slides into a standalone HTML file or just build a deck from scratch without touching Keynote, this is built for that. It enforces viewport-fit layouts so nothing scrolls mid-slide, defaults to zero dependencies, and walks you through style discovery with actual visual previews instead of asking you to pick fonts in the abstract. It'll also convert PowerPoint files using python-pptx. The workflow is opinionated about density limits and accessible navigation, and it pulls from a preset library inspired by zarazhangrui's visual exploration approach. Good for pitch decks, conference talks, or anything where you want animation-rich slides that run in a browser with no build step.
- skills.sh installs
- 7K
- GitHub stars
- 229.1K
- last updated
- Jul 14, 2026
Install
$ npx -y skills add affaan-m/everything-claude-code --skill frontend-slides --agent claude-codeInstalls 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
.pptor.pptxslides 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.
Workflow
1. Detect Mode
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/affaan-m/everything-claude-code
- Categories
- Frontend Development, Office & Documents
More from affaan-m/everything-claude-code
All 256- Python Patterns7K
- Api Design6.9K
- Tdd Workflow6.9K
- Docker Patterns6.8K
- Java Coding Standards6.6K
- Python Testing6.6K
- Video Editing6.6K
- Django Security6.5K
- Springboot Security6.4K
- Article Writing6.3K
- Prompt Optimizer6.3K
- Cpp Coding Standards6.2K
- Market Research6.2K
- Strategic Compact6.1K
- Android Clean Architecture6K
- Springboot Tdd6K
- Continuous Learning5.9K
- Database Migrations5.9K
- Django Tdd5.9K
- E2e Testing5.9K
- Liquid Glass Design5.9K
- Security Scan5.9K
- Deployment Patterns5.8K
- Jpa Patterns5.8K
Recommended
More Frontend Development
zustandlobehub/lobehubLobeHub Zustand store conventions. Use when editing src/store, store slices, public/internal actions, dispatch actions, flattenActions, optimistic updates, sele6.9Kskills.sh installs
angular-routinganalogjs/angular-skillsImplement routing in Angular v20+ applications with lazy loading, functional guards, resolvers, and route parameters. Use for navigation setup, protected routes6.9Kskills.sh installs
frontend-design-directionaffaan-m/eccSet an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pag6.4Kskills.sh installs
angular-dianalogjs/angular-skillsImplement dependency injection in Angular v20+ using inject(), injection tokens, and provider configuration. Use for service architecture, providing dependencie5.8Kskills.sh installsui-demoaffaan-m/eccRecord polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application.5.8Kskills.sh installs