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 firmware logs and diagnose hardware issues that cause device failures, connectivity problems, and performance degradation. You'll identify root causes from stack traces, crash dumps, and sensor data, then generate specific optimization recommendations. This skill transforms raw device logs into actionable debugging plans that reduce time-to-resolution from hours to minutes.
This skill enables you to automatically audit your websites against compliance standards and detect deviations from expected baselines. You can track regulatory requirements, identify policy violations, and generate compliance reports with actionable remediation steps. Monitor multiple sites simultaneously and maintain detailed audit trails for compliance documentation.
Analyze chemical processes systematically to identify hazards, assess risks, and generate safety recommendations. You can perform HAZOP analyses, evaluate compliance with industry standards, conduct root-cause analysis of incidents, and develop emergency response procedures. The skill guides you through structured safety reviews that reduce the likelihood of accidents and regulatory violations.
You'll develop systematic approaches to injectable formulation design, from API selection through sterilization strategy. Claude helps you troubleshoot failed batches by analyzing root causes, recommends regulatory pathways (505(b)(2), ANDA, NDA), and provides science-backed solutions for stability, compatibility, and manufacturability challenges.
This skill helps you systematically assess integration needs across your systems, design architecture patterns that scale with your organization, and identify technical and operational risks before implementation. You'll receive architecture recommendations aligned to your business constraints, clear integration roadmaps, and risk mitigation strategies that reduce deployment surprises. Get structured decision records suitable for architecture review boards and engineering teams.
You can conduct comprehensive hazard analyses for chemical processes using industry-standard methodologies like HAZOP and LOPA. The skill helps you assess risks quantitatively, identify control gaps, design engineered safeguards, and generate formal documentation for regulatory compliance and process safety management.
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 prototype and build accessible user interfaces by combining shadcn/ui's pre-built Radix UI components with Tailwind CSS utility-first styling. This skill enables you to implement complex UI patterns, responsive layouts, dark mode themes, and design systems while maintaining full type safety and accessibility standards. Generate visual designs, posters, and branded materials alongside functional interface components.
by trungtv