
presentation
by oneqmethod
SKILL.md
name: presentation description: This skill should be used when the user asks to "create a presentation", "generate slides", "make a presentation", "turn into slides", "presentation from this document", "slides from PRD", "slides from transcript", or wants to convert any document into an HTML slide presentation. version: 1.0.0
Presentation Generator
Generate dark-themed HTML presentations from any document type.
When to Use
Invoke when the user provides document content and requests a presentation, slides, or visual summary.
Process
- Receive content from the user (PRD, transcript, notes, article, etc.)
- Accept optional theme parameter to override auto-selection
- Detect document type to apply appropriate extraction rules
- Detect language for RTL (Hebrew, Arabic) or LTR layout
- Extract structure - identify chapters/sections for navigation
- Extract key content per section - prioritize numbers, stats, key phrases
- Select theme color based on topic (or use override)
- Generate HTML using the template from
assets/template.html - Save file to working directory as
{topic-slug}-presentation.html
Theme Selection
Auto-select based on content keywords, or accept explicit override:
| Theme ID | Topic | Accent | Keywords |
|---|---|---|---|
tech | Technology/Dev | #00d4ff | code, API, software, deploy, dev |
business | Business/Sales | #00ff88 | sales, revenue, market, B2B, growth |
finance | Finance | #ffd700 | budget, ROI, investment, cost, profit |
health | Medical/Health | #20b2aa | patient, clinical, health, medical |
education | Education | #a855f7 | learn, course, student, training |
creative | Design/Creative | #ff6b9d | design, brand, visual, creative |
default | General | #3b82f6 | (fallback) |
Chapter Accent Colors
Each chapter gets a unique accent color from the palette for visual variety:
| Chapter | Color | Hex |
|---|---|---|
| 1 | Green | #00ff88 |
| 2 | Cyan | #00d4ff |
| 3 | Gold | #ffd700 |
| 4 | Pink | #ff6b9d |
| 5 | Purple | #a855f7 |
| 6 | Blue | #3b82f6 |
Colors cycle for presentations with more than 6 chapters.
Slide Design Principles
Content per slide:
- Maximum 10-15 words
- 1 idea per slide
- Skip source document intros/titles
Priority order:
- Large numbers/statistics (e.g., "60-70%", "$2.5M")
- Key metrics with context (e.g., "20% growth target")
- Single impactful phrases
- Simple diagrams via CSS
Slide types to generate:
- Hero number: Large stat centered, brief context below
- Key point: Single phrase, large typography
- Comparison: Side-by-side options or before/after
- List: Max 3-4 bullet points, minimal text each
- Quote: Large text with attribution
- Chapter title: Section name, minimal
Language Detection & Fonts
Detect RTL languages by checking for Hebrew (א-ת) or Arabic (ء-ي) characters:
- If RTL detected: set
<html dir="rtl"> - Otherwise: set
<html dir="ltr">
Font Selection by Language
| Language | Font | Google Fonts CSS |
|---|---|---|
| Hebrew | Heebo | family=Heebo:wght@300;400;500;600;700;800;900 |
| Arabic | Noto Sans Arabic | family=Noto+Sans+Arabic:wght@300;400;500;600;700;800;900 |
| Default (Latin) | Inter | family=Inter:wght@300;400;500;600;700;800;900 |
Run scripts/suggest-fonts.sh [hebrew|arabic|latin|all] for font options by language.
Output Structure
Generate a single HTML file with embedded CSS and JavaScript:
<!DOCTYPE html>
<html lang="[detected]" dir="[rtl|ltr]">
<head>
<style>
:root {
--accent: [theme-color];
--accent-glow: [theme-glow];
/* ... dark theme variables */
}
/* Full CSS from template */
</style>
</head>
<body>
<nav class="chapter-nav">
<!-- Chapter links -->
</nav>
<div class="slide-container">
<!-- Slides with data-chapter attributes -->
</div>
<div class="slide-counter">1/N</div>
<script>
/* Keyboard navigation */
</script>
</body>
</html>
File Naming
Generate filename from topic:
- Extract main subject from content
- Convert to lowercase slug (spaces → hyphens)
- Append
-presentation.html - Example: "B2B Platform PRD" →
b2b-platform-presentation.html
Additional Resources
Template
assets/template.html- Complete HTML/CSS/JS base template with RTL support
Reference
references/content-extraction.md- Detailed extraction rules per document type
Scripts
scripts/suggest-fonts.sh- Suggest Google Fonts by language (hebrew/arabic/latin/all)
Example Invocations
User: Create a presentation from this PRD: [content]
→ Auto-detect type, theme, language; generate slides
User: Generate slides with "finance" theme from: [content]
→ Use gold theme override; generate slides
User: Turn this meeting transcript into a presentation
→ Extract decisions, action items, key quotes
スコア
総合スコア
リポジトリの品質指標に基づく評価
SKILL.mdファイルが含まれている
ライセンスが設定されている
100文字以上の説明がある
GitHub Stars 100以上
3ヶ月以内に更新がある
10回以上フォークされている
オープンIssueが50未満
プログラミング言語が設定されている
1つ以上のタグが設定されている
レビュー
レビュー機能は近日公開予定です