HTML Slides

Reviewed 2026-10-21mediaPrompt / Rule# slides # presentations # html # chartjs # pitch-deck

Skill from the UI UX Pro Max repo for strategic HTML presentations with Chart.js, design tokens, layout patterns and copy formulas.

Security Reviewed

Instruction-only skill with no scripts or credentials; generated decks load Chart.js from a public CDN.

Install HTML Slides in Google Antigravity

Antigravity loads skills from .agents/skills/ in your project or ~/.gemini/config/skills/ for all projects (official docs). Full guide

EasiestOption 1: paste this to your Antigravity agent

Install the "HTML Slides" skill for Google Antigravity.
Follow the steps at https://www.antigravityskills.org/install/html-slides.md (source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/slides).
Before running anything, show me what you will download and whether it includes scripts, and wait for my OK.
Install it into this project (.agents/skills/) unless I say global. When done, check that Antigravity lists it as an installed skill.

The agent reads the install file, shows you what it will download and waits for your OK.

Option 2: install it yourself

1. Clone the source repository
```
git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill /tmp/ui-ux-pro-max-skill
```
Download the repository that contains the skill to a temporary folder.
2. Copy the skill into your workspace
```
mkdir -p .agents/skills && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/slides .agents/skills/ && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design-system .agents/skills/
```
Run this from your project root. Antigravity reads workspace skills from <project>/.agents/skills/<folder>/, so you should end up with .agents/skills/slides/SKILL.md and .agents/skills/design-system/SKILL.md.
3. Or install it globally
```
mkdir -p ~/.gemini/config/skills && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/slides ~/.gemini/config/skills/ && cp -r /tmp/ui-ux-pro-max-skill/.claude/skills/design-system ~/.gemini/config/skills/
```
Use this instead of the workspace copy to have the skill in every project (Antigravity docs: ~/.gemini/config/skills/). For the Antigravity CLI the global folder is ~/.gemini/antigravity-cli/skills/.
4. Check that Antigravity sees it
Antigravity 2.0 app: start a new conversation and ask "What skills do you have?" (the app has no /skills command). Antigravity CLI: run /skills; in a session that was already open, run /skills reload first. slides and design-system are listed.

The repo README documents Antigravity only for the whole set: npm install -g ui-ux-pro-max-cli, then uipro init --ai antigravity (Node.js and Python 3). For this skill alone, copy slides and design-system side by side, because the references call ../design-system/scripts/. Python 3 and Node.js are needed for the helper scripts; no API keys.

Using Claude Code, Cursor or Codex? See other assistants below.

What is HTML Slides?

HTML Slides is the presentation companion skill in the UI UX Pro Max repo: it has the agent write a browser-based slide deck with Chart.js charts, using a chosen deck strategy and layout pattern. It suits founders and marketers who want a pitch or report deck as one HTML file rather than PowerPoint.

How to use HTML Slides?

Ask for a deck in plain words, e.g. a 10-slide investor pitch, or call create <topic> <slide-count> where the agent supports arguments. The agent reads the reference files, picks a strategy and layouts, and writes the HTML deck.

Key features of HTML Slides

✓We counted at 477bcb2: the folder has 6 files (SKILL.md 44 lines plus 5 Markdown references, 19,815 bytes in total) and no scripts; SKILL.md is a router that loads references/create.md, which is 4 lines.
✓We counted: slide-strategies.md lists 15 deck structures (YC Seed 10-12 slides, Series A 12-15, QBR, Board Meeting and others), layout-patterns.md has 14 layout rows, copywriting-formulas.md has 5 core formulas (PAS, AIDA, FAB, Cost of Inaction, Before-After-Bridge).
✓We counted: the references call 2 helper scripts that are not in this folder but in the sibling design-system skill: search-slides.py (6 mentions, as ../design-system/scripts/search-slides.py) and embed-tokens.cjs. The relative path only works if design-system sits next to slides.
✓We counted in html-template.md: the deck loads Chart.js 4.4.1 from cdn.jsdelivr.net, locks a 16:9 container on screens of 769 px and wider, and moves with the arrow keys and space bar; it defaults to Inter and Space Grotesk unless design tokens override them.
✓We counted: the design-system data folder holds 8 slide CSVs with 15 strategies and 25 layouts, so the database is richer than the 14 layouts written in the Markdown.
✓README says: Presentation Slides are listed under the Premium version, yet this folder is in the open MIT repo at this commit.

When to use HTML Slides

1Investor or sales pitch deck in HTML
2Data slides with Chart.js charts
3QBR or all-hands deck from a known structure

Installation & Setup Guide

Agent Rules / Prompt Setup

