Skip to main content
affpapa.org
RU EN
skill CX Codex

html-ppt-skill — Claude Code skill: what it does, how to install

Builds static HTML slide decks using standalone CSS and JavaScript without build pipelines. Helpful when you need an animated presentation right in the browser.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-code
Open on GitHub

What html-ppt-skill does

The skill drafts presentation decks on standard HTML, CSS, and JavaScript. It provides 36 switchable visual themes, 31 slide layouts, and 47 animation options, with 20 canvas-based visual effects. Changing the appearance across all slides requires swapping a single CSS stylesheet link.

A presentation structure relies on assets/base.css, one theme stylesheet, and runtime.js. This runtime script provides slide navigation, keyboard controls, and an overview mode. Decks can be bootstrapped via ./scripts/new-deck.sh <name>, generating an editable document in the examples folder.

Presentations depend directly on relative paths to the skill's assets/ folder. Moving an exported index.html file without its companion styles and scripts will break both formatting and slide transitions.

What it helps with

  • scaffold presentation slides in raw HTML without build tools
  • apply pre-styled palettes like dark themes or minimal light layouts
  • animate typography and bullet points using CSS entrance classes
  • attach interactive canvas visual effects to individual slides

Example prompts for the agent

  • Generate an HTML pitch deck using the tokyo-night theme
  • Scaffold a fresh deck with ./scripts/new-deck.sh my-talk and add bullet slides
  • Configure a two-column slide layout with animated text entry

How to install html-ppt-skill

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-code

2Manually: put the files in place

~/.claude/skills/html-ppt-skill/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/html-ppt-skill/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about html-ppt-skill

How do I install html-ppt-skill in Claude Code?

Run npx skills add reason-machines/trending-skills --skill html-ppt-skill -a claude-code. The tool will be registered for your agent.

What does html-ppt-skill do?

It builds animated browser slides using static HTML and CSS. You get slide navigation, presenter tools, and pre-built templates without running a bundler.

Does viewing the deck require a build step?

No bundler or compiler is necessary. You can launch index.html directly in any web browser as long as the relative path to assets/ remains intact.

Similar skills

Everything for Frontend and UI →
html-ppt-retro-quarterly-review nexu-io A quarterly review template in bold blue-and-orange editorial style: three cinematic slides with slab headlines and a cream paper feel. No frameworks, one self-contained HTML file. CX Codex +1 2,800installs dokie-ai-ppt MYZY-AI This skill turns a conversation with your agent into an HTML deck: it collects requirements, drafts an outline, picks a theme and writes the slides. CX Codex +1 984installs html-to-ppt claude-office-skills This skill turns Markdown or HTML into PowerPoint, PDF and HTML slides with Marp. Useful when the deck already exists as plain text. CX Codex +1 5,000installs revealjs ryanbbrown This skill turns your content into a reveal.js presentation: an HTML file with slides plus CSS for the theme. Open it in a browser, no build step. CX Codex +1 736installs ppt-visual claude-office-skills Designs slide layouts, typography, and color schemes. Outputs ASCII wireframes and layout specifications for presentation decks. CX Codex +1 12,100installs ppt-generation bytedance Creates PPTX presentations by generating slide visuals and assembling them into PowerPoint decks. Useful when you need a consistent visual deck from a text prompt. CX Codex +1 5,200installs

From the same set186

progressive-blur-header-swiftui This skill adds a SwiftUI sticky header with a gradual blur effect. Use it for interfaces styled after Apple Music, Photos, or the App Store. CX Codex +1 493installs puremac-macos-cleaner This skill guides coding agents through building PureMac, adding custom cleanup targets, and automating macOS system maintenance with zero telemetry. CX Codex +1 484installs talk-normal-llm-prompt This skill steers an LLM away from filler and padded phrasing while keeping the useful content. Use it for API calls, project rules, or direct assistant instructions. CX Codex +1 479installs moss-tts-nano-speech A skill that shows the agent how to run MOSS-TTS-Nano, a tiny multilingual speech model with voice cloning that works on CPU. CX Codex +1 478installs isolet-widget-isolation This skill packages a component into a self-contained widget with shadow DOM and scoped styles, ready to embed on any page. CX Codex +1 474installs yourvpndead-vpn-detection Android security skill explaining how unprivileged apps detect active VPNs and open localhost SOCKS5 proxies without root. CX Codex +1 472installs webphysics-avbd-engine This skill helps wire a WebGPU physics engine into a project, including bodies, contacts, joints, springs, and render-state updates. CX Codex +1 460installs anything-analyzer-cdp This skill supports browser protocol analysis with an Electron app that captures traffic through CDP and sends collected data to an AI model. CX Codex +1 447installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor