skills.rest
marcocello
marcocelloCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-presentations

Create standalone HTML presentation decks with semantic slide structure and embedded styling.

10|1|Updated Feb 22, 2026
Search Tags:#html#javascript#css#presentation#slides#responsive#deck
One-click install
npx skills add https://github.com/marcocello/dot-codex --skill html-presentations-marcocello
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-presentations
Source: https://github.com/marcocello/dot-codex/tree/main/skills/html-presentations
Command: npx skills add https://github.com/marcocello/dot-codex --skill html-presentations-marcocello

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you create and refine standalone HTML presentation decks without a build step, so you can produce browser-ready slides, demos, and printable exports with consistent structure and visual quality.

Core Features & Use Cases

  • Deck Creation: Build new slide decks with semantic sections, embedded CSS, and optional JavaScript for navigation or interaction.
  • Deck Editing: Make localized changes to existing HTML presentations while preserving layout, typography, anchors, and slide behavior.
  • Visual Systems and Prototypes: Design keynote-style decks, scroll-snap presentations, interactive demos, and report-like artifacts with portable inline SVG and responsive behavior.

Quick Start

Use the html-presentations skill to create a browser-native HTML slide deck for my topic with a clear narrative, responsive styling, keyboard navigation, and print-ready support.

Frequently Asked Questions about html-presentations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a standalone HTML presentation deck without a build step?▼

An HTML slide deck uses semantic section elements for individual slides, embedded CSS for responsive styling, and optional JavaScript for keyboard navigation. This structure creates portable, browser-native presentations that work offline without external dependencies.

Can I add keyboard navigation and scroll-snap behavior to web-based slides?▼

Yes, you can implement keyboard navigation and scroll-snap behavior in web-based slides using optional embedded JavaScript. This creates a keynote-style presentation experience that responds to user input and adapts to different screen sizes responsively.

What is the best way to make print-ready HTML slides for export?▼

The best way to make print-ready HTML slides is to build a standalone deck with semantic structure and embedded styling, then apply print-specific CSS rules. This ensures your presentation exports cleanly to PDF or physical print while preserving layout and typography.

How do I edit an existing HTML presentation without breaking the slide layout?▼

To edit an existing HTML presentation without breaking the layout, make localized changes that preserve the original anchors, typography, and embedded CSS. This maintains the deck's slide behavior and visual system while allowing targeted content updates.

Does this approach support inline SVG diagrams for interactive demos?▼

Yes, this approach supports portable inline SVG diagrams for interactive demos. You can embed vector graphics directly within the HTML slide structure, allowing responsive scaling and interaction logic without relying on external image files or dependencies.

Related Skills

Explore More Design & Creative Skills→
OutfinityResearchOutfinityResearch

pptx-lite

Generate a plain-text slide-by-slide outline from topic, slide count, and key points.

Official
Intermediate
pekralpekral

frontend-slides

Generate self-contained HTML presentation decks with vanilla CSS and JavaScript.

Community
Intermediate
davpatel605-beepdavpatel605-beep

architecture-diagram

Generate dark-themed SVG architecture diagrams as standalone HTML documents.

Community
Intermediate
yoanbernabeuyoanbernabeu
34

slidev-transitions

Configure global and per-slide transitions in Slidev using frontmatter and CSS.

Community
Basic