Guide · Agent skill
How to use the HTML Tech Talk Deck agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The html-ppt-tech-sharing skill is a set of written instructions that tells an AI agent how to turn a request for an engineering tech talk into a slide deck made of plain HTML and CSS, styled with the tech-sharing template. This guide explains what the skill does, how to install it, how to ask for a deck in natural language, and what you need in place before it works. By the end you will be able to produce a deck you can open in a browser and edit by hand.
HTML Tech Talk Decknexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
- 2Confirm the parent skill. Make sure the html-ppt parent skill and its assets folder at design-templates/html-ppt/ are available, since this card does not include them.
- 3Make a request. Ask the agent in plain language for an HTML slide deck for your engineering talk, and supply your audience, takeaway, and source material.
- 4Copy the template files. Have the agent copy index.html and style.css from the tech-sharing template folder into your project, keeping the tpl-tech-sharing body class.
- 5Fix the asset links. Apply Recipe A or Recipe B so the shared CSS and JavaScript load from inside the project instead of the ../../../assets/ paths.
- 6Edit and review in a browser. Open the HTML file in a web browser, replace the demo content, move presenter-only text into notes, and check every fact yourself.
What the skill makes the agent do
Once installed, the agent can take a request for an engineering tech talk and produce a browser-viewable HTML slide deck using the 'tech-sharing' template. The skill guides the agent to copy the template's HTML and CSS into your project, fix the asset links so the slides actually load, choose a theme, and keep speaker notes out of the visible slides.
The skill itself is only written instructions. It points to a larger master skill, html-ppt, for the detailed authoring rules, and it does not include the full template files.
- Produces an HTML deck you can open in a web browser and edit as plain HTML and CSS.
- Uses the tech-sharing template's visual look.
- Puts speaker notes in an aside or div with the class notes, not on the slide face.
- Lets you swap in any of the 36 theme CSS files from the html-ppt assets folder.
Install the skill
Download the ZIP from the skill's page on this site and unzip it. Then place the folder in one of two locations: your personal skills folder at ~/.claude/skills/, or a project-specific .claude/skills/ folder inside the project you are working in. Use the personal folder if you want the skill available everywhere, and the project folder if you want it limited to one project.
If you use the Claude apps instead of files, you can upload the skill under Settings → Capabilities → Skills.
- Option 1: unzip into ~/.claude/skills/ for all projects.
- Option 2: unzip into a project's .claude/skills/ folder for that project only.
- Option 3: upload the skill in the Claude apps under Settings → Capabilities → Skills.
Install the parent html-ppt skill and its assets
This skill depends on the parent html-ppt skill. Its assets live in design-templates/html-ppt/, including the template folder, shared CSS and JavaScript, the themes, and the LICENSE file. This card references those files but does not include them, so the deck will not work until they are available.
The parent skill is MIT-licensed and comes from the upstream lewislulu/html-ppt-skill project. Keep its LICENSE file in place if you redistribute the work.
- Required: design-templates/html-ppt/ with its assets folder.
- Required: the template at design-templates/html-ppt/templates/full-decks/tech-sharing/.
- Keep design-templates/html-ppt/LICENSE in place when redistributing.
Ask for a deck with a natural request
You do not need a special command. Describe the talk in plain language and mention HTML slides or the tech-sharing look. The skill's own example prompt asks the agent to first request missing essentials before drafting: audience, decision target, source-of-truth materials, deadline, and any numbers that must stay in the deck.
Give the agent your real notes and sources. The skill sets up the layout, but it does not supply accurate technical content, so the presenter must verify every fact.
- Good trigger phrases from the skill's metadata include 'html deck', 'html slides', 'ai literacy', and 'copilot'.
- Example request: Make an HTML slide deck for an engineering tech talk on how the agent stream, sandbox, and artifacts work, for engineers in our dev community.
- Include your audience, the decision or takeaway you want, and any source material.
Fix the asset links so the slides load
The template's index.html loads shared files with paths like ../../../assets/..., which only work inside the original folder tree. Once you copy the file into a project, those links break, the deck does not activate, and slide navigation stops working. The skill describes two recipes. Pick one per project.
Recipe A (preferred) copies fonts.css, base.css, animations/animations.css, and runtime.js into a project-local assets/ folder, then rewrites the four link and script tags to point there. Recipe B inlines the contents of those four files into index.html, producing one self-contained file. Either way, do not ship the ../../../assets/ paths in a project file.
- Recipe A: copy the four shared files into assets/ and rewrite the tags.
- Recipe B: replace the link and script tags with style and script blocks holding the file contents.
- Keep the tpl-tech-sharing body class and the structural classes in the template.
Choose a theme and edit the content
The default tokens are fine for many decks. If you want a different feel, the skill tells the agent to link one of the theme CSS files from design-templates/html-ppt/assets/themes/ using the theme-link element. The runtime lets you cycle themes with the T key.
When editing, replace the demo text but keep the class names. The tpl-tech-sharing scoped CSS only recognises the structural classes shipped with the template.
- Theme files: design-templates/html-ppt/assets/themes/*.css, 36 in total.
- Keep the structural classes; replace only the demo content.
- Put speaker notes inside an aside or div with the class notes.
<aside class="notes">Speaker-only notes go here.</aside>What people use it for
- An engineer preparing an internal talk on how a tool's internals work, delivered from a browser.
- A developer community speaker who wants slides stored as plain HTML and CSS under version control.
- A presenter who already uses html-ppt and wants the specific tech-sharing look for a new deck.
- A team that wants a starting layout they can then edit by hand.
Frequently asked questions
Is the HTML Tech Talk Deck skill free to use?
The skill is licensed under Apache-2.0 according to this listing. The parent html-ppt skill it depends on is MIT-licensed, and its LICENSE file should stay in place if you redistribute the work.
What do I need before the skill works?
You need the parent html-ppt skill and its assets folder at design-templates/html-ppt/, a web browser to view the output, and an agent that can read and write files in your project folder. The skill runs no scripts and uses no network access, according to this listing.
Where do I install the skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder for one project. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.
Why do my slides show up unstyled or not respond to navigation?
The template's index.html uses relative asset paths like ../../../assets/... that break when the file is copied into a project. Follow Recipe A to copy the shared files and rewrite the links, or Recipe B to inline them.
Can I get PowerPoint or Google Slides files from this?
No. The output is HTML rather than an office document, so you cannot get a .pptx or Google Slides file from this skill.
Does the skill check my technical content for accuracy?
No. The skill sets up the layout and visual style only. The presenter must verify every technical fact, since the example prompt is about OpenDesign internals and the skill does not supply accurate content.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits engineers who want a ready-made HTML slide look for an internal or community talk and are comfortable editing plain HTML and CSS. It is a poor fit if you need PowerPoint or Google Slides files, or if you expect it to supply accurate technical content. Only use it if you can also install the parent html-ppt skill and its assets.
Download the skill