Tap - Presentations for Developers

Tap is a CLI tool that transforms markdown files into beautiful, interactive presentations with live code execution.

When to Use This Skill

Use Tap when building:

• •Technical presentations with code demos
• •Database query demonstrations with live results
• •CLI tool tutorials and walkthroughs
• •Workshop materials with executable examples
• •Conference talks with code walkthroughs

Key Capabilities

1. •Markdown-first - Write slides in familiar markdown syntax
2. •Live code execution - Run SQL, shell commands, Python, Node.js, and more directly in slides
3. •Beautiful themes - 5 built-in themes (paper, noir, aurora, phosphor, poster)
4. •11 layouts - From title slides to code-focused layouts
5. •Presenter mode - Speaker notes, timer, and slide preview
6. •Export options - Build static sites or export to PDF

Quick Start

# Create a new presentation
tap new my-talk

# Start the dev server
tap dev my-talk.md

# Build for production
tap build my-talk.md

# Export to PDF
tap pdf my-talk.md

Basic Slide Structure

---
title: My Presentation
theme: paper
---

# First Slide

Content here.

---

# Second Slide

More content.

Rule Index

This skill includes detailed rules for:

1. •getting-started - Installation and first presentation
2. •writing-slides - Markdown syntax, slide separators, speaker notes
3. •frontmatter - Global config options (title, theme, transitions)
4. •layouts - All 11 layouts with slot markers
5. •slide-directives - Per-slide HTML comment syntax
6. •animations - Transitions and fragment reveals
7. •code-blocks - Syntax highlighting, line highlighting, diffs
8. •live-code - Drivers for SQLite, MySQL, PostgreSQL, shell
9. •themes - 5 built-in themes and customization
10. •cli - tap new/dev/build/serve/pdf commands
11. •best-practices - Presentation design tips
12. •mermaid - Mermaid diagram support (flowcharts, sequence, ER, etc.)
13. •ai-images - Gemini AI image generation from prompts

Important Patterns

Slide Separators

Use --- on its own line to separate slides:

# Slide 1

---

# Slide 2

Slide Directives

Use HTML comments with YAML for per-slide settings:

<!--
layout: two-column
transition: fade
-->

Live Code Execution

Add {driver: 'drivername'} to code blocks:

```sql {driver: sqlite, connection: demo}
SELECT * FROM users;
```

Column Separator

For multi-column layouts, use ||| to separate content:

Left content

|||

Right content