Mmcp.market

html-ppt-product-launch skill

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

OpenDesign Teams: a launch-and-adoption proposal for a mid-market design team weighing a switch from closed cloud tools. Built as a decision-grade B2B sales deck for design team lead, IT.

A100/100content scan

Is the html-ppt-product-launch skill safe?

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

No findings.

Install the html-ppt-product-launch 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-product-launch ~/.claude/skills/html-ppt-product-launch
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 · Product Launch

A focused entry point into the html-ppt master skill that lands the user directly on the product-launch full-deck template.

When this card is picked

The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of product-launch (see the upstream full-decks catalog for screenshots and rationale).

How to author the deck

design-templates/html-ppt/SKILL.md — content/audience checklist, token rules, layout reuse, presenter mode, the keyboard runtime, and the "never put presenter-only text on the slide" rule.

  1. Read the master skill first. All authoring rules live in

design-templates/html-ppt/templates/full-decks/product-launch/ — copy index.html and style.css into the project, keep the .tpl-product-launch body class.

  1. Start from the matching template folder:

index.html links the shared CSS/JS via ../../../assets/... because it sits three folders deep inside design-templates/html-ppt/templates/full-decks/. Once you copy index.html into the project, those parent-relative URLs no longer resolve and base.css, animations.css, and runtime.js will 404 — meaning the deck never activates and slide navigation is dead. Pick one of these two recipes per project:

  1. Bring the shared runtime with the template. The upstream

design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css, and design-templates/html-ppt/assets/runtime.js into a project-local assets/ (with assets/animations/animations.css), then rewrite the four / tags in index.html from ../../../assets/... to the matching project-local paths (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).

  • Recipe A — copy + rewrite (preferred): copy

with a ... containing the file's contents, and the with a ... containing runtime.js. Yields a single self-contained index.html. Either way, do not ship the upstream ../../../assets/... URLs verbatim into a project artifact — they only work in-tree.

  • Recipe B — inline: read the same four files and replace each

feel, swap in any of the 36 themes from design-templates/html-ppt/assets/themes/*.css via and let T cycle.

  1. Pick a theme. Default tokens look fine; if the user wants a different

recognises the structural classes shipped in the template — keep them.

  1. Replace demo content, not classes. The .tpl-product-launch scoped CSS only
  1. Speaker notes go inside or — never as visible text on the slide.

Attribution

Visual system, layouts, themes and the runtime keyboard model come from the upstream MIT-licensed lewislulu/html-ppt-skill. The LICENSE file ships at design-templates/html-ppt/LICENSE; please keep it in place when redistributing.

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