Mmcp.market

html-ppt skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

For consulting delivery work: turn diagnosis, frameworks, and project work into a client-adoptable action plan. Built around the core query "consulting-final-deck", with engagement manager judgment, buyer-ready proof, and this outcome: accept the recommendation and commit owners to the roadmap.

A100/100content scan

Is the html-ppt skill safe?

Clean: nothing in its files matched our rules. We read 162 files in the folder on 2026-09-28.

No findings.

Install the html-ppt skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/html-ppt ~/.claude/skills/html-ppt
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

html-ppt — HTML PPT Studio

Author professional HTML presentations as static files. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in assets/base.css.

Install

npx skills add https://github.com/lewislulu/html-ppt-skill

One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.

What the skill gives you

  • 36 themes (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
  • 15 full-deck templates (templates/full-decks//) — complete multi-slide decks with scoped .tpl- CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演讲者模式专用)
  • 31 layouts (templates/single-page/*.html) with realistic demo data
  • 27 CSS animations (assets/animations/animations.css) via data-anim
  • 20 canvas FX animations (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
  • Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
  • FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
  • Showcase decks for themes / layouts / animations / full-decks gallery
  • Managed Chromium render script for PNG export

When to use

Use when the user asks for any kind of slide-based output or wants to turn text/notes into a presentable deck. Prefer this over building from scratch.

🎤 Presenter Mode (演讲者模式 + 逐字稿)

If the user mentions any of: 演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — use the presenter-mode-reveal full-deck template and write 150–300 words of 逐字稿 in each slide's .

See references/presenter-mode.md for the full authoring guide including the 3 rules of speaker script writing:

  1. 不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段
  2. 每页 150–300 字 — 2–3 分钟/页的节奏
  3. 用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"

All full-deck templates support the S key presenter mode (it's built into runtime.js). S opens a new popup window with 4 magnetic cards:

  • 🔵 CURRENT — pixel-perfect iframe preview of the current slide
  • 🟣 NEXT — pixel-perfect iframe preview of the next slide
  • 🟠 SPEAKER SCRIPT — large-font 逐字稿 (scrollable)
  • 🟢 TIMER — elapsed time + slide counter + prev/next/reset buttons

Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to localStorage per deck. A "Reset layout" button restores the default arrangement.

Why the previews are pixel-perfect: each preview is an that loads the actual deck HTML with a ?preview=N query param; runtime.js detects this and renders only slide N with no chrome. So the preview uses the same CSS, theme, fonts, and viewport as the audience view — colors and layout are guaranteed identical.

Smooth navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker. The two windows also stay in sync via BroadcastChannel.

Only presenter-mode-reveal is designed from the ground up around the feature with proper example 逐字稿 on every slide.

Keyboard in presenter window: ← → navigate (syncs audience) · R reset timer · Esc close popup. Keyboard in audience window: S open presenter · T cycle theme · ← → navigate (syncs presenter) · F fullscreen · O overview.

Before you author anything — infer first, ask only when blocked

Before writing slides, resolve the three decisions below from the user's brief, project metadata, supplied content, and conversation. If they are sufficiently clear, choose a tasteful default and proceed without waiting for confirmation; state the choices briefly in the plan. Ask one consolidated clarification only when a missing answer would materially change the deck.

watching (engineers / execs / 小红书读者 / 学生 / VC)?

  1. Content & audience. What's the deck about, how many slides, who's

candidates based on tone:

  1. Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3

terminal-green, blueprint

  • Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
  • Tech sharing / engineering → tokyo-night, dracula, catppuccin-mocha,

magazine-bold

  • 小红书图文 → xiaohongshu-white, soft-pastel, rainbow-gradient,

neo-brutalism

  • Academic / report → academic-paper, editorial-serif, minimal-white
  • Edgy / cyber / launch → cyberpunk-neon, vaporwave, y2k-chrome,

the closest templates/full-decks//. If the user's content suggests something obvious (e.g. "我要做产品发布会" → product-launch), use it confidently instead of asking blindly.

  1. Starting point. One of the 14 full-deck templates, or scratch? Choose

A good clarification, when one is actually needed, follows the active discovery-question-form protocol and contains only unresolved fields. For example, if content and audience are known but the requested tone spans incompatible themes, ask one theme question with 2–3 recommended options. Do not repeat the form as a markdown checklist.

If the known context already resolves them, scaffold the deck and start writing immediately.

Quick start

  1. Scaffold a new deck. From the repo root:
./scripts/new-deck.sh my-talk
   open examples/my-talk/index.html
  1. Pick a theme. Open the deck and press T to cycle. Or hard-code it:
<link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">

Catalog in references/themes.md.

files in templates/single-page/ into your deck. Replace the demo data. Catalog in references/layouts.md.

  1. Pick layouts. Copy ... blocks out of

any element. On /grids, use anim-stagger-list for sequenced reveals. For canvas FX, use ... and include . Catalog in references/animations.md.

  1. Add animations. Put data-anim="fade-up" (or class="anim-fade-up") on

examples/my-talk/ as a starting point. Each folder is self-contained with scoped CSS. Catalog in references/full-decks.md and gallery at templates/full-decks-index.html.

  1. Use a full-deck template. Copy templates/full-decks// into
  1. Render to PNG.
./scripts/render.sh templates/theme-showcase.html       # one shot
   ./scripts/render.sh examples/my-talk/index.html 12      # 12 slides

Authoring rules (important)

closest layout from templates/single-page/ first, then replace content.

  • Always start from a template. Don't author slides from scratch — copy the

from CSS variables defined in assets/base.css and overridden by a theme. Good: color: var(--text-1). Bad: color: #111.

  • Use tokens, not literal colors. Every color, radius, shadow should come

a new templates/single-page/*.html if none of the 30 fit.

  • Don't invent new layout files. Prefer composing existing ones. Only add

and the progress bar are provided by assets/base.css + runtime.js.

  • Respect chrome slots. .deck-header, .deck-footer, .slide-number

so the deck supports ← → / T / A / F / S / O / hash deep-links.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers