html-slides by claude-office-skills/skills
npx skills add https://github.com/claude-office-skills/skills --skill html-slides此技能支持使用 reveal.js(网络上最流行的演示文稿框架)创建精美的基于 HTML 的演示文稿。创建具有动画、代码高亮、演讲者备注等功能的交互式、响应式幻灯片。
示例提示:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script>Reveal.initialize();</script>
</body>
</html>
<!-- 水平幻灯片 -->
<section>Slide 1</section>
<section>Slide 2</section>
<!-- 垂直幻灯片(嵌套) -->
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
<!-- Markdown 幻灯片 -->
<section data-markdown>
<textarea data-template>
## Slide Title
- Point 1
- Point 2
</textarea>
</section>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
内置主题:black, white, league, beige, sky, night, serif, simple, solarized, blood, moon
<link rel="stylesheet" href="reveal.js/dist/theme/moon.css">
Reveal.initialize({
transition: 'slide', // none, fade, slide, convex, concave, zoom
transitionSpeed: 'default', // default, fast, slow
backgroundTransition: 'fade'
});
<section>
<p class="fragment">首先出现</p>
<p class="fragment fade-in">然后这个</p>
<p class="fragment fade-up">然后这个</p>
<p class="fragment highlight-red">高亮</p>
</section>
片段样式:fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green, strike
<section>
<pre><code data-trim data-line-numbers="1|3-4">
def hello():
print("Hello")
print("World")
return True
</code></pre>
</section>
<section>
<h2>Slide Title</h2>
<p>Content</p>
<aside class="notes">
Speaker notes go here. Press 'S' to view.
</aside>
</section>
<!-- 颜色背景 -->
<section data-background-color="#4d7e65">
<!-- 图像背景 -->
<section data-background-image="image.jpg" data-background-size="cover">
<!-- 视频背景 -->
<section data-background-video="video.mp4">
<!-- 渐变背景 -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
Reveal.initialize({
// 显示控件
controls: true,
controlsTutorial: true,
progress: true,
slideNumber: true,
// 行为
hash: true,
respondToHashChanges: true,
history: true,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
// 计时
autoSlide: 0, // 0 = disabled
autoSlideStoppable: true,
// 外观
width: 960,
height: 700,
margin: 0.04,
minScale: 0.2,
maxScale: 2.0,
// 插件
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>API Design Best Practices</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">
<h1>API Design</h1>
<h3>Best Practices for 2024</h3>
<p><small>Engineering Team</small></p>
</section>
<section>
<h2>Agenda</h2>
<ol>
<li class="fragment">RESTful Principles</li>
<li class="fragment">Authentication</li>
<li class="fragment">Error Handling</li>
<li class="fragment">Documentation</li>
</ol>
</section>
<section>
<section>
<h2>RESTful Principles</h2>
</section>
<section>
<h3>Resource Naming</h3>
<pre><code data-trim class="language-http">
GET /users # Collection
GET /users/123 # Single resource
POST /users # Create
PUT /users/123 # Update
DELETE /users/123 # Delete
</code></pre>
</section>
</section>
<section>
<h2>Questions?</h2>
<p>api-team@company.com</p>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [RevealHighlight]
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Product Launch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">
<style>
.reveal h1 { color: #2d3748; }
.metric { font-size: 3em; color: #3182ce; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="#f7fafc">
<h1>Introducing</h1>
<h2 style="color: #3182ce;">ProductX 2.0</h2>
</section>
<section>
<h2>The Problem</h2>
<p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>
</section>
<section data-auto-animate>
<h2>Our Solution</h2>
<div data-id="box" style="background: #3182ce; padding: 20px;">
AI-Powered Automation
</div>
</section>
<section data-auto-animate>
<h2>Our Solution</h2>
<div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">
<p>AI-Powered Automation</p>
<p>90% faster</p>
</div>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script>Reveal.initialize();</script>
</body>
</html>
每周安装量
80
仓库
GitHub 星标数
7
首次出现
3 天前
安全审计
安装于
claude-code69
gemini-cli26
github-copilot26
codex26
kimi-cli26
amp26
This skill enables creation of stunning HTML-based presentations using reveal.js - the web's most popular presentation framework. Create interactive, responsive slides with animations, code highlighting, speaker notes, and more.
Example prompts:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script>Reveal.initialize();</script>
</body>
</html>
<!-- Horizontal slides -->
<section>Slide 1</section>
<section>Slide 2</section>
<!-- Vertical slides (nested) -->
<section>
<section>Vertical 1</section>
<section>Vertical 2</section>
</section>
<!-- Markdown slides -->
<section data-markdown>
<textarea data-template>
## Slide Title
- Point 1
- Point 2
</textarea>
</section>
Built-in themes: black, white, league, beige, sky, night, serif, simple, solarized, blood, moon
<link rel="stylesheet" href="reveal.js/dist/theme/moon.css">
Reveal.initialize({
transition: 'slide', // none, fade, slide, convex, concave, zoom
transitionSpeed: 'default', // default, fast, slow
backgroundTransition: 'fade'
});
<section>
<p class="fragment">Appears first</p>
<p class="fragment fade-in">Then this</p>
<p class="fragment fade-up">Then this</p>
<p class="fragment highlight-red">Highlight</p>
</section>
Fragment styles: fade-in, fade-out, fade-up, fade-down, fade-left, fade-right, highlight-red, highlight-blue, highlight-green, strike
<section>
<pre><code data-trim data-line-numbers="1|3-4">
def hello():
print("Hello")
print("World")
return True
</code></pre>
</section>
<section>
<h2>Slide Title</h2>
<p>Content</p>
<aside class="notes">
Speaker notes go here. Press 'S' to view.
</aside>
</section>
<!-- Color background -->
<section data-background-color="#4d7e65">
<!-- Image background -->
<section data-background-image="image.jpg" data-background-size="cover">
<!-- Video background -->
<section data-background-video="video.mp4">
<!-- Gradient background -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
Reveal.initialize({
// Display controls
controls: true,
controlsTutorial: true,
progress: true,
slideNumber: true,
// Behavior
hash: true,
respondToHashChanges: true,
history: true,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
// Timing
autoSlide: 0, // 0 = disabled
autoSlideStoppable: true,
// Appearance
width: 960,
height: 700,
margin: 0.04,
minScale: 0.2,
maxScale: 2.0,
// Plugins
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>API Design Best Practices</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/night.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-gradient="linear-gradient(to bottom right, #1a1a2e, #16213e)">
<h1>API Design</h1>
<h3>Best Practices for 2024</h3>
<p><small>Engineering Team</small></p>
</section>
<section>
<h2>Agenda</h2>
<ol>
<li class="fragment">RESTful Principles</li>
<li class="fragment">Authentication</li>
<li class="fragment">Error Handling</li>
<li class="fragment">Documentation</li>
</ol>
</section>
<section>
<section>
<h2>RESTful Principles</h2>
</section>
<section>
<h3>Resource Naming</h3>
<pre><code data-trim class="language-http">
GET /users # Collection
GET /users/123 # Single resource
POST /users # Create
PUT /users/123 # Update
DELETE /users/123 # Delete
</code></pre>
</section>
</section>
<section>
<h2>Questions?</h2>
<p>api-team@company.com</p>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
hash: true,
plugins: [RevealHighlight]
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Product Launch</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css">
<style>
.reveal h1 { color: #2d3748; }
.metric { font-size: 3em; color: #3182ce; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="#f7fafc">
<h1>Introducing</h1>
<h2 style="color: #3182ce;">ProductX 2.0</h2>
</section>
<section>
<h2>The Problem</h2>
<p class="fragment">Teams waste <span class="metric">20%</span> of time on manual tasks</p>
</section>
<section data-auto-animate>
<h2>Our Solution</h2>
<div data-id="box" style="background: #3182ce; padding: 20px;">
AI-Powered Automation
</div>
</section>
<section data-auto-animate>
<h2>Our Solution</h2>
<div data-id="box" style="background: #38a169; padding: 40px; width: 400px;">
<p>AI-Powered Automation</p>
<p>90% faster</p>
</div>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script>
<script>Reveal.initialize();</script>
</body>
</html>
Weekly Installs
80
Repository
GitHub Stars
7
First Seen
3 days ago
Security Audits
Gen Agent Trust HubPassSocketFailSnykPass
Installed on
claude-code69
gemini-cli26
github-copilot26
codex26
kimi-cli26
amp26
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
105,000 周安装