html-ppt-knowledge-arch-blueprint

Generates HTML slide decks with a cream-paper blueprint architecture visual style.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-knowledge-arch-blueprint-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt-knowledge-arch-blueprint
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt-knowledge-arch-blueprint
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-knowledge-arch-blueprint-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating visually consistent architecture and system-design presentations from scratch is slow, and generic slide templates rarely convey an engineering blueprint aesthetic. This Skill produces a complete HTML deck with a cream-paper background, rust-red highlights, blueprint grid, and pipeline step layouts. ## Core Features & Use Cases - Full-deck HTML template: Ships an 8-slide example deck (cover, section divider, comparison, code, SVG diagram, stats, CTA, thanks) built on the html-ppt master skill runtime. - Distinct visual system: Cream paper #F0EAE0 base, single rust-red #B5392A accent, 48px blueprint grid mask, 2px hard-bordered cards, raised pipeline step, and Playfair serif display type with zero gradients or soft shadows. - Speaker notes and keyboard runtime: Supports hidden presenter notes via <aside class="notes">, theme swapping across 36 themes, and print-friendly output. - Use Case: Ask for a system architecture introduction deck, provide your system name, 5-7 core modules, and data flow direction, and receive an 8-10 page blueprint-styled HTML presentation. ## Quick Start Ask the AI to use the html-ppt-knowledge-arch-blueprint template to build an architecture deck, providing your system name, core modules, and data flow direction.

Frequently Asked Questions about html-ppt-knowledge-arch-blueprint

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML slide deck for a system architecture presentation?

Copy the knowledge-arch-blueprint template's index.html and style.css into your project, keep the .tpl-knowledge-arch-blueprint body class, and replace the demo content with your system modules and data flow. The deck supports 8-10 slides with pipeline, diagram, and stats layouts.

What visual style does the knowledge-arch-blueprint template use?

It uses a cream paper background (#F0EAE0), a single rust-red accent (#B5392A), a 48px blueprint grid mask, 2px black-bordered hard cards, and Playfair serif display type. It avoids gradients and soft shadows for a print-friendly engineering look.

Why do the CSS and JS files 404 after copying the template?

The upstream index.html references shared assets via ../../../assets/ paths that only resolve inside the skill tree. Either copy fonts.css, base.css, animations.css, and runtime.js into a project-local assets folder and rewrite the paths, or inline their contents directly into index.html.

Can I change the color theme of the HTML deck?

Yes. The html-ppt master skill ships 36 themes in assets/themes/*.css. Link one via the theme-link element and press T during the presentation to cycle through themes while keeping the template's structural classes intact.

How do speaker notes work in HTML presentations?

Place presenter notes inside <aside class="notes"> or <div class="notes"> elements. The runtime hides them from the audience view and shows them in presenter mode; never put presenter-only text as visible slide content.