Follow these steps (taken from the project's own docs) to configure HTML Slides in your development environment.

Step 1: Add the marketplace in Claude Codeclaude

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

Source: repo README, Claude Code install section.

Step 2: Install the pluginclaude

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Installs the whole plugin; plugin.json points at ./.claude/skills/, which contains slides and design-system.

Step 3: Cursor (installs the whole set)cursor

npm install -g ui-ux-pro-max-cli && uipro init --ai cursor

README, Using CLI. Installs UI UX Pro Max and its companion skills, not slides alone.

Usage Example & Verification

Prompt / Request Example

1) Our example: "Create a 10-slide HTML investor pitch for our AI note-taking app with a revenue growth chart."
-> The agent follows the YC Seed structure from slide-strategies.md and writes one HTML file with a Chart.js line chart; it needs internet when opened.

2) Our example: "Make a 6-slide product demo deck for our scheduling tool."
-> Product Demo is a listed strategy (5-8 slides); layouts come from layout-patterns.md.

3) SKILL.md argument hint: [topic] [slide-count], for example "create quarterly business review 12".
-> In agents that pass arguments the first word is the subcommand (create), the rest is the brief; in Antigravity, say it in plain words instead.

(The repo README has no slides example.)

Security Review

Static review

Reviewed Date

2026-10-21

Audited Ref / Commit

477bcb28c9812b385cb51a4605ddf30d7b2266e2

Reviewer

antigravityskills.org (static code review)

Instruction-only skill with no scripts or credentials; generated decks load Chart.js from a public CDN.

Full review: scope, findings, risks

Audit Scope:nextlevelbuilder/ui-ux-pro-max-skill at 477bcb2 (2026-10-03), re-checked on 2026-10-21 against HEAD 56ea9cf (2026-10-15): the slides folder is unchanged (last commit 91c193a, 2026-09-03). Read .claude/skills/slides/SKILL.md and all 5 references in full, grepped them for URLs and script calls, counted the design-system slide CSVs, grepped design-system/scripts for network, subprocess and environment use, diffed against cli/assets/skills/slides. Static review only.

Key Findings:Instruction-only router skill with five reference files. External URLs only in the HTML template (Chart.js CDN, example Pexels URL).

Identified Operational Risks & Permissions:No code risk; generated slides depend on a third-party CDN.

At commit 477bcb2 .claude/skills/slides/ contains SKILL.md and references/ (create.md, html-template.md, layout-patterns.md, copywriting-formulas.md, slide-strategies.md). There are no scripts in this folder. html-template.md includes a script tag for https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js and an example Pexels background URL, so finished decks contact those hosts when opened. The references tell the agent to run search-slides.py and embed-tokens.cjs from the sibling design-system skill; in our grep, its fetch-background.py holds hard-coded Pexels URLs with no download call, generate-slide.py writes a Google Fonts link into decks, slide-token-validator.py uses subprocess, and none reads API keys. No environment secrets are referenced by the slides folder. This is a static review; we did not run it.

Operational Notes & Known Limitations

Known Limitations

•Thin on its own: SKILL.md is a router; token, search and validation scripts live in the design-system skill.
•Decks load Chart.js from a public CDN, so charts need internet access.
•Outputs HTML slides, not PowerPoint or Google Slides files.
•The template defaults to Inter and Space Grotesk fonts unless design tokens override them.

Frequently Asked Questions

Is the Slides skill safe?

In our static review of commit 477bcb2 it is Markdown only, with no scripts or API keys. Finished decks request cdn.jsdelivr.net (Chart.js) and the template has an example Pexels image URL.

How do I install Slides in Antigravity?

The repo README documents uipro init --ai antigravity for the whole set. For this skill, copy .claude/skills/slides and .claude/skills/design-system into .agents/skills/ (or ~/.gemini/config/skills/), then ask "What skills do you have?" (CLI: /skills).

Does it make PowerPoint files?

No. It produces an HTML deck you open in a browser.

Why install design-system with it?

The slide references call scripts that live in design-system (search-slides.py, embed-tokens.cjs). Without it the agent still has the layouts and copy formulas but not the helper scripts.

Supported Platforms

antigravityclaudecursorgemini

View Source on GitHub

Keep exploring this topic

Browse the full Antigravity skills directory for more source-linked skills with install steps and static safety reviews.

More media skills #slides #presentations #html #chartjs Use cases

Related Skills

💻

Design System

@nextlevelbuilder

Design token skill from the UI UX Pro Max repo: three-layer tokens, component specs, Tailwind integration and token-based HTML slides.

Static reviewruns scriptswrites files

design-tokensdesign-system

🎨

UI/UX Pro Max

@nextlevelbuilder

Comprehensive UI/UX design intelligence skill for AI coding assistants. Injects structured design tokens, color theory, typography scales, accessibility guidelines, and component patterns into Claude Code, Cursor, and Windsurf.

Tested in AntigravityStatic reviewinstalls packagesnetwork accesswrites files

mediaui

💻