html-ppt-graphify-dark-graph

Generates dark-themed HTML slide decks with force-directed graph visuals for developer tool presentations.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating visually distinctive presentation decks for developer tool launches, CLI demos, and knowledge-graph topics usually requires manual HTML/CSS work; this Skill provides a ready-made dark-graph deck template with a complete visual system. ## Core Features & Use Cases - Prebuilt dark-graph deck template: Ships a full 8-slide example deck with deep-night gradient background, floating blur orbs, SVG force-directed graph cover, rainbow gradient titles, and glass-morphism cards. - Shared runtime integration: Instructs how to copy or inline the html-ppt base CSS, animations, and keyboard runtime so slide navigation, presenter mode, and speaker notes work correctly. - Theme swapping: Supports switching among 36 themes from the html-ppt assets via a theme link tag. - Use Case: A developer advocate needs a launch deck for a CLI knowledge-graph tool; they copy the graphify-dark-graph template, wire the runtime assets, and replace demo content while keeping the scoped structural classes. ## Quick Start Ask the AI to build a dev-tool launch presentation using the html-ppt-graphify-dark-graph template with a dark gradient background, force-directed graph cover, and JetBrains Mono command-line highlights.

Frequently Asked Questions about html-ppt-graphify-dark-graph

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

FAQPage Schema
How do I create a dark-themed HTML slide deck for a dev tool launch?

Copy the graphify-dark-graph template's index.html and style.css into your project, keep the tpl-graphify-dark-graph body class, then wire in the shared base.css, animations.css, and runtime.js assets. Replace the demo content while keeping the structural classes the scoped CSS recognizes.

Why is my HTML deck navigation not working after copying the template?

The upstream template links shared CSS and JS via ../../../assets/ paths that only resolve inside the skill tree. Either copy the four asset files 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 graphify dark graph deck?

Yes, the default tokens work as-is, but you can swap in any of the 36 themes from the html-ppt assets/themes directory via a link element with id theme-link, and cycle themes at runtime with the T key.

How do I add speaker notes to an HTML presentation slide?

Place speaker notes inside an aside or div element with the notes class. The runtime hides them from the audience view and shows them in presenter mode; never put presenter-only text as visible slide content.

What content fits the graphify dark graph deck template?

It suits dev-tool and CLI launches, knowledge-graph topics, and data visualization talks. The template includes a cover with an SVG force-directed graph, feature grids, command-line highlight blocks, pipeline diagrams, and a call-to-action slide.