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.
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.
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 transform raw text into structured, labeled datasets for machine learning, analysis, and research. This skill performs named entity recognition, sentiment classification, part-of-speech tagging, and dependency parsing—generating consistent, validated annotations at scale. Use it to prepare corpora, extract entities, classify documents, or perform linguistic analysis without manual annotation.
This skill helps you systematically analyze service mesh architectures, identify inter-service communication failures, and design optimal routing and security policies. You'll receive step-by-step troubleshooting guidance tailored to your mesh platform (Istio, Linkerd, Consul), configuration validation reports, and architectural recommendations that reduce latency, improve observability, and tighten security posture.
This skill automates the creation of production-ready deployment validation checklists, infrastructure-as-code templates, and incident response runbooks tailored to your ML stack. You get comprehensive pre-deployment checks covering model validation, data pipeline integrity, infrastructure readiness, and monitoring setup—all customized for your specific models and cloud provider. The skill generates executable runbooks that teams can follow during incidents, including rollback procedures, failover strategies, and diagnostic commands.
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