skills.rest
eyelevelai
eyelevelaiCOMMUNITY
Explore all skills by this author →
GitHub

groundx-slides

Convert EyeLevel-branded HTML slides to PDFs via a Puppeteer pipeline.

Updated Aug 27, 2026
Search Tags:#branding#pdf#html#slides#puppeteer#design-system#deck
One-click install
npx skills add https://github.com/eyelevelai/groundx-skills --skill groundx-slides
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: groundx-slides
Source: https://github.com/eyelevelai/groundx-skills/tree/main/skills/groundx-slides
Command: npx skills add https://github.com/eyelevelai/groundx-skills --skill groundx-slides

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

EyeLevel-branded decks are often created in disparate formats and must be ported to PDFs without sacrificing branding consistency. This Skill provides a plug-and-play workflow to render HTML slides into print-ready PDFs that preserve the GroundX design system invariants (palette, typography, logos) across layouts.

Core Features & Use Cases

  • HTML → PDF deck rendering for cover, hero, split, three-card-grid, display-stat, and CTA slides.
  • Consistent branding: typography, colors, logos, and eyebrow/slide chrome pulled from the design standards.
  • Quick iteration: author slides in HTML and generate a single deck PDF for review or submission.

Quick Start

From the templates folder, run npm install and npm run build to generate out/deck.pdf.

Frequently Asked Questions about groundx-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render HTML slides to PDF while maintaining branding consistency?▼

HTML slides can be rendered to print-ready PDFs via a Puppeteer pipeline that enforces design tokens for typography, colors, and logos. This ensures branding consistency across cover, hero, split, three-card-grid, display-stat, and CTA layouts.

What slide layouts are supported for PDF deck generation?▼

PDF deck generation supports six slide archetypes: cover, hero-with-stats, split, three-card-grid, display-stat, and CTA. Each layout renders at a consistent 1920×1080 resolution while preserving design system invariants.

Can I use Puppeteer to generate a branded deck PDF from HTML content?▼

Yes, a templated Node.js build process uses Puppeteer to convert HTML deck content into a single branded PDF. Running npm install and npm run build from the templates folder generates the output file out/deck.pdf.

How do design tokens ensure consistent branding across PDF slides?▼

Design tokens serve as the canonical source for colors, typography, and layout. The rendering pipeline references these tokens to apply consistent branding, pulling eyebrow and slide chrome directly from the design standards.

What's the best way to iterate on slide content and generate a review-ready PDF?▼

Author slides directly in HTML and run the Node.js build process to generate a single deck PDF. This allows quick iteration cycles for review or submission without sacrificing design system invariants during the HTML to PDF conversion.

Does this HTML to PDF pipeline require specific dimensions for the output slides?▼

The HTML to PDF pipeline renders all slide archetypes at a fixed 1920×1080 resolution. This standardized output dimension ensures visual consistency across the entire generated deck PDF.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic
octavehqoctavehq

deck

Generate branded HTML slide decks from Octave GTM data.

Official
Advanced
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
nexu-ionexu-io
8.2k

deck-open-slide-canvas

Render fixed 1920×1080 presentation decks with React components.

Official
Intermediate