What is generate-html-slide?

An HTML-to-image renderer for creating 1080×1920 PNG slide backgrounds from four templates: infographics, comparisons, text slides, and interface mockups. It uses Puppeteer, a tool that runs web pages in a browser.

Use it to turn structured slide data such as titles, items, columns, rows, and statements into PNG backgrounds.

It removes the need to draw these slide layouts by hand or call an AI image service for them.

How aslanzubairaev/reels-factory configures Claude Code

Reuse

Borrowing it

Nothing to install: this file belongs to aslanzubairaev/reels-factory. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/aslanzubairaev/reels-factory/master/.claude/skills/generate-html-slide/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/aslanzubairaev/reels-factory

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/aslanzubairaev/reels-factory/generate-html-slide/github.svg)](https://agentmods.dev/skills/aslanzubairaev/reels-factory/generate-html-slide)

Your own site

<a href="https://agentmods.dev/skills/aslanzubairaev/reels-factory/generate-html-slide"><img src="https://agentmods.dev/badge/skills/aslanzubairaev/reels-factory/generate-html-slide/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/aslanzubairaev/reels-factory/generate-html-slide"><img src="https://agentmods.dev/badge/skills/aslanzubairaev/reels-factory/generate-html-slide.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 40 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 354 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00040	$0.00354
Opus 5	$0.00020	$0.00177
Sonnet 5	$0.00008	$0.00071
Haiku 4.5	$0.00004	$0.00035

Measured 12d ago against content hash 57565426a88f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

generate-html-slide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (generate_slide.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.claude/skills/generate-html-slide/SKILL.md · 34 lines

What it actually says

Generate HTML Slide Skill

Renders an HTML template with slide data into a 1080x1920 PNG image.

Usage

node .claude/skills/generate-html-slide/generate_slide.js --template "infographic" --data '{"title":"...","items":[...]}' --output "path/to/output.png"

Parameters

--template — one of: infographic, comparison, text-slide, mockup
--data — JSON string with slide data
--output — output PNG path

Requirements

puppeteer npm package (installed in project root)

Templates

infographic — large numbers, icons, progress bars. Required data: title, items[] (each: icon, value, label, optional progress)
comparison — left vs right columns. Required data: left_title, right_title, left_items[], right_items[]
text-slide — one big statement. Required data: text, optional subtitle, font_size
mockup — dashboard/interface mockup. Required data: title, columns[], rows[]

Notes

Output is always 1080x1920 PNG (W-015)
Templates support Cyrillic via Google Fonts (W-016)
Do NOT call AI APIs for html_slide (W-017)

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

generate_slide.js 2.7 KB runs code

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

12d ago First seen · 34 lines · 40 tokens per session scan A 57565426a88f

Subscribe to this mod's changes

generate-html-slide is a skill published in the GitHub repository aslanzubairaev/reels-factory (2 stars, last pushed 4mo ago), licensed MIT. It adds 40 tokens to every session and 354 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Claude Code Creative and media ai-content content-automation electron ffmpeg gemini-api

openscreen-design

Use this skill to generate well-branded interfaces and assets for OpenScreen (an AI-native screen-recording studio & video editor), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

getopenscreen/openscreen · 62 tokens

chronicle

Analyze Copilot session history for standup reports, usage tips, session search, and session reindexing. Use when the user asks for a standup, daily summary, usage tips, workflow recommendations, wants to search or find past sessions by keyword/file/PR, wants to reindex their session store, or asks about deleting…

microsoft/vscode · 72 tokens

generate-run-commands

Generate or modify run commands for the current session. Use when the user wants to set up or update run commands that appear in the session's Run button.

microsoft/vscode · 36 tokens

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a website. Not a product promo (/product-launch-video) or a no-PR…

heygen-com/hyperframes · 104 tokens

general-video

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…

heygen-com/hyperframes · 92 tokens

motion-graphics

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…

heygen-com/hyperframes · 139 tokens

reels-factory: Skill for Claude Code