Html Template

What this skill does

The Html Template skill provides a standardized reference architecture for creating slide presentations using HTML, CSS, and JavaScript. It ensures every presentation follows a consistent structure with a base HTML layout, themeable CSS custom properties, and a core SlidePresentation JavaScript class that handles keyboard, touch, and scroll interactions. This template supports smooth animations triggered by scroll events and includes optional UI enhancements like progress bars and navigation dots.

Who it's for

This skill is designed for digital marketers and content strategists who need to build engaging, shareable slide presentations for webinars, pitches, or training sessions. SEO specialists and PPC operators can use it to craft visually consistent decks that align with brand guidelines and improve user engagement metrics such as time on page and click-through rates. Agencies working on client-facing presentations will find it useful to streamline slide development with reusable code patterns.

Key workflows

Practitioners start by customizing the base HTML structure, setting presentation titles, fonts, and theme colors through CSS custom properties. Next, they implement and configure the SlidePresentation JavaScript class to enable keyboard navigation, touch/swipe support, and scroll-triggered animations using the Intersection Observer API. After that, they add and style optional components like progress bars and navigation dots for better user experience. Finally, they test across devices to ensure smooth transitions, accessibility, and responsive typography using clamp().

Common questions

How do I control the slide animations? Animations are triggered by adding the `.visible` class via the Intersection Observer when slides enter the viewport. Can I customize fonts and colors? Yes, all fonts and colors are controlled through CSS custom properties defined in the :root selector. Is inline editing supported? Inline editing features are optional and must be explicitly enabled; otherwise, editing-related code is omitted to keep the presentation lightweight.

How to use in Metaflow

Attach the Html Template skill to any Metaflow agent task that involves generating or customizing HTML slide decks. The agent will use the structured base template and JavaScript controller to produce presentations with consistent navigation and animation features. Expect the output to include a complete, theme-ready slide deck that can be further tailored or extended. For detailed integration steps, see the documentation on...

For broader context, see our roundup of claude skills for marketing, and read common Claude Code content mistakes for related setup guidance.