markdown-presentation

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: markdown-presentation
description: This skill should be used when creating markdown-based presentations with expandable sections, timing guides, and speaker-friendly formatting. Use for team onboarding, technical deep-dives, and knowledge transfer sessions.
---

# Markdown Presentation Skill

Create professional, presenter-friendly markdown presentations with timing guidance, expandable details, and clean visual hierarchy.

## When to Use This Skill

- Creating team onboarding presentations
- Technical architecture overviews
- Knowledge transfer sessions
- Sprint demos or retrospectives
- Any presentation that will be viewed in markdown-capable viewers (GitHub, VS Code, Obsidian)

## Presentation Structure

### Standard Template

```markdown
# Presentation Title
## Subtitle or Context

**Duration:** X minutes
**Audience:** Target audience
**Date:** YYYY-MM-DD

---

## Agenda

1. Topic 1 (X min)
2. Topic 2 (X min)
3. Topic 3 (X min)
...

---

## 1. First Section

Content here...

---

## 2. Second Section

Content here...

---

## Questions?

### Contact
- Channel/email
- Resources

---

*Presentation created: YYYY-MM-DD*
*Built with [markdown-presentation@plinde/claude-plugins](https://github.com/plinde/claude-plugins/tree/main/markdown-presentation)*
```

## Key Formatting Patterns

### Horizontal Rules as Slide Breaks

Use `---` to create visual "slide" breaks between sections:

```markdown
## Section 1

Content...

---

## Section 2

Content...
```

### Expandable Details for Dense Content

Use HTML `<details>` tags for content that's too long for a single "slide":

```markdown
<details>
<summary><b>📋 Click to expand detailed info</b></summary>

Long content here...
- Bullet points
- Code blocks
- Tables

</details>
```

**Best Practices for Details:**
- Use emoji + bold for visual distinction: `<b>📋 Title</b>`
- Keep summary text short and descriptive
- Use for: command references, configuration examples, troubleshooting guides
- Don't use for: critical information that everyone must see

### Timing Annotations

Include timing in the agenda to help presenters pace themselves:

```markdown
## Agenda

1. Introduction (2 min)
2. Architecture Overview (5 min)
3. Demo (8 min)
4. Q&A (5 min)

**Total: 20 minutes**
```

### ASCII Diagrams (Markdown Only)

Use ASCII art for architecture diagrams in **pure markdown** contexts (GitHub, VS Code preview):

```markdown
```
┌─────────────┐     ┌─────────────┐
│   Source    │────▶│  Processor  │
└─────────────┘     └──────┬──────┘
                           │
                           ▼
                    ┌─────────────┐
                    │   Output    │
                    └─────────────┘
```
```

**ASCII Box Drawing Characters:**
- Corners: `┌ ┐ └ ┘`
- Lines: `─ │`
- Connectors: `├ ┤ ┬ ┴ ┼`
- Arrows: `▶ ▼ ◀ ▲ → ← ↑ ↓`

**Warning:** ASCII diagrams often have alignment issues in HTML output due to font rendering. For HTML presentations, use HTML tables/divs instead (see HTML Presentations section below).

### Tables for Comparisons

```markdown
| Feature | Option A | Option B |
|---------|----------|----------|
| Speed   | Fast     | Slow     |
| Cost    | High     | Low      |
```

### Quick Reference Cards

End presentations with a quick reference section:

```markdown
## Quick Reference Card

### Key Commands
| Command | Purpose |
|---------|---------|
| `cmd1`  | Does X  |
| `cmd2`  | Does Y  |

### Important Links
- [Doc 1](url)
- [Doc 2](url)
```

## Presentation Length Guidelines

| Duration | Slides/Sections | Content Depth |
|----------|-----------------|---------------|
| 5 min    | 3-5             | Overview only |
| 15 min   | 6-10            | Key concepts + examples |
| 30 min   | 10-15           | Deep dive with demos |
| 60 min   | 15-25           | Comprehensive with exercises |

**Rule of thumb:** ~2 minutes per major section (excluding expandable details)

## Viewing Options

### VS Code
```bash
code presentation.md
# Use Ctrl+Shift+V (or Cmd+Shift+V) f