New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

HTML PPT Obsidian Gradient

Free

Create visually appealing presentation decks effortlessly.

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 Obsidian Gradient does

The HTML PPT Obsidian Gradient skill serves as a streamlined entry point into creating presentation decks using the obsidian-claude-gradient template. This skill is particularly useful for professionals who need to generate visually consistent and engaging presentations quickly. It provides a structured approach to building decision-grade AI literacy decks aimed at leadership, IT, and security teams, ensuring that the content is not only informative but also visually appealing.

To utilize this skill effectively, users should first familiarize themselves with the master skill located in the html-ppt directory. This includes understanding the content and audience checklist, layout reuse, and other essential authoring rules. The skill guides users through the process of starting from the appropriate template folder and emphasizes the importance of maintaining the correct file structure to avoid broken links in their presentations. Users can choose between two methods to integrate shared assets, ensuring that their presentations function correctly without encountering 404 errors.

Additionally, the skill allows for customization through the selection of themes, offering users the flexibility to tailor the look and feel of their presentations. The structured approach to replacing demo content while preserving the template’s CSS classes ensures that users can maintain the intended design without compromising functionality. This makes it an ideal choice for those looking to create professional-grade presentations with minimal effort.

Overall, the HTML PPT Obsidian Gradient skill is designed for developers and designers who are focused on delivering impactful presentations, particularly in enterprise settings where clarity and professionalism are paramount. By leveraging this skill, users can enhance their workflow, ensuring that their presentation decks are not only visually appealing but also aligned with best practices in design and content delivery.

When to use it

Use this skill when you need to create a presentation deck quickly while maintaining a specific visual theme and structure.

When not to use it

This skill may not be suitable for users looking for extensive customization options beyond the provided templates or for those who prefer a more hands-on approach to presentation design.

What you can build with it

Creating Executive Briefs

Use this skill to generate visually engaging presentation decks for executive meetings, ensuring that your content is both informative and aesthetically pleasing.

Training Sessions

Leverage the skill to create training materials for IT teams, helping them understand AI adoption strategies through well-structured presentations.

Security Presentations

Utilize this skill to prepare detailed presentations on security protocols and risk management, ensuring clarity and professionalism.

How to install HTML PPT Obsidian Gradient

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-obsidian-claude-gradient --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 · GitHub 暗紫渐变

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

How to author the deck

  1. 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.
  2. Start from the matching template folder: design-templates/html-ppt/templates/full-decks/obsidian-claude-gradient/ — copy index.html and style.css into the project, keep the .tpl-obsidian-claude-gradient body class.
  3. 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.
  4. 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.
  5. Replace demo content, not classes. The .tpl-obsidian-claude-gradient scoped CSS only recognises the structural classes shipped in the template — keep them.
  6. 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 Obsidian Gradient

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.