Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
starchild-ai-agent avatar

Slide Creator

starchild-ai-agent/official-skills

  • 3.9k installs
  • 18 repo stars
  • Updated July 27, 2026
  • starchild-ai-agent/official-skills

slide-creator is an agent skill for build 16:9 slide decks as html and export to pdf for presentation-ready deliverables.

About

The slide-creator skill Build 16:9 slide decks as HTML and export to PDF for presentation-ready deliverables. Build slide decks as HTML, export to pixel-perfect 16:9 PDF via headless Chromium. Output format: PDF not Microsoft PowerPoint (.pptx). The PDF preserves exact layout, fonts, and colors across all devices. - CSS layout (Grid/Flexbox) is far more flexible than any PPT editor - Full web typography, gradients, SVG, animations (print degrades gracefully) - Git-friendly, reproducible, scriptable - One command → PDF with exact 16:9 page dimensions Before any other step, identify the presentation scenario. Read references/content-scaffolding.md for full templates. Before any other step, identify the presentation scenario. Read references/content-scaffolding.md for full templates. Scenario keyword Template to use ----------------- ---------------- pitch / investor / fundraising pitch-deck conference / keynote / summit / talk conference-keynote product launch / launch event product-launch report / research / analysis research-report (none of the above) ask user which scenario fits best Each template defines: slide count, page titles, required content per page. If the audience is bi.

  • CSS layout (Grid/Flexbox) is far more flexible than any PPT editor
  • Full web typography, gradients, SVG, animations (print degrades gracefully)
  • Git-friendly, reproducible, scriptable
  • One command → PDF with exact 16:9 page dimensions
  • Use the bilingual layout mode from references/content-scaffolding.md

Slide Creator by the numbers

  • 3,913 all-time installs (skills.sh)
  • +72 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #82 of 690 Office & Documents skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

slide-creator capabilities & compatibility

Capabilities
css layout (grid/flexbox) is far more flexible t · full web typography, gradients, svg, animations · git friendly, reproducible, scriptable · one command → pdf with exact 16:9 page dimension · use the bilingual layout mode from references/co
Use cases
presentations
From the docs

What slide-creator says it does

Build slide decks as HTML, export to pixel-perfect 16:9 PDF via headless Chromium.
SKILL.md
Before any other step, identify the presentation scenario. Read `references/content-scaffolding.md` for full templates.
SKILL.md
Each template defines: slide count, page titles, required content per page.
SKILL.md
npx skills add https://github.com/starchild-ai-agent/official-skills --skill slide-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3.9k
repo stars★ 18
Security audit2 / 3 scanners passed
Last updatedJuly 27, 2026
Repositorystarchild-ai-agent/official-skills ↗

How do I build 16:9 slide decks as html and export to pdf for presentation-ready deliverables with documented agent guidance?

Build 16:9 slide decks as HTML and export to PDF for presentation-ready deliverables.

Who is it for?

Developers who need office & documents help during build work.

Skip if: Skip when the task falls outside Office & Documents scope described in SKILL.md.

When should I use this skill?

Build 16:9 slide decks as HTML and export to PDF for presentation-ready deliverables.

What you get

Completed office & documents workflow aligned with SKILL.md steps and validation.

  • HTML slide markup
  • Structural styles.css
  • Print-ready page-break rules

By the numbers

  • CSS layout (Grid/Flexbox) is far more flexible than any PPT editor
  • Full web typography, gradients, SVG, animations (print degrades gracefully)
  • Git-friendly, reproducible, scriptable

Files

SKILL.mdMarkdownGitHub ↗

Slide Creator — HTML → PDF Presentations

Build slide decks as HTML, export to pixel-perfect 16:9 PDF via headless Chromium.

Output format: PDF — not Microsoft PowerPoint (.pptx). The PDF preserves exact layout, fonts, and colors across all devices.

Why HTML → PDF

  • CSS layout (Grid/Flexbox) is far more flexible than any PPT editor
  • Full web typography, gradients, SVG, animations (print degrades gracefully)
  • Git-friendly, reproducible, scriptable
  • One command → PDF with exact 16:9 page dimensions

Workflow

0. Identify Scenario (new)

Before any other step, identify the presentation scenario. Read references/content-scaffolding.md for full templates.

