Frontend Slides
Create animation-rich HTML slide decks with zero dependencies
What You Can Do
You can create self-contained HTML presentations with distinctive design aesthetics, smooth animations, and custom typography that feel intentional rather than generic. Convert PowerPoint files directly into interactive web slides, or build custom decks from scratch with precise control over layout, color schemes, and motion. Every slide fits perfectly in the viewport—no scrolling, no dependencies, no setup required.
Features
Single file with inline CSS/JS, runs in any browser
Transform .pptx files into interactive HTML presentations
All slides fit exactly in 100vh with no internal scrolling
Staggered reveals, page-load effects, and micro-interactions without libraries
CSS variables for cohesive, distinctive aesthetics inspired by IDE themes and design movements
High-impact animations that delight on first impression, not scattered effects
Depth-creating overlays and gradients that set presentation tone
Example Output
Example 1: Tech Conference Pitch Deck
<!-- Single HTML file with embedded CSS animations -->
<slide class="title-slide" style="background: linear-gradient(135deg, #1e1e2e 0%, #45475a 100%)">
<h1 class="stagger-in">Your Product Name</h1>
<p class="fade-in" style="animation-delay: 0.3s;">Subtitle with custom serif font</p>
</slide>
Generates: Darkly-themed slides with distinctive typography, staggered text reveals on load, cohesive color palette throughout.
Example 2: Converted PowerPoint
- Input: 12-slide .pptx with charts and bullet points
- Output: Responsive HTML deck preserving content structure, enhanced with custom fonts, smooth transitions, and optimized animations
- Result: Presentation that feels intentional, not auto-generated
What's Included
- SKILL.md instruction file with design principles and viewport-fitting requirements:
- HTML template library with pre-built slide layouts (title, content, two-column, full-bleed):
- CSS animation patterns for staggered reveals, fade-ins, and motion micro-interactions:
- PowerPoint conversion workflow with content extraction and HTML restructuring guides:
- Color & typography framework using CSS variables for cohesive, distinctive aesthetics:
Who It's For
- Software engineers presenting at conferences, meetups, or internal tech talks
- Product managers pitching to investors or stakeholders with data-driven slides
- Startup founders creating fundraising decks and demo presentations
- Educators and technical instructors building engaging course materials
- Designers and developers showcasing portfolio work or case studies
Best For
- Converting existing PowerPoint presentations into web-native formats
- Building tech talk and conference presentation decks with custom aesthetics
- Creating pitch decks and investor presentations with distinctive branding
- Designing interactive portfolio showcases and case study presentations
- Developing training materials and educational slide decks without dependencies
You might also like
Rapidly analyze production incidents by correlating observability signals—logs, metrics, traces, and events—to identify the true root cause instead of symptoms. You'll reconstruct incident timelines, quantify impact scope, and generate both immediate remediation steps and long-term prevention measures.
Claude analyzes your code diffs and generates standardized commit messages that follow the Conventional Commits specification. The skill automatically determines the correct commit type, scope, and description based on the changes you've made, ensuring your messages are parseable by automation tools while remaining human-readable for code reviewers.
You can rapidly build responsive, production-ready UI designs using Tailwind's utility-first approach. Apply low-level utility classes directly to HTML elements to create custom designs without writing CSS, implement mobile-first responsive layouts, add dark mode and theme customization, and generate optimized CSS bundles through build-time processing that includes only the classes you actually use.
by calesthio
You can diagnose why layouts break at specific breakpoints and receive precise CSS fixes to resolve them. The skill identifies root causes of overflow problems, flex/grid misalignment, and mobile usability failures, then provides responsive design patterns to prevent similar issues from recurring across your entire project.
by calesthio
You'll transform high-level feature requirements into a complete development plan covering API design, frontend implementation, testing strategy, and documentation. The skill helps you identify dependencies, parallelize work across frontend and backend teams, and establish quality gates that ensure features ship bug-free with proper error handling and logging.
Transform schema and data changes into production-ready migration packages that protect data integrity and minimize downtime. You can handle column additions, renames, type conversions, and backfills using proven patterns like expand-contract and shadow tables. The skill generates explicit rollback scripts, validation checklists, and phased execution plans that keep applications stable throughout the migration.
You can create comprehensive performance testing strategies tailored to your application's architecture, analyze test results to identify bottlenecks, and generate prioritized recommendations for optimization. The skill helps you design load tests, interpret metrics like latency and throughput, and create action plans for performance improvements.
You can accelerate your entire antenna design workflow—from initial concept to optimized specifications—by leveraging Claude's knowledge of electromagnetic theory, antenna types, and design trade-offs. Claude helps you parameterize designs, identify optimal configurations for your frequency band and application, and prepare detailed briefs for simulation and manufacturing. You'll generate design reviews, impedance-matching solutions, and validation checklists without context-switching to multiple tools.