What is the purpose of this skill?

HTML PPT Tech Sharing is designed to help users create AI literacy presentations specifically for engineering contexts using a structured template.

How do I get started with this skill?

Begin by reading the master skill documentation to understand the authoring rules, then copy the necessary template files to your project.

Can I customize the presentation themes?

Yes, you can choose from 36 different themes available in the assets folder to personalize your presentation's look.

What should I avoid when using this skill?

Make sure not to include presenter-only text on the slides and avoid using upstream asset URLs directly in your project.

Is prior knowledge of HTML and CSS required?

Some familiarity with HTML and CSS is beneficial, as the skill involves editing template files and linking resources.

HTML PPT Tech Sharing

Name: HTML PPT Tech Sharing
Availability: InStock
Author: nexu-io

Free

Create decision-grade AI literacy decks with ease.

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 Tech Sharing does

HTML PPT Tech Sharing is designed for developers and engineers looking to create visually engaging presentations focused on AI literacy. This skill serves as a streamlined entry point into the broader HTML PPT master skill, specifically tailored for tech-sharing presentations. Users can access a full-deck template that provides a cohesive visual identity, making it easier to convey complex engineering concepts effectively.

To get started, users should first familiarize themselves with the master skill, which outlines essential authoring rules and best practices for creating presentations. The skill provides a clear pathway for authors to begin their projects by copying the necessary template files and ensuring proper linkage to shared resources. This attention to detail helps maintain the integrity of the presentations, ensuring that navigation and visual elements function as intended.

The skill emphasizes the importance of maintaining structural classes and offers guidance on incorporating speaker notes without cluttering the slides. Users can also customize their presentations by selecting from a variety of themes, allowing for personalization while adhering to the established design principles. This flexibility is particularly beneficial for teams and organizations aiming to deliver consistent messaging across multiple presentations.

Overall, HTML PPT Tech Sharing is an essential tool for anyone involved in AI literacy initiatives within engineering and development contexts. It streamlines the process of creating professional-grade presentations that are both informative and visually appealing, making it a valuable addition to any developer's toolkit.

When to use it

Use this skill when you need to create a presentation focused on AI literacy for an engineering audience, leveraging a predefined template.

When not to use it

This skill may not be suitable for general-purpose presentations outside the tech-sharing context or for users unfamiliar with HTML and CSS.

What you can build with it

Creating AI Literacy Decks

Use this skill to develop presentations that explain AI concepts to engineering teams, ensuring clarity and engagement.

Standardizing Presentation Formats

Leverage the tech-sharing template to maintain a consistent visual identity across multiple presentations within your organization.

Customizing Themes for Presentations

Select and apply different themes to tailor your presentations to specific audiences or branding requirements.

How to install HTML PPT Tech Sharing

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-tech-sharing --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 · Tech Sharing

A focused entry point into the html-ppt master skill that lands the user directly on the tech-sharing 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 tech-sharing (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/tech-sharing/ — copy index.html and style.css into the project, keep the .tpl-tech-sharing 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-tech-sharing 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 Tech Sharing

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.