presentation-generator by glebis/claude-skills
npx skills add https://github.com/glebis/claude-skills --skill presentation-generator使用 Agency 品牌色彩,以新粗野主义风格创建令人惊叹的演示文稿。生成具有平滑滚动导航的交互式 HTML 演示文稿,将单个幻灯片导出为 PNG,或创建 PDF 文档。
输出格式:
node scripts/generate-presentation.js --input content.json --output presentation.html
node scripts/export-slides.js presentation.html --format png --output ./slides/
node scripts/export-slides.js presentation.html --format pdf --output presentation.pdf
此技能引用 brand-agency 以保持一致的样式:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 颜色 | Hex | 用途 |
|---|---|---|
| 主色 (橙色) | #e85d04 | 标题幻灯片、行动号召、强调色 |
| 辅助色 (黄色) | #ffd60a | 高亮显示、强调幻灯片 |
| 强调色 (蓝色) | #3a86ff | 信息幻灯片、链接 |
| 成功色 (绿色) | #38b000 | 积极内容 |
| 错误色 (红色) | #d62828 | 警告、强调 |
| 前景色 | #000000 | 文本、边框 |
| 背景色 | #ffffff | 浅色幻灯片 |
--title)全屏标题带副标题,彩色背景 (主色/辅助色/强调色/深色)。
--content)标题 + 正文 + 可选的要点列表。
--two-col)用于比较、文本+图像、前后对比的分割布局。
--code)深色背景,带标题的语法高亮代码块。
--stats)带标签的大数字 (例如:"14 个模板 | 4 种格式 | 1 项技能")。
--grid)带数字、标题、描述的卡片网格。
--ascii)使用 ASCII 制表符进行装饰的幻灯片。
--image)全出血或包含的图像,带可选标题。
使用 ASCII 制表符实现科技美学:
Frames: ┌─────┐ ╔═════╗ ┏━━━━━┓
│ │ ║ ║ ┃ ┃
└─────┘ ╚═════╝ ┗━━━━━┛
Lines: ─ │ ═ ║ ━ ┃ ━━━ ───
Arrows: → ← ↑ ↓ ▶ ◀ ▲ ▼
Shapes: ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇
Blocks: █ ▓ ▒ ░
{
"title": "Presentation Title",
"footer": "Company / Date",
"slides": [
{
"type": "title",
"bg": "primary",
"title": "Main Title",
"subtitle": "Subtitle text"
},
{
"type": "content",
"title": "Section Title",
"body": "Introduction paragraph",
"bullets": ["Point 1", "Point 2", "Point 3"]
},
{
"type": "code",
"title": "Code Example",
"language": "javascript",
"code": "const x = 42;"
},
{
"type": "stats",
"items": [
{"value": "14", "label": "templates"},
{"value": "4", "label": "formats"},
{"value": "∞", "label": "possibilities"}
]
}
]
}
title: Presentation Title
footer: Company / Date
slides:
- type: title
bg: primary
title: Main Title
subtitle: Subtitle text
- type: content
title: Section Title
body: Introduction paragraph
bullets:
- Point 1
- Point 2
生成的 HTML 包含:
# Generate from today's session
node scripts/generate-presentation.js \
--title "Claude Code Lab — Day Summary" \
--footer "29.11.2025" \
--slides slides-content.json \
--output workshop-summary.html
# Convert markdown outline to presentation
node scripts/md-to-slides.js notes.md --output presentation.html
# Export all slides as PNGs
node scripts/export-slides.js presentation.html --format png --output ./export/
# Result: slide-01.png, slide-02.png, etc.
presentation-generator/
├── SKILL.md # This file
├── templates/
│ ├── base.html # Base HTML template
│ ├── slides/ # Slide type partials
│ │ ├── title.html
│ │ ├── content.html
│ │ ├── code.html
│ │ ├── stats.html
│ │ ├── two-col.html
│ │ ├── grid.html
│ │ └── ascii.html
│ └── styles.css # Neobrutalism styles
├── scripts/
│ ├── generate-presentation.js # Main generator
│ ├── export-slides.js # PNG/PDF export
│ └── md-to-slides.js # Markdown converter
└── output/ # Generated files
npm install playwright)每周安装次数
76
代码仓库
GitHub 星标数
61
首次出现
2026年1月24日
安全审计
安装于
opencode62
gemini-cli59
cursor59
codex57
github-copilot56
claude-code53
Create stunning presentations in neobrutalism style with Agency brand colors. Generate interactive HTML presentations with smooth scrolling navigation, export individual slides as PNG, or create PDF documents.
Output formats:
node scripts/generate-presentation.js --input content.json --output presentation.html
node scripts/export-slides.js presentation.html --format png --output ./slides/
node scripts/export-slides.js presentation.html --format pdf --output presentation.pdf
This skill references brand-agency for consistent styling:
| Color | Hex | Usage |
|---|---|---|
| Primary (Orange) | #e85d04 | Title slides, CTAs, accents |
| Secondary (Yellow) | #ffd60a | Highlights, accent slides |
| Accent (Blue) | #3a86ff | Info slides, links |
| Success (Green) | #38b000 | Positive content |
| Error (Red) | #d62828 | Warnings, emphasis |
--title)Full-screen title with subtitle, colored background (primary/secondary/accent/dark).
--content)Heading + body text + optional bullet list.
--two-col)Split layout for comparisons, text + image, before/after.
--code)Dark background, syntax-highlighted code block with title.
--stats)Big numbers with labels (e.g., "14 templates | 4 formats | 1 skill").
--grid)Grid of cards with numbers, titles, descriptions.
--ascii)Decorative slide with ASCII box-drawing characters.
--image)Full-bleed or contained image with optional caption.
Use ASCII box-drawing characters for tech aesthetic:
Frames: ┌─────┐ ╔═════╗ ┏━━━━━┓
│ │ ║ ║ ┃ ┃
└─────┘ ╚═════╝ ┗━━━━━┛
Lines: ─ │ ═ ║ ━ ┃ ━━━ ───
Arrows: → ← ↑ ↓ ▶ ◀ ▲ ▼
Shapes: ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇
Blocks: █ ▓ ▒ ░
{
"title": "Presentation Title",
"footer": "Company / Date",
"slides": [
{
"type": "title",
"bg": "primary",
"title": "Main Title",
"subtitle": "Subtitle text"
},
{
"type": "content",
"title": "Section Title",
"body": "Introduction paragraph",
"bullets": ["Point 1", "Point 2", "Point 3"]
},
{
"type": "code",
"title": "Code Example",
"language": "javascript",
"code": "const x = 42;"
},
{
"type": "stats",
"items": [
{"value": "14", "label": "templates"},
{"value": "4", "label": "formats"},
{"value": "∞", "label": "possibilities"}
]
}
]
}
title: Presentation Title
footer: Company / Date
slides:
- type: title
bg: primary
title: Main Title
subtitle: Subtitle text
- type: content
title: Section Title
body: Introduction paragraph
bullets:
- Point 1
- Point 2
Generated HTML includes:
# Generate from today's session
node scripts/generate-presentation.js \
--title "Claude Code Lab — Day Summary" \
--footer "29.11.2025" \
--slides slides-content.json \
--output workshop-summary.html
# Convert markdown outline to presentation
node scripts/md-to-slides.js notes.md --output presentation.html
# Export all slides as PNGs
node scripts/export-slides.js presentation.html --format png --output ./export/
# Result: slide-01.png, slide-02.png, etc.
presentation-generator/
├── SKILL.md # This file
├── templates/
│ ├── base.html # Base HTML template
│ ├── slides/ # Slide type partials
│ │ ├── title.html
│ │ ├── content.html
│ │ ├── code.html
│ │ ├── stats.html
│ │ ├── two-col.html
│ │ ├── grid.html
│ │ └── ascii.html
│ └── styles.css # Neobrutalism styles
├── scripts/
│ ├── generate-presentation.js # Main generator
│ ├── export-slides.js # PNG/PDF export
│ └── md-to-slides.js # Markdown converter
└── output/ # Generated files
npm install playwright)Weekly Installs
76
Repository
GitHub Stars
61
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode62
gemini-cli59
cursor59
codex57
github-copilot56
claude-code53
shadcn/ui 框架:React 组件库与 UI 设计系统,Tailwind CSS 最佳实践
69,400 周安装
通过Rube MCP实现Make自动化:集成Composio工具包管理场景与操作
72 周安装
Microsoft Teams自动化指南:通过Rube MCP实现频道消息、聊天与会议管理
72 周安装
Electrobun 最佳实践:TypeScript + Bun 跨平台桌面应用开发指南
72 周安装
ATXP Memory:AI代理记忆管理工具 - 云端备份与本地向量搜索
72 周安装
Brave Search Spellcheck API:智能拼写检查与查询纠正,提升搜索准确性
72 周安装
Amazon竞品分析器 - 自动化抓取ASIN数据,深度分析竞争对手定价、规格与评论
72 周安装
| Foreground | #000000 | Text, borders |
| Background | #ffffff | Light slides |