By name: tap description: Create markdown presentations with live code execution version: 1.0.0 metadata: author: tap-sh tags: presentations, slides, markdown, live-code globs: - "**/*.md"
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
- Markdown-first - Write slides in familiar markdown syntax
- Live code execution - Run SQL, shell commands, Python, Node.js, and more directly in slides
- Beautiful themes - 5 built-in themes (paper, noir, aurora, phosphor, poster)
- 11 layouts - From title slides to code-focused layouts
- Presenter mode - Speaker notes, timer, and slide preview
- 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:
- getting-started - Installation and first presentation
- writing-slides - Markdown syntax, slide separators, speaker notes
- frontmatter - Global config options (title, theme, transitions)
- layouts - All 11 layouts with slot markers
- slide-directives - Per-slide HTML comment syntax
- animations - Transitions and fragment reveals
- code-blocks - Syntax highlighting, line highlighting, diffs
- live-code - Drivers for SQLite, MySQL, PostgreSQL, shell
- themes - 5 built-in themes and customization
- cli - tap new/dev/build/serve/pdf commands
- best-practices - Presentation design tips
- mermaid - Mermaid diagram support (flowcharts, sequence, ER, etc.)
- 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