AugmentClaude
UI ComponentsWriting

Slide Deck Builder

By Fergana-Labs· Fergana-Labs/stash· 0

Build presentation slide decks as HTML pages with fixed dimensions and layout.

Installation

  1. Make sure Claude is on your device and in your terminal.

    Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.

    One-time setup
    npm i -g @anthropic-ai/claude-code

    Already have it? Skip ahead.

  2. Paste into Claude Code or into your terminal.
    Install
    Sign up to copy
    Sign up free to reveal

    This copies the whole skill folder into ~/.claude/skills/slides-fergana-labs/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

    Faster alternative (instruction-only skills)

    Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

    Quick install (SKILL.md only)
    Sign up to copy
    Sign up free to reveal
  3. Restart Claude Code.

    Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.

  4. Just ask Claude.

    Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

How to build presentation slide decks as HTML pages. Covers the slide format, canvas dimensions, and recommended libraries.

What this skill does

Building slide decks

A slide deck is a single HTML page with html_layout: "fixed-aspect" whose <body> contains one <section class="slide"> per slide.

The canvas — 1920 × 1080 (16:9)

Every slide is a fixed 1920 × 1080 px canvas with overflow:hidden. Stay inside a 64 px safe-area margin (working area 1792 × 952 px). Nothing should scroll inside a slide; the viewer scales the canvas to fit the viewport, and the exporter renders at native 1920×1080.

Required structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Deck title</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css" rel="stylesheet">
  <style>
    /* Belt-and-suspenders — the viewer enforces these too. */
    section.slide {
      width: 1920px; height: 1080px;
      overflow: hidden; position: relative;
      box-sizing: border-box;
      padding: 64px;
    }
  </style>
</head>
<body>
  <section class="slide" data-type="cover">…</section>
  <section class="slide" data-type="content">…</section>
  <section class="slide" data-type="content">…</section>
  <section class="slide" data-type="final">…</section>
</body>
</html>

Page types (data-type, optional but recommended)

  • cover — title slide.
  • toc — table of contents.
  • chapter — section divider.
  • content — regular content slide.
  • final — thanks / Q&A / contact slide.

These let presenter view and future templates target slides by role.

Typography

  • Title text: ≥ 56 px.
  • Body text: ≥ 28 px.
  • Footnotes / captions: ≥ 20 px.
  • Use the system font stack or one CDN font (Inter, Geist). Avoid @font-face — it adds latency in export.

Recommended libraries (all CDN-loadable)

NeedUse
ChartsChart.js for 1–2 charts per slide; ECharts for dashboards; D3 only when custom
TablesPlain <table> + Tailwind classes. No DataTables.
IconsFont Awesome 6 (CDN) or Lucide
CodeShiki (preferred, vector-clean) or highlight.js
MathKaTeX with auto-render (never MathJax inside iframe)
DiagramsMermaid via CDN, render once on load

Render charts at load time (inline <script> in the slide) so screenshot exporters capture them. Don't rely on interactivity in PPTX/PDF.

Anti-patterns

  • More than ~40 words of body text per slide.
  • Low contrast (white text on light backgrounds, etc.).
  • vh / vw units — use px. The canvas is fixed-pixel.
  • Images without max-width: 100% (they'll overflow).
  • Fixed-positioned elements depending on viewport (position: fixed).
  • Custom fonts loaded via @font-face from arbitrary URLs.
  • Multiple <section class="slide"> nested inside each other.

Editing

Users can touch up text inline with the Edit button on the page. Keep markup semantic — use <h1>, <h2>, <p>, <ul> rather than a sea of <div>s — so the WYSIWYG editor's text selection and the exporter's text-overlay extraction both work cleanly.

Export

The PDF export is vector text. The PPTX and Google Slides exports embed each slide as a high-DPI image plus an invisible text overlay so users can select, copy, and search the text in PowerPoint / Keynote / Slides. Don't ship interactive controls — they won't survive the export.

Related skills

R

React & Next.js Performance

vercel-labs

Optimize React and Next.js code following Vercel's performance best practices.

MIT
R

React Composition Patterns

vercel-labs

Build flexible, maintainable React components using composition techniques.

MIT
S

Senior Frontend Engineer

alirezarezvani

Build and optimize React and Next.js applications with performance analysis and accessibility.

U

UI Design Guidelines Reviewer

vercel-labs

Review UI code for compliance with web interface best practices and accessibility standards.