slides
Creating Presentations with HTML/CSS
Build presentations as HTML/CSS and export to PDF. Tailwind CSS for styling, Google Fonts for typography, no design ceiling. The same approach works for slides, flyers, brochures, and posters.
How It Works
Each slide is a fixed-size <section> in a single HTML file. The browser renders it, Playwright converts it to a vector PDF (sharp text, selectable, any zoom level). That's the whole pipeline.
The HTML file is self-contained — Tailwind via CDN, Google Fonts via <link>, all styles inline. No build step. For images, use base64 data URIs or local file paths (Playwright resolves paths relative to the HTML file).
Here's the skeleton for a 16:9 slide deck:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
More from pietz/skills
m365
Use this skill when the user asks about Microsoft 365 email or calendar - reading, searching, sending Outlook emails, viewing calendar events, scheduling meetings, or managing M365 data.
57railway
Deploy and manage applications on railway.com. Use when the user asks to deploy, host, or ship an app to Railway, add databases or services to Railway, configure Railway projects, or troubleshoot Railway deployments.
4code-audit
>
3peer-review
Ask a group of LLM tools for their opinion on a given task. Use this when stuck on a problem, seeking a second opinion, validating an approach, or wanting diverse viewpoints on complex decisions.
3gws
>
1obsidian
>
1