Scenario keywordTemplate to use
pitch / investor / fundraisingpitch-deck
conference / keynote / summit / talkconference-keynote
product launch / launch eventproduct-launch
report / research / analysisresearch-report
(none of the above)ask user which scenario fits best

Each template defines: slide count, page titles, required content per page.

0.5 Bilingual Layout (if needed)

If the audience is bilingual (e.g. HK, Singapore, global Chinese conference), or the user mentions Chinese + English:

  • Use the bilingual layout mode from references/content-scaffolding.md
  • Heading: English (large) + Chinese subtitle (smaller, --text-muted)
  • Body bullets: Chinese first, English parenthetical optional
  • Avoid pure English-only decks for HK/TW/SG audiences

1. Plan the Deck

Define slide count and content per slide based on the scenario template. Each slide = one <section class="slide">.

1.5 Art Direction (run this before building)

Run this step whenever the user hasn't provided a specific visual style.
Read skills/slide-creator/references/art-direction.md for the full style taxonomy,
CSS token templates, and style-brief output format.

Step A — Ask 4 questions: 1. Audience & setting: who is this for, and in what context (investors / internal team / public keynote)? 2. Mood keywords: how should the audience feel (authoritative / energetic / friendly / geeky-modern)? 3. Brand constraints: any required brand colors, logo, or fonts? 4. Reference material: any template references to align with (images, web links, existing deck screenshots)?

Step B — Generate a visual style picker page: Do NOT present style options as text descriptions — users can't evaluate styles from words alone.

Reference handling rules:

  • If user provides image files/screenshots: sample palette (primary/surface/accent), inspect layout density, corner radius, typography tone from the visual.
  • If user provides web URLs: use web_fetch to extract design cues. Critical — follow this extraction protocol to avoid misreading the style:

1. Ignore the brand name / domain name — never infer visual style from the product's industry or name (e.g. "Neo" does NOT mean neon, "Opera" does NOT mean European luxury). 2. Read copy tone & vocabulary — the words used on the page reveal mood (e.g. "surgical precision", "quiet confidence" → restrained; "unleash", "radically" → bold/aggressive). 3. Extract explicit color vocabulary — look for CSS keywords in the fetched text, or color names mentioned in body text / alt tags. Warm vs cool, light vs dark, muted vs saturated. 4. Infer layout density — count words per section; sparse = editorial/luxury, dense = technical/functional. 5. Identify decorative motifs — mentioned or implied (e.g. geometry, gradients, photography, illustration, line art, brutalism). 6. Cross-check against art-direction.md — find the closest matching template, then describe the delta (e.g. "Style G but warmer, replace blue with burnt orange, add subtle grid lines"). 7. When uncertain: be conservative — under-promise the style match and present 3 options where Option A is your best interpretation, B is safer/cleaner, C is more experimental. Never confidently assert a style that contradicts the actual visual evidence.

  • If user provides both: prioritize image cues first, URL cues second.
  • If no references are provided: use built-in style taxonomy defaults.

Then: 1. Create output/style-picker/index.html — a single page with 3 side-by-side mini slide previews (16:9 aspect ratio), each fully rendered with real CSS (colors, fonts, layout, decorative elements). Each preview must look like an actual slide, not a color chip. 2. Build these 3 options as: (A) Reference-faithful, (B) Safer corporate variant, (C) Bolder creative variant. 3. preview(action='serve') the directory and show the preview URL. 4. Each card has a label below: style name + one-line description. 5. Add onclick highlight so the user can click to indicate their choice.

User picks by saying "Choose A" / "I want B" / "Blend A+C" etc.

Step C — Generate style-brief.md: Once user selects a style, write a style-brief.md (template in art-direction.md) in the project directory. All subsequent HTML/CSS work must follow this brief.

Step D — Ask for brand assets (logo / colors): After user picks a style, ask:

"Do you have a logo or brand color to include? You can upload an image file, and I’ll embed the logo across the slides."

If logo uploaded: embed as base64 in HTML (use base64.b64encode in bash), place in top-left or top-right corner at ≤60px height. If brand color given: override --accent in CSS token block with user's color.

2. Choose a Theme

If Art Direction was completed, the style-brief.md is the theme spec — skip this table. Otherwise, use as a quick fallback:

