New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

HTML PPT Editor

Free

Create minimalist HTML presentations with ease.

by nexu-io84.9k stars on nexu-io/open-design
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What HTML PPT Editor does

The HTML PPT Editor is designed for users who need to create clean, editorial-style presentations without the distractions of flashy design elements. This skill provides a structured framework for building 16:9 HTML decks that are suitable for various professional contexts, such as investor updates, design reviews, and internal manifestos. The emphasis is on a minimalist aesthetic, ensuring that the content remains the focal point of each slide.

This skill is based on the principles of editorial minimalism, featuring a warm off-white background and off-black text to create a comfortable reading experience. Each slide is designed to be a full viewport section, allowing for smooth transitions and easy navigation through keyboard, touch, or scroll interactions. The pre-defined typography pairs serif for titles, grotesque for body text, and monospace for metadata, ensuring visual harmony throughout the presentation.

The HTML PPT Editor includes specific guidelines for slide design, such as generous padding, the use of hairline rules instead of heavy borders or shadows, and a strict color palette that limits the use of accent colors. This ensures that the final output is not only visually appealing but also adheres to the principles of effective communication. With a focus on usability, the skill provides fallback options for static or print versions, making it versatile for different presentation scenarios.

Ideal for designers, marketers, and business professionals, this skill allows users to create presentations that prioritize clarity and professionalism. By following the established rules and templates, users can produce high-quality slides that effectively convey their messages without unnecessary embellishments.

When to use it

Use this skill when you need to create straightforward, professional presentations that focus on content over design flair.

When not to use it

This skill may not be suitable for users looking for highly dynamic or visually complex presentations with extensive multimedia elements.

What you can build with it

Investor Update Presentation

Create a clear and concise presentation for stakeholders that focuses on key metrics and updates without distractions.

Design Review Deck

Present design concepts and feedback in a structured format that emphasizes clarity and visual hierarchy.

Internal Manifesto

Share company values or strategies in a professional manner that aligns with editorial design principles.

How to install HTML PPT Editor

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-taste-editorial --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

HTML PPT — Editorial Minimalism

A 16:9 deck for the briefs that hate neon: investor updates, design reviews, internal manifestos, lecture decks. Reads like a print supplement, not a SaaS landing.

Source

Distilled from Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md. The deck system follows the project deck convention: each .slide is a 100vw × 100vh section, the active slide carries .active / .is-active, and the baked example owns keyboard, wheel, touch, and dot navigation inside the gallery iframe. No-script and print fallbacks keep every slide visible. See example.html in this directory.

Hard rules

  • Substrate: warm off-white #FBFBFA / #F7F6F3. Foreground off-black #1A1A19. Never pure white or pure black.
  • Type pairing: display in serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Inter Tight / Switzer), meta in mono (JetBrains Mono).
  • Display scale per slide: title clamp(56px, 6.5vw, 96px) italic-capable serif, line-height 1.05, tracking -0.025em.
  • Hairline only: 1px solid #EAEAEA — borders, dividers, table cells. No drop shadows.
  • One accent color chosen from the muted-pastel pairs (e.g. sage #346538 on #EDF3EC, or red #9F2F2D on #FDEBEC). Used sparingly — eyebrow dot, chart fill, call-out chip. Never as a slide background.
  • Slide padding: generous (72px 96px minimum). Title at most 14ch wide.
  • Eyebrow: every slide opens with a mono uppercase eyebrow letter-spacing: 0.18em and a section number 01 / 09.
  • Page numbers: mono, bottom-right corner.

Banned

  • Inter (use Inter Tight if you must, but prefer Switzer / SF Pro). No Roboto, Open Sans.
  • Heavy drop shadows. Glow. Gradient text.
  • 3-equal-card feature rows. Use uneven hairline-divided columns instead.
  • Emojis in text or as bullet markers — use — or no marker.
  • Full-bleed photography on every slide. Use one or two image slides; reserve them.
  • AI-cliché copy ("Elevate", "Unleash", "Seamless", "Next-Gen").
  • Slide transitions noisier than fade-in.

Required slide archetypes (10–12 total recommended)

  1. Cover — serif title, italic mid-sentence accent, mono meta footer.
  2. Eyebrow + thesis — single sentence of body lede on the left; mono numbered TOC on the right.
  3. Numbered manifesto — three or four hairline-separated theses.
  4. Bento data slide — uneven 6-col grid with hairline gaps; one stat in serif, supporting in mono.
  5. Quote / pull-out — single sentence at large serif, attribution mono, hairline above and below.
  6. Comparison — two columns separated by a vertical hairline; "Doesn't / Does" or "Before / After".
  7. Table or index — display: grid; gap: 1px on hairline color.
  8. Chart or breakdown — flat horizontal bar chart with mono labels, accent fill only on the latest bar.
  9. Team / colophon — mono key-value list, no avatars.
  10. Closing — serif final line italic; CTA as ghost button; signature in mono.

Motion

  • Runtime navigation: keyboard, wheel / trackpad, touch swipe, and dot buttons must all update the same active slide state. Keep the fade at roughly 400ms cubic-bezier(0.16, 1, 0.3, 1).
  • Static / print fallback: keep every slide visible when the runtime has not booted or the document is printed.
  • No translate, no blur, no auto-advance.

Pre-flight

  • Substrate is warm off-white; foreground is off-black; never pure black/white
  • Serif used on titles, grotesque on body, mono on meta — three families, three jobs
  • One accent color, used at most three times in the whole deck
  • Every slide has eyebrow + section number + page number
  • At least one hairline-grid table or comparison module
  • No drop shadows, no gradients, no emojis, no banned fonts
  • Keyboard, wheel / trackpad, touch swipe, and dot navigation all move one slide and keep the active dot / active slide in sync

Frequently asked questions about HTML PPT Editor

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.