HTML Presentation Skills for Slides
HTML presentation skills help an AI agent produce a deck that runs in a browser. They cover the whole deliverable: the story and argument before any markup, slides as individual views even when built from DIVs, type and layout that hold up on a projector, live interaction for the speaker, export and share so someone else can open the file or URL later, and access across a browser, a PDF, and a screen reader. Use the ranked list by starting with the sub-topic that matches your immediate bottleneck — story, slides, visuals, interaction, export, or access — then pick the skill whose description addresses that step. An HTML deck is still a presentation, so weigh story and slides before browser tricks.
8 to start with31 top options
Start with these.
An HTML deck is still a presentation: story, slides, visuals — with extra constraints of the browser, not PowerPoint.
These are the closest matches for this work. Start with the first one and open it to install.
- Rank 01View Agent SkillDirect
slides
Creates strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
32,022 · popularity - Rank 02View Agent SkillDirect
lark-slides
Notable飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 lark-doc）、云文档里的独立画板对象（走 lark-whiteboard）、上传或下载普通文件（走 lark-drive）。
748,180 · popularity - Rank 03View Agent SkillDirect
slideshow
Authors HyperFrames slideshows — presentations, pitch decks, and interactive decks with discrete slides, fragment reveals, branching, hotspot navigation, and presenter mode.
299,839 · popularity - Rank 04View Agent SkillDirect
slide-dsl
NotableThe complete slide DSL manual — the canvas and its background, the ten element types field by field with units, defaults and legal values, where each type keeps its words, which field the renderer actually paints when two disagree, exactly what happens to the HTML you put in `content`, and the structure schema that is now the ONLY thing a write is checked against. Nothing filters your markup and nothing normalises your values, so this manual is the whole of what makes a page render correctly. Load it before patching a field you have not patched before, when a patch comes back rejected, when a
- Rank 05View Agent SkillDirect
slide-craft
NotableThe design law of a slide page — canvas geometry, the text height table, the type scale, contrast pairs, spacing rhythm, and which element type carries which content. Load it when patching slide elements one at a time, when a fix is about colour or contrast, when text has to grow or shrink inside a box, when a page feels crowded or empty, or when replacement content needs real rich-text structure. It is the standard `page-clone` and `pro-editing` edit against, not a procedure of its own — those two decide which pages to touch and in what order, this one decides what a good page looks like when
- Rank 06View Agent SkillDirect
theme-factory
OfficialToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
- Rank 07View Agent SkillDirect
answer-me-with-html
NotableTurns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally, without being asked, whenever a page would help the reader more than plain text, even if plain text would also work: any explanation of how something works or how parts relate (flow, request path, architecture, code or folder structure, state machine, lifecycle, history); any comparison, trade-off or decision with pros and cons; any diagnosis, review or investigation, especially with several causes or findings to rank; any answer with a table, a numbered or ranked list, steps, branches or several sections; or when the user says "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". When in doubt, use it: a page is quick and cheap to make. Also for explainer videos ("make a video", "做个视频") and for changing its settings. Skip only for small talk, a trivial one-line answer, or when the user asks for plain text.
- Rank 08View Agent SkillDirect
archify
Creates polished, validated architecture, workflow, sequence, and data-flow diagrams as explorable standalone HTML with inline SVG, themes, and export.
140,157 · popularity
Explore 23 more Agent Skills
- Rank 09View Agent SkillDirect
gws-slides
Google Slides CLI skill for reading and writing presentations via gws, covering create, get, batchUpdate, and page operations.
40,203 · popularity - Rank 10View Agent SkillDirect
recipe-create-presentation
Recipe for creating a new Google Slides presentation and adding initial slides, then sharing it with a team via gws CLI.
31,379 · popularity - Rank 11View Agent SkillPossible
lark-apps
Notable妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659,164 · popularity - Rank 12View Agent SkillPossible
pptx
OfficialUse this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates (.potx), layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx or .potx filename, regardless of what they plan to do with the content afterward. If a .pptx or .potx file needs to be opened, created, or touched, use this skill.
- Rank 13View Agent SkillPossible
frontend-design
OfficialGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
765,703 · popularity - Rank 14View Agent SkillPossible
design
Comprehensive design skill covering brand identity, design tokens, UI styling, logo generation, CIP mockups, HTML presentations with Chart.js, banners, and icons.
33,989 · popularity - Rank 15View Agent SkillPossible
imagegen
OfficialGenerate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG/vector/code-native assets, extending an established icon or logo system, or building the visual directly in HTML/CSS/canvas.
- Rank 16View Agent SkillPossible
canvas-design
OfficialCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
- Rank 17View Agent SkillPossible
brand-guidelines
OfficialApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
- Rank 18View Agent SkillPossible
playwright-interactive
OfficialPersistent browser and Electron interaction through `js_repl` for fast iterative UI debugging.
- Rank 19View Agent SkillPossible
hyperframes-registry
Searches, installs, and wires registry blocks and components (charts, effects, transitions) into HyperFrames HTML compositions.
751,896 · popularity - Rank 20View Agent SkillPossible
hyperframes-creative
Non-animation creative direction for HyperFrames videos covering design specs, palettes, typography, narration, beat planning, and composition patterns.
682,929 · popularity - Rank 21View Agent SkillPossible
media-use
Resolves, generates, and operates on media (BGM, SFX, images, icons, logos, voice, color grades) for HyperFrames projects via a single resolve verb.
746,494 · popularity - Rank 22View Agent SkillPossible
ai-image-generation
Generates AI images with 50+ models (GPT-Image-2, FLUX, Gemini, Seedream) via the inference.sh CLI for art, mockups, and marketing visuals.
696,871 · popularity - Rank 23View Agent SkillPossible
high-end-visual-design
Teaches high-end agency-style web design with specific fonts, spacing, shadows, card structures, and animations, blocking generic AI defaults.
420,662 · popularity - Rank 24View Agent SkillPossible
image-to-code
Image-first website design-to-code skill that generates design images, analyzes them, then implements matching frontend for landing pages and marketing sites.
350,805 · popularity - Rank 25View Agent SkillPossible
impeccable
Frontend interface design skill covering redesign, critique, polish, typography, layout, color, motion, and design systems for web UI.
Needs (stated): Node.js
319,215 · popularity - Rank 26View Agent SkillPossible
brandkit
Generates premium brand-kit images including brand-guidelines boards, logo systems, identity decks, and visual-world presentations.
353,383 · popularity - Rank 27View Agent SkillPossible
copywriting
Writes and improves marketing copy for pages, headlines, CTAs, and value propositions, focused on clarity, benefits, and conversion.
218,410 · popularity - Rank 28View Agent SkillPossible
prototype
Builds multiple genuinely different versions of a described UI piece behind a visual picker for live comparison and promotion of a winner.
133,671 · popularity - Rank 29View Agent SkillPossible
copy-editing
Edits and improves existing marketing copy through seven focused sweeps covering clarity, voice, benefits, and proof.
138,021 · popularity - Rank 30View Agent SkillPossible
vercel-cli-with-tokens
OfficialDeploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".
- Rank 31View Agent SkillPossible
ui-taste
UI design playbooks for building, polishing, and reviewing web and iOS interfaces with anti-slop workflows and optional real-product references.
452,376 · popularity
What this topic covers
Each sub-topic groups Agent Skills for a specific situation.
- Story
- The argument, before markup.
- Slides
- Each view is a slide, even if it is a DIV.
- Visuals
- Type and layout that survive a projector.
- Interaction
- How the speaker moves through the deck live.
- Export & share
- A file or URL someone else can open later.
- Access
- Readable in a browser, a PDF, and a screen reader.
Frequently asked questions
- What kinds of skills are listed under HTML Presentation?
- Skills that help an AI agent build a browser-based deck. They span story, slides, visuals, interaction, export and share, and access.
- How is the list ordered?
- The list is ranked by observed search demand, with direct matches first and a cap on any single publisher.
- Do these skills replace PowerPoint?
- No. An HTML deck is still a presentation with story, slides, and visuals, but it adds the constraints of the browser.
- What should I check before picking one?
- Match the skill to your current step: story, slides, visuals, interaction, export and share, or access. The sub-topics map directly to those stages.
How to install an Agent Skill
Start with the first skill on this page. Claude Code reads a SKILL.md once it is in the skills directory:
- Claude Code — copy the SKILL.md for slides into ~/.claude/skills/slides/ for yourself, or .claude/skills/slides/ to share it with a project.
- From the registry — run npx skills add nextlevelbuilder/ui-ux-pro-max-skill@slides.
- Or download slides from its source and place that SKILL.md in the directory above.
How to choose Check the source and the skill’s own instructions before you install. Official and Notable describe where a skill comes from.