StyleBackgroundAccentFontMood
Dark tech#000 / #0a0a0abright orange/blue/greenInter, Space GroteskBold, modern
Light clean#fff / #f8f8f8navy, teal, coralInter, DM SansProfessional, minimal
Gradientdark gradientvibrant accentAny sans-serifCreative, energetic
Corporate#1a1a2e / whitebrand colorsystem fontsTrustworthy, formal
Playfulsoft pastelswarm pop colorsNunito, PoppinsFriendly, casual

3. Build HTML + CSS

Create a project directory with index.html + styles.css.

Start from `assets/base.css` — structural skeleton (slide dimensions, print rules, layout helpers) with NO colors or fonts. Layer your theme on top:

/* Example theme layer — customize freely */
body {
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: #000;
}
.slide { background: #0a0a0a; }
.slide-tag { background: rgba(0,120,255,0.15); color: #0078ff; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

Mandatory structural rules (in base.css — don't remove):

.slide { width: 1280px; height: 720px; page-break-after: always; overflow: hidden; }
@page { size: 1280px 720px; margin: 0; }

Key rules:

  • Use px units — never vh/vw/rem/% for slide dimensions
  • Google Fonts: use <link> in <head>, export script waits for network idle
  • Viewport meta: <meta name="viewport" content="width=1280">
  • Content must fit within 720px height — overflow is clipped

4. Preview (Optional)

Use preview(action='serve') to preview in browser before exporting.

5. Export to PDF

python3 skills/slide-creator/scripts/export_pdf.py --dir <project-dir> --output output/<name>.pdf

Options:

  • --dir — directory containing index.html (required)
  • --output / -o — output PDF path (default: <dir>/deck.pdf)
  • --width — slide width in px (default: 1280)
  • --height — slide height in px (default: 720)

6. Verify

The script prints slide count and confirms output path. Extra check:

import fitz
doc = fitz.open("output/deck.pdf")
print(f"Pages: {doc.page_count}")
for p in doc:
    r = p.rect
    print(f"  {r.width*96/72:.0f}x{r.height*96/72:.0f}px")

Style Guidelines

  • No default brand — every deck gets a theme tailored to its content
  • Prefer Art Direction-first workflow (questions → references → user pick → style-brief.md)
  • Ask the user for preference: dark/light, accent color, font, mood
  • Each slide should have clear visual hierarchy: tag → title → content
  • Keep text concise — slides are visual, not documents
  • Use .bg-glow with theme-colored radial gradients for depth
  • Do not use web_search for style exploration by default; prioritize user-provided reference images/links plus templates in art-direction.md.
  • When the user provides reference links, use web_fetch to extract design cues (color tone / voice / layout), but implement final CSS using local templates and token variables.
  • When the user asks for "art-direction advice / style advice", always generate a visual style-picker preview page (3 options) — never rely on text-only descriptions.
  • Build HTML strictly against chosen style brief, then export PDF (do not skip brief unless user explicitly opts out)
  • After style is chosen, always ask about logo / brand assets before building
  • For HK/TW/SG/bilingual audiences, default to bilingual layout unless user says English only

Style Microtweaks (after style is chosen)

If user says "change primary color to red" / "switch the font" / "increase corner radius", do NOT restart art direction. Instead, directly patch the --accent / --font-head / --radius CSS variable in styles.css. Only restart art direction if user wants a completely different style.

Gotchas

  • Chromium: pre-installed via workspace/setup.sh on container start (~641 MB cached at ~/.cache/ms-playwright/). Do NOT run playwright install on every export — it re-downloads the same browser. Only run it if export_pdf.py fails with Executable doesn't exist, and in that case also append the command to workspace/setup.sh so it persists.
  • Fonts: Google Fonts need HTTP — the export script starts a local server automatically
  • Emoji rendering: headless Chromium may lack emoji fonts — use SVG icons instead
  • Large images: embed as base64 or use relative paths (local server serves the project dir)
  • Slide overflow: content exceeding 720px height is clipped — design within bounds
  • ⚠️ PDF text not selectable (verified 2026): filter / backdrop-filter CSS on any ancestor containing text causes Chromium to rasterize that layer to bitmap during PDF export — all child text becomes pixels, not selectable. Fix: NEVER apply filter/backdrop-filter to containers holding text. Only apply to empty decorative <div> elements (e.g. .blur-layer, .glow-overlay) with no text children. Same rule applies to mix-blend-mode on text parents. Pre-export checklist: search HTML for filter/backdrop-filter on non-decorative elements and strip them.
  • ⚠️ Footer / source attribution — use standard component + strict bottom-safe-area contract (verified 2026): ad-hoc footer markup causes inconsistent positioning across slides. Always use this .slide-footer pattern for all source citations, page numbers, and disclaimers.

Hard layout contract (do not skip):

  • Every non-cover slide must have a dedicated content wrapper (e.g. .slide-body) that reserves footer space.
  • Hard rule: .slide-body must reserve footer space with bottom-safe-area >= 96px (default 96px). Example: .slide-body { padding: 52px 72px 96px; }.
  • Footer must be outside normal flow: position: absolute; bottom: 24px, as a sibling of .slide-body directly under .slide.
  • Never place source/disclaimer text inside .slide-body.
  • Cover page can be exception only when it has no .slide-footer.

This enforces physical separation: body content area ends above a reserved footer lane, and footer stays in the canvas-bottom lane, so they never overlap regardless of content density.

  <footer class="slide-footer">
    <span class="footer-source">Source: CoinGecko · Coinglass · DefiLlama</span>
    <span class="footer-page">03 / 12</span>
  </footer>
  .slide-footer {
    position: absolute;
    bottom: 24px; left: 48px; right: 48px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 11px; color: rgba(255,255,255,0.35);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
    z-index: 2;
  }
  .slide > *:not(.bg-glow):not(.slide-footer) {
    position: relative;
    z-index: 1;
  }
  .slide-body { padding-bottom: 96px; }

Never use in-flow / position: relative footers — they shift when slide content height changes. Also exclude .slide-footer from generic .slide > * stacking rules, or CSS order can accidentally override footer layering. Validation checklist (required before export): 1) every non-cover slide has .slide-body and .slide-footer as siblings; 2) .slide-body bottom padding is >=96px; 3) source/disclaimer text appears only inside .slide-footer, never in body containers.

  • ⚠️ z-index / decorative overlay bug (verified 2026): .bg-glow and other decorative pseudo-layers MUST be positioned with z-index: 0 and all real slide content given z-index: 1 explicitly. If .bg-glow is a sibling of .slide > * (not a ::before/::after pseudo-element), add this rule to ensure content is never visually buried:
  .slide > *:not(.bg-glow) { position: relative; z-index: 1; }
  .bg-glow { position: absolute; z-index: 0; pointer-events: none; }

