Web Slides
把素材 / 提纲 / 要点做成点击驱动的 16:9 HTML 幻灯片(slides / 演示文稿),用于现场放映或投屏 —— 不是视频,没有口播稿 / 音频合成 / 录屏。流程:原始素材 → 产出 outline 开发计划(章节切分 + 每步屏幕内容 + 可选每步演讲备注 + 信息池)→ 用户**一次对齐** 4 件事(outline / 主题 / 素材 / 开发模式)→ 网页开发(逐章 / 顺序 / 并行)。每次点击推进一个逻辑节拍,每一步独占整屏;进度条平时隐藏只在悬浮时出现;**按 P 开独立的演讲者窗口(口播稿 + 实时预览 + 计时器,与主窗口联动;投屏只共享主 slide 窗口即可对观众隐藏口播稿),按 N 是排练用的备注浮层**。内置 24 套主题 token + 反 AI 味设计方法论(内容驱动动画、逐步揭示、电影感留白)。适用场景:技术分享 / keynote / 产品演示 / pitch deck / 教学课件 / **面试项目复盘(project retro)** / 把文章或笔记变成可交互讲解。本 Skill 沉淀的是设计方法论 + 协作流程,不绑定任何特定样式 / 字体 / 颜色,可复用到任意主题与美学。
Security AStatic scan found no risk patternsHow grading works ›
From the source SKILL.md
把一堆素材 / 提纲 / 要点,一步步做成可现场放映的「电影感 HTML 幻灯片」。 产出物 = Vite + React + TS 项目,点击 / 方向键推进,每一步独占整屏,按 P 开独立的演讲者窗口看口播稿(实时预览 + 计时器,两窗联动;投屏只共享主 slide 窗口即可对观众隐藏),按 N 是排练用的备注浮层。
What this skill does
Web Slides is a community-contributed Claude Code skill in the general-misc sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/web-slides/ and loads when your prompt matches the skill's trigger.
Who uses this skill
The Web Slides Claude Code skill is built for Claude Code users and developers across all disciplines looking for general-purpose AI assistance. It's part of ClaudSkills (also referred to as Claude Skills or Claude Code Skills) — the open community-curated registry of 196,000+ SKILL.md files for Anthropic's Claude Code agent and the wider Claude ecosystem (Claude API, Claude Agent SDK).
How to install
Free
Manual install (2 steps)
mkdir -p ~/.claude/skills/web-slides
curl -L https://claudskills.com/skills/web-slides/SKILL.md \
-o ~/.claude/skills/web-slides/SKILL.md
Or just download SKILL.md directly and drop it into ~/.claude/skills/web-slides/. Claude Code auto-discovers it on next session.
Skills live at ~/.claude/skills/web-slides/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\web-slides\SKILL.md on Windows. See the full install guide for step-by-step instructions.
Telegram
📱 Install from your phone or desktop Telegram
Open @claudskills_bot on Telegram, tap Open Desktop App, and the desktop app installs this skill for you. Or share the bot link with a colleague — they get the same one-tap install. Learn more →
Pro
One-click install via the desktop app
The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.
Pro
For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.
Frequently asked questions
How do I install the Web Slides Claude Code skill?
Install via the ClaudSkills desktop app (one click) or copy
SKILL.md from the source repository to
~/.claude/skills/web-slides/SKILL.md and restart Claude Code. Both flows are detailed at
claudskills.com/install/.
What does the Web Slides skill do?
把素材 / 提纲 / 要点做成点击驱动的 16:9 HTML 幻灯片(slides / 演示文稿),用于现场放映或投屏 —— 不是视频,没有口播稿 / 音频合成 / 录屏。流程:原始素材 → 产出 outline 开发计划(章节切分 + 每步屏幕内容 + 可选每步演讲备注 + 信息池)→ 用户**一次对齐** 4 件事(outline / 主题 / 素材 / 开发模式)→ 网页开发(逐章 / 顺序 / 并行)。每次点击推进一个逻辑节拍,每一步独占整屏;进度条平时隐藏只在悬浮时出现;**按 P 开独立的演讲者窗口(口播稿 + 实时预览 + 计时器,与主窗口联动;投屏只共享主 slide 窗口即可对观众隐藏口播稿),按 N 是排练用的备注浮层**。内置 24 套主题 token + 反 AI 味设计方法论(内容驱动动画、逐步揭示、电影感留白)。适用场景:技术分享 / keynote / 产品演示 / pitch deck / 教学课件 / **面试项目复盘(project retro)** / 把文章或笔记变成可交互讲解。本 Skill 沉淀的是设计方法论 + 协作流程,不绑定任何特定样式 / 字体 / 颜色,可复用到任意主题与美学。
Is this skill free to install?
Yes. ClaudSkills is an open registry — every skill keeps its source repository's license, and manual install via copy is free. ClaudSkills Pro ($9/mo, $79/yr, or $149 one-time) adds one-click install via the desktop app and a multi-signal Quality Score.
When should I use the Web Slides skill?
Use Web Slides when your Claude Code task falls under the General category — specifically in the general misc area. Claude Code auto-discovers installed skills and invokes the right one based on the task description, so you can also ask Claude directly (e.g. "use Web Slides" or describe the task and let Claude pick). Browse related skills at
/category/general/.
What is a Claude Code skill and how does the Web Slides skill fit in?
A Claude Code skill is a
SKILL.md file that lives under
~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. Web Slides is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the General category. Learn more at
/learn/what-is-a-claude-skill/.
Attribution & license
Cite this skill
If you reference this skill in a blog post, paper, or documentation, you can cite it as:
APA
olddonkey. (2026). Web Slides [Claude Code skill]. ClaudSkills. https://claudskills.com/skills/web-slides/
BibTeX
@misc{web-slides-2026,
author = {olddonkey},
title = {Web Slides [Claude Code skill]},
year = {2026},
publisher = {ClaudSkills},
url = {https://claudskills.com/skills/web-slides/}
}
Embed this skill
Promote, attribute, or link this skill from your own README, blog post, or documentation. All three snippets are free to use — no sign-up, no API key. More distribution surfaces →
Badge
[](https://claudskills.com/skills/web-slides/?utm_source=badge&utm_medium=readme&utm_campaign=skill_badge)
<script>
<script src="https://claudskills.com/embed/web-slides.js" async></script>
<iframe>
<iframe src="https://claudskills.com/embed/web-slides.html" width="100%" height="160" frameborder="0" loading="lazy" title="ClaudSkills: Web Slides"></iframe>
Security scan
Grade A · scanned 2026-09-28 — free static scan against the OWASP Agentic Skills Top 10.
No risk patterns were found in any of the ten OWASP-aligned categories. How grading works ›
- ✓ Prompt injection
- ✓ Data exfiltration
- ✓ Supply chain
- ✓ Reverse shell
- ✓ Credentials
- ✓ Execution
- ✓ Filesystem
- ✓ Persistence
- ✓ Obfuscation
- ✓ Network
Show this grade on your repo (click to copy):
[](https://claudskills.com/skills/web-slides/#security)
More General skills
Browse all General skills in the ClaudSkills registry, or explore these other picks from the same category:
Part of Acreator Store — Adam Lankamer's AI tools:
PerfectStudio ·
Ucaption ·
UTagger ·
AutoXPoster ·
TestYourSkills ·
AutomationFlows ·
Au Naturel ·
Telegram @acreatorstore