frontend-slides
Create zero-dependency, animation-rich HTML presentations with visual style discovery.
- Supports three workflows: building new decks from scratch, converting PowerPoint files to HTML, and enhancing existing presentations with improved layout and motion
- Enforces viewport-fit constraint: every slide must fit in one viewport with no internal scrolling, using
clamp()for responsive scaling and Intersection Observer for reveal animations - Defaults to visual exploration over abstract questionnaires: generates 3 single-slide preview files in different styles, then builds the full deck based on user preference
- Includes keyboard, touch, wheel, and swipe navigation with progress indicators, semantic HTML structure, and
prefers-reduced-motionsupport for accessibility
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.
More from affaan-m/everything-claude-code
security-review
Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment/sensitive features. Provides comprehensive security checklist and patterns.
8.1Kgolang-patterns
Idiomatic Go patterns, best practices, and conventions for building robust, efficient, and maintainable Go applications.
7.6Kcoding-standards
Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.
6.8Kfrontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
6.8Kbackend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
6.7Kgolang-testing
Go testing patterns including table-driven tests, subtests, benchmarks, fuzzing, and test coverage. Follows TDD methodology with idiomatic Go practices.
6.3K