← ClaudeAtlas

deck-design-pdflisted

Create presentation decks as high-fidelity PDF files using web technology (HTML, CSS, Tailwind, Font Awesome). Use when the user wants a polished, pixel-perfect deck with responsive layouts, rich typography, icons, and modern design. For editable PPTX output, use deck-design-ppt instead.
appautomaton/presentation · ★ 53 · Web & Frontend · score 73
Install: claude install-skill appautomaton/presentation
# Deck Design PDF: Operational Playbook ## What This Skill Does - **Input:** a deck brief + any structured data the user provides. - **Output:** a **PDF file**: pixel-perfect slides rendered from HTML/CSS via Playwright. Not editable in PowerPoint. This is the high-fidelity, print-ready format. ### When to use this vs deck-design-ppt | Need | Skill | |---|---| | Editable slides (PowerPoint/Keynote/Slides) | `deck-design-ppt` | | Pixel-perfect PDF: web typography, icons, gradients, CSS layouts | `deck-design-pdf` (this) | ### What the web stack unlocks (beyond pptx) - CSS Grid and Flexbox: responsive layouts instead of coordinate math - Google Fonts with optical sizing and variable weights - Font Awesome 6 icons inline with text - Gradient backgrounds, box shadows, rounded corners, opacity - ECharts 6 (SVG renderer): 21 chart types, including bar, line, pie, scatter, waterfall, gauge, sankey, treemap, radar, funnel, and heatmap - Tailwind utility classes: rapid, consistent styling ## Phase 1: Understand and Route ### 1. Read the room Before asking the user anything, scan the working directory for artifacts that establish context: briefs, consultant storyboards (`*-ghost.md`, `*-outline.md`), data files, brand specs, existing build scripts. Read what's there and form a working hypothesis about what this deck needs: objective, audience, tone, density, and data. Then ask only for what's genuinely ambiguous and would change the deck's argument or audience calibration. Fr