What is the HTML PPT Knowledge Arch Blueprint?

It is a specialized template for creating structured product management presentations, focusing on decision-grade communication.

How do I start using this skill?

Begin by reading the master skill for authoring rules, then copy the template files and integrate the necessary assets into your project.

Can I customize the look of my presentations?

Yes, you can choose from 36 different themes to customize the visual identity of your presentations.

What are the two methods for integrating assets?

You can either copy and rewrite the paths to necessary CSS and JS files or inline them directly into your HTML file.

Who is this skill intended for?

This skill is aimed at product managers, engineers, and SRE teams who need to create effective and structured presentations.

HTML PPT Knowledge Arch Blueprint

Name: HTML PPT Knowledge Arch Blueprint
Availability: InStock
Author: nexu-io

Free

Create structured product management decks effortlessly.

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 Knowledge Arch Blueprint does

The HTML PPT Knowledge Arch Blueprint is a specialized template designed for creating decision-grade product management presentations. This skill serves as a focused entry point into the larger HTML PPT ecosystem, allowing users to quickly access the knowledge architecture blueprint for their decks. It is particularly useful for engineering, site reliability engineering (SRE), and leadership teams that require clear and effective communication of complex information.

To get started, users must first familiarize themselves with the master skill that outlines the authoring rules, including content guidelines, audience considerations, and layout principles. The skill provides a structured approach to building presentations, ensuring that critical elements such as speaker notes and visual identity are maintained throughout the deck. By following the provided instructions, users can create a polished presentation that adheres to best practices in product management communication.

The skill includes two primary methods for integrating necessary assets into the project: copying and rewriting paths or inlining CSS and JavaScript. This flexibility allows users to choose the approach that best fits their development workflow. Additionally, the skill supports theme customization, enabling users to select from a variety of visual styles to match their branding or presentation needs.

Overall, the HTML PPT Knowledge Arch Blueprint is an essential tool for product managers and teams looking to streamline their presentation process and enhance their decision-making capabilities through well-structured visual communication.

When to use it

Use this skill when you need to create a decision-grade presentation for product management or engineering discussions.

When not to use it

This skill may not be suitable for casual presentations or non-technical audiences where a simpler format is sufficient.

What you can build with it

Creating a Product Management Deck

Use this skill to develop a structured presentation that outlines product features, roadmaps, and business cases.

Engineering Incident Retrospectives

Leverage the template to present findings and solutions from engineering incidents in a clear and organized manner.

Leadership Decision-Making Presentations

Craft decision-grade decks for leadership discussions that require precise and impactful communication.

How to install HTML PPT Knowledge Arch Blueprint

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-knowledge-arch-blueprint --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 · 奶油蓝图架构

A focused entry point into the html-ppt master skill that lands the user directly on the knowledge-arch-blueprint 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 knowledge-arch-blueprint (see the upstream full-decks catalog for screenshots and rationale).

How to author the deck

Read the master skill first. All authoring rules live in 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.
Start from the matching template folder: design-templates/html-ppt/templates/full-decks/knowledge-arch-blueprint/ — copy index.html and style.css into the project, keep the .tpl-knowledge-arch-blueprint body class.
Bring the shared runtime with the template. The upstream 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:
- Recipe A — copy + rewrite (preferred): copy 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 <link>/<script> 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 B — inline: read the same four files and replace each <link rel="stylesheet" href="../../../assets/..."> with a <style>...</style> containing the file's contents, and the <script src="../../../assets/runtime.js"> with a <script>...</script> 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.
Pick a theme. Default tokens look fine; if the user wants a different feel, swap in any of the 36 themes from design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> and let T cycle.
Replace demo content, not classes. The .tpl-knowledge-arch-blueprint scoped CSS only recognises the structural classes shipped in the template — keep them.
Speaker notes go inside <aside class="notes"> or <div class="notes"> — 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.

Frequently asked questions about HTML PPT Knowledge Arch Blueprint

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.