What is the purpose of this skill?

The skill is designed to help users create professional presentation decks specifically for product management and decision-making.

How do I start using the graphify-dark-graph template?

Begin by reading the master skill documentation, then copy the relevant template files and follow the provided instructions for asset integration.

Can I customize the themes in my presentation?

Yes, you can swap in any of the 36 available themes to change the visual style of your presentation.

What are the two methods for integrating assets into my project?

You can either copy and rewrite the asset paths or inline the necessary CSS and JavaScript directly into the HTML file.

Is this skill suitable for general presentations?

No, this skill is specifically tailored for product management and decision-making presentations, not for general-purpose use.

HTML PPT Graphify Dark Graph

Name: HTML PPT Graphify Dark Graph
Availability: InStock
Author: nexu-io

Free

Create decision-grade product management decks with ease.

by nexu-io84.9k stars on nexu-io/open-design

1 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What HTML PPT Graphify Dark Graph does

The HTML PPT Graphify Dark Graph skill is designed for product managers, engineers, designers, and leadership teams who need to create visually appealing and effective presentation decks. This skill serves as a focused entry point to the graphify-dark-graph template within the HTML PPT framework, enabling users to quickly generate a full-deck presentation tailored for business cases and decision-making processes.

To utilize this skill, users are guided through the necessary steps to author their decks, starting with reading the master skill documentation. This ensures that users are familiar with the content and audience checklists, token rules, and layout reuse principles. The skill emphasizes the importance of maintaining the visual identity of the graphify-dark-graph template, which is crucial for creating a cohesive and professional presentation.

The skill provides two primary methods for integrating the required assets into a project: copying and rewriting the asset paths or inlining the CSS and JavaScript directly into the HTML. This flexibility allows users to choose the method that best fits their workflow, ensuring that the presentation is fully functional and visually consistent. Additionally, users can customize their presentations by selecting from a variety of themes, further enhancing the visual appeal of their decks.

Overall, the HTML PPT Graphify Dark Graph skill is an essential tool for anyone involved in product management or decision-making presentations. It streamlines the process of creating professional-grade decks, ensuring that teams can effectively communicate their ideas and strategies.

When to use it

Use this skill when you need to create a visually cohesive and effective presentation deck for product management or business cases.

When not to use it

This skill may not be suitable for users looking for a more general-purpose presentation tool without specific focus on product management.

What you can build with it

Creating a Business Case Presentation

Use this skill to develop a structured and visually appealing presentation for a product business case, ensuring clarity and professionalism.

Team Roadmap Discussions

Leverage the skill to create a roadmap presentation that communicates your team's strategic direction effectively.

Decision-Making Decks for Leadership

Utilize this skill to prepare decision-grade decks that facilitate discussions with leadership on key product decisions.

How to install HTML PPT Graphify Dark Graph

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-graphify-dark-graph --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 graphify-dark-graph 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 graphify-dark-graph (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/graphify-dark-graph/ — copy index.html and style.css into the project, keep the .tpl-graphify-dark-graph 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-graphify-dark-graph 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 Graphify Dark Graph

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.