Failure mode: PDF exports show content pushed to the bottom or invisible, even though browser preview looks fine (browser compositing handles z-order more forgivingly than Chromium's print path).

Related skills

open.feishu.cnLark DocGenerate, update, and maintain structured documentation directly inside Lark/Feishu using natural language and agentic workflows.475kopen.feishu.cnLark DriveLet their coding agents read, create, update and search documents stored in Lark (Feishu) Drive directly from prompts.475kopen.feishu.cnLark SheetsConnect Claude, Cursor or other agents directly to Feishu/Lark spreadsheets for live data reads, writes, and structured automation.474kopen.feishu.cnLark WikiGenerate, update, and sync structured knowledge bases inside Lark (Feishu) directly from code, specs, or agent output.474kopen.feishu.cnLark WhiteboardGenerate, edit, and collaborate on visual diagrams and flowcharts directly inside Claude, Cursor or other agents.474kopen.feishu.cnLark SlidesInstantly generate polished, professional slide decks from specs, roadmaps, or meeting notes using Lark/Feishu.474k

How it compares

slide-creator is an agent skill for build 16:9 slide decks as html and export to pdf for presentation-ready deliverables, not a generic alternative.

FAQ

Who is slide-creator for?

Developers using Office & Documents workflows with agent-guided SKILL.md steps.

When should I use slide-creator?

Build 16:9 slide decks as HTML and export to PDF for presentation-ready deliverables.

Is slide-creator safe to install?

Review the Security Audits panel on this page before installing in production.

Office & Documentsworkflow
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.