Slide Creator
Generate structural HTML/CSS for 1280×720 slide decks that you theme for pitches, launches, and content without fighting print layout.
Overview
slide-creator is an agent skill most often used in Launch (also Grow content, Validate prototype storytelling) that supplies style-neutral 1280×720 HTML slide structure and print-safe CSS.
Install
npx skills add https://github.com/starchild-ai-agent/official-skills --skill slide-creatorWhat is this skill?
- 1280×720 slide container with print-safe @page rules
- Style-neutral base CSS—colors and fonts live in your theme layer
- Layout helpers: slide-header, slide-tag, card-grid two-col, center-all content
- Explicit print media rules marked DO NOT CHANGE for reliable PDF export
- Copy base styles.css foundation then brand on top for agent-generated HTML slides
- Fixed 1280×720 slide dimensions with dedicated @page print rules
Adoption & trust: 2.6k installs on skills.sh; 13 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need presentation-ready HTML slides but keep breaking layout or print export when agents invent CSS from scratch each time.
Who is it for?
Solo builders generating pitch or launch decks as HTML for print, PDF, or static hosting with a consistent slide grid.
Skip if: Native PowerPoint or Google Slides workflows, or teams needing full narrative and chart automation without supplying content themselves.
When should I use this skill?
User asks for HTML presentation slides, pitch deck structure, or printable slide CSS based on the official slide-creator base.
What do I get? / Deliverables
You get a copied base stylesheet and slide markup patterns sized for 1280×720 with stable print rules, ready for your brand theme and content pass.
- Style-neutral base CSS snippet for slide decks
- Structural HTML slide patterns (header, tag, card-grid, centered content)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Slide decks are a launch and distribution artifact first—investor updates, Product Hunt stories, webinar decks—even though you may draft slides earlier while validating. Distribution covers outward-facing narrative formats; this skill supplies the style-neutral deck skeleton those channels expect.
Where it fits
Wrap Product Hunt or investor narrative in a fixed-aspect HTML deck for PDF handoff.
Repurpose a blog outline into webinar slides using the card-grid two-col layout.
Show a clickable prototype story in three slides without committing to a slide SaaS tool.
How it compares
HTML slide skeleton and CSS template—not an Obsidian wiki bootstrap or a phased code implementation planner.
Common Questions / FAQ
Who is slide-creator for?
Indie founders and marketers who want agents to output consistent HTML slide decks they can theme and export, without proprietary slide SaaS lock-in.
When should I use slide-creator?
During Launch distribution for pitch decks, in Grow content for webinar slides, or in Validate when a prototype needs a visual story deck before full build.
Is slide-creator safe to install?
It is static CSS and layout guidance with no required shell or network calls; review the Security Audits panel on this page like any third-party skill package.
SKILL.md
READMESKILL.md - Slide Creator
/* ===== HTML Slides Base CSS ===== Structural foundation for 1280×720 slide decks. This file is STYLE-NEUTRAL — no colors, fonts, or brand tokens. Copy into your project's styles.css, then add your own theme on top. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { -webkit-font-smoothing: antialiased; /* Override these in your theme */ font-family: system-ui, -apple-system, sans-serif; color: #222; background: #fff; } /* === Core Slide Container === */ .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; padding: 48px 64px; page-break-after: always; page-break-inside: avoid; } /* === Print Rules (DO NOT CHANGE) === */ @page { size: 1280px 720px; margin: 0; } @media print { body { margin: 0; } .slide { break-inside: avoid; } } /* === Layout Helpers === */ .slide-header { margin-bottom: 24px; } .slide-tag { display: inline-block; padding: 6px 16px; border-radius: 9999px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .slide-content { flex: 1; } .slide-content h2 { font-size: 36px; font-weight: 800; margin-bottom: 32px; line-height: 1.2; } .slide-content.center-all { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; } /* === Card Grid === */ .card-grid { display: grid; gap: 20px; } .card-grid.two-col { grid-template-columns: 1fr 1fr; } .card-grid.three-col { grid-template-columns: 1fr 1fr 1fr; } .card { border-radius: 14px; padding: 28px; } .card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .card p { font-size: 14px; line-height: 1.5; } /* === Pills === */ .pill { display: inline-block; padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 500; margin: 4px; } /* === Slide Footer === */ .slide-footer { position: absolute; bottom: 24px; left: 64px; right: 64px; display: flex; justify-content: space-between; font-size: 12px; opacity: 0.4; } /* === Background Glow (optional — add colors in theme) === */ .bg-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 0; } .glow-center { top: 50%; left: 50%; transform: translate(-50%,-50%); } .glow-top-right { top: -150px; right: -150px; } .glow-bottom-left { bottom: -150px; left: -150px; } .glow-left { top: 20%; left: -200px; } # Art Direction Reference Detailed visual style vocabulary for building HTML slides. --- ## Style Taxonomy ### 1. Dark Tech Minimal **Mood:** Bold, modern, premium **Industries:** SaaS, AI, developer tools, startups **Search keywords:** `"dark UI presentation" "dark minimal slide deck" site:dribbble.com` ``` Background: #000 / #0a0a0a / #0d0d0d Surface: rgba(255,255,255,0.04) borders rgba(255,255,255,0.08) Accent: #3b82f6 (blue) / #10b981 (green) / #f59e0b (amber) Text: #fff / #e5e7eb / #9ca3af Font: Inter, Space Grotesk, JetBrains Mono (mono accents) Radius: 6–12px Glow: radial-gradient(ellipse at top, rgba(accent,0.15) 0%, transparent 60%) ``` --- ### 2. Light Clean Corporate **Mood:** Trustworthy, professional, readable **Industries:** Finance, consulting, enterprise, legal **Search keywords:** `"clean white presentation" "corporate slide design" site:behance.net` ``` Background: #fff / #f8fafc Surface: #f1f5f9 border #e2e8f0 Accent: #1e40af (navy) / #0f766e (teal) / #7c3aed (violet) Text: #0f172a / #374151 / #6b7280 Font: Inter, DM Sans, Plus Jakarta Sans Radius: 4–8px Shadow: 0 1px 3px rgba(0,0,0,0.08) ``` --- ### 3. Bold Gradient **Mood:** Creative, energetic, expressive **Industries:** Agencies, design studios, product launches, events **Search keywords:** `"gradient slide deck" "colorful presentation design" site:dribbble.com` ``` Background: linear-gradient(135deg, #1e1b4b 0%, #31