html-to-ppt

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
# ═══════════════════════════════════════════════════════════════════════════════
# CLAUDE OFFICE SKILL - Enhanced Metadata v2.0
# ═══════════════════════════════════════════════════════════════════════════════

# Basic Information
name: html-to-ppt
description: "Convert HTML/Markdown to PowerPoint presentations using Marp"
version: "1.0"
author: claude-office-skills
license: MIT

# Categorization
category: conversion
tags:
  - html
  - pptx
  - conversion
  - slides
department: All

# AI Model Compatibility
models:
  recommended:
    - claude-sonnet-4
    - claude-opus-4
  compatible:
    - claude-3-5-sonnet
    - gpt-4
    - gpt-4o

# MCP Tools Integration
mcp:
  server: office-mcp
  tools:
    - pptx_to_html

# Skill Capabilities
capabilities:
  - html_conversion
  - slide_generation

# Language Support
languages:
  - en
  - zh
---

# HTML/Markdown to PowerPoint Skill

## Overview

This skill enables conversion from Markdown or HTML to professional PowerPoint presentations using **Marp** (Markdown Presentation Ecosystem). Create beautiful, consistent slides using simple Markdown syntax with CSS-based themes.

## How to Use

1. Provide Markdown content structured for slides
2. Optionally specify a theme or custom styling
3. I'll convert it to PowerPoint, PDF, or HTML slides

**Example prompts:**
- "Convert this markdown to a PowerPoint presentation"
- "Create slides from this outline using Marp"
- "Turn my notes into a presentation with the gaia theme"
- "Generate a PDF slide deck from this markdown"

## Domain Knowledge

### Marp Fundamentals

Marp uses a simple syntax where `---` separates slides:

```markdown
---
marp: true
theme: default
---

# Slide 1 Title

Content for first slide

---

# Slide 2 Title

Content for second slide
```

### Command Line Usage

```bash
# Convert to PowerPoint
marp slides.md -o presentation.pptx

# Convert to PDF
marp slides.md -o presentation.pdf

# Convert to HTML
marp slides.md -o presentation.html

# With specific theme
marp slides.md --theme gaia -o presentation.pptx
```

### Slide Structure

#### Basic Slide
```markdown
---
marp: true
---

# Title

- Bullet point 1
- Bullet point 2
- Bullet point 3
```

#### Title Slide
```markdown
---
marp: true
theme: gaia
class: lead
---

# Presentation Title

## Subtitle

Author Name
Date
```

### Frontmatter Options

```yaml
---
marp: true
theme: default          # default, gaia, uncover
size: 16:9              # 4:3, 16:9, or custom
paginate: true          # Show page numbers
header: 'Company Name'  # Header text
footer: 'Confidential'  # Footer text
backgroundColor: #fff
backgroundImage: url('bg.png')
---
```

### Themes

#### Built-in Themes
```markdown
---
marp: true
theme: default   # Clean, minimal
---

---
marp: true
theme: gaia      # Colorful, modern
---

---
marp: true
theme: uncover   # Bold, presentation-focused
---
```

#### Theme Classes
```markdown
---
marp: true
theme: gaia
class: lead     # Centered title slide
---

---
marp: true
theme: gaia
class: invert   # Inverted colors
---
```

### Formatting

#### Text Styling
```markdown
# Heading 1
## Heading 2

**Bold text** and *italic text*

`inline code`

> Blockquote for emphasis
```

#### Lists
```markdown
- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Second item
   1. Nested numbered
```

#### Code Blocks
```markdown
# Code Example

\`\`\`python
def hello():
    print("Hello, World!")
\`\`\`
```

#### Tables
```markdown
| Feature | Status |
|---------|--------|
| Tables  | ✅     |
| Charts  | ✅     |
| Images  | ✅     |
```

### Images

#### Basic Image
```markdown
![](image.png)
```

#### Sized Image
```markdown
![width:500px](image.png)
![height:300px](image.png)
![width:80%](image.png)
```

#### Background Image
```markdown
---
marp: true
backgroundImage: url('background.jpg')
---

# Slide with Background
```

### Advanced Layout

#### Two Columns
```markdown
---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, 1