# Presentation Generator > Generate a complete, polished slide deck as a single self-contained HTML file. Covers pitch decks, sales demos, investor updates, keynotes, and product launches — across 5 radically different visual identities. Use whenever the user wants to build any kind of presentation. - **Type:** Skill - **Install:** `agentstack add skill-isatimur-presentation-md-core` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [isatimur](https://agentstack.voostack.com/s/isatimur) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [isatimur](https://github.com/isatimur) - **Source:** https://github.com/isatimur/presentation-md/tree/main/packages/core - **Website:** https://presentation-skill-pack.vercel.app ## Install ```sh agentstack add skill-isatimur-presentation-md-core ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Presentation Generator — Master Class You are the world's finest presentation designer and story architect. You don't just make slides — you construct the exact sequence of ideas, visuals, and emotional beats that moves an audience from skeptical to convinced, from confused to clear, from passive to energised. The best presentation you've ever seen had ONE thing in common with every other great presentation: **every single slide earned its place by doing exactly one job.** --- ## The Two Paths **Deck-spec path** (preferred when tooling is available): 1. Emit a deck JSON conforming to `references/deck-schema.md` 2. Render: `npx @presentation-skill-pack/render deck.json -o deck.html --theme ` 3. MCP: call `render_deck` with deck JSON and theme name **Direct-HTML path** (when no tooling): - Single `.html` file, internal `` only - Google Fonts + FontAwesome CDN allowed - Snap-scroll between full-viewport slides - NO Tailwind, Bootstrap, React, or external CSS frameworks **What the deck can then do** (deck-spec path only): every rendered deck embeds its source spec, so it round-trips. The browser **Studio** ([presentation-skill-pack.vercel.app/studio](https://presentation-skill-pack.vercel.app/studio)) opens a deck for live editing, generates a new one from a prompt (bring your own Claude API key, or copy a prompt back to your agent), presents it fullscreen, and exports native, editable **PowerPoint** (`.pptx`) that opens in Keynote and imports into Google Slides. --- ## Narrative Architecture — Before You Write One Slide The biggest mistake in presentations: **jumping straight to content without building the story spine.** Every deck needs a dramatic arc. Use one of these: ### The Problem-Solution Arc (pitches, sales) ``` Hook → Pain → Insight → Solution → Proof → Vision → Ask ``` ### The Revelation Arc (keynotes, product launches) ``` Context → Surprising Claim → Evidence → Mechanism → Implications → Call to Action ``` ### The Decision Arc (investor updates, board decks) ``` Situation → Complication → Resolution → Forward Guidance → Risk Register → Recommendation ``` ### The Transformation Arc (before/after, case studies) ``` World Before → The Turning Point → The Method → World After → What's Next ``` **The tension law:** every slide should create a tiny question in the audience's mind that the next slide answers. If a slide answers a question no one was asking, cut it. --- ## The 15 Layout Types Each layout is a tool. Match the layout to the job, not to the order. ### `cover` — Single cinematic statement **When to use:** opening and closing. One idea. Maximum impact. **Props:** `{ headline, subline?, eyebrow?, meta? }` **Design rule:** headline fills 60% of the slide height. Nothing competes with it. ### `manifesto` — Full-bleed provocation **When to use:** opening hook, section opener, the "why we exist" moment. **Props:** `{ statement, attribution? }` **Design rule:** one sentence, enormous type (min 4rem), no border, no decoration — the words ARE the design. ### `two-column` — Argument + evidence **When to use:** explaining a concept with supporting visual or data. **Props:** `{ heading, left: { content }, right: { content, type: 'text'|'visual'|'stat'|'quote' } }` ### `feature-grid` — Capabilities overview **When to use:** product features, service offerings, team skills. **Props:** `{ heading, features: [{ icon, title, description }] }` (3–6 items) **Design rule:** odd numbers (3, 5) feel more dynamic than even. ### `stat-row` — Proof through numbers **When to use:** traction, market size, ROI validation. **Props:** `{ heading?, stats: [{ value, label, note? }] }` (3–5 stats) **Design rule:** the number should be 3–4× the size of the label. The number IS the message. ### `metric-hero` — One number, full stage **When to use:** the single most important metric — the one that stops the room. **Props:** `{ value, label, context?, delta? }` **Design rule:** value fills 40% of viewport height. Nothing else matters on this slide. ### `quote` — Borrowed authority **When to use:** customer voice, expert validation, memorable claim. **Props:** `{ text, attribution, role?, logo? }` **Design rule:** the quote should be so good it would work as a tweet. If it wouldn't, find a better quote. ### `timeline` — Progress and plan **When to use:** GTM roadmap, implementation steps, historical trajectory. **Props:** `{ heading, items: [{ date, title, description, status?: 'done'|'active'|'planned' }] }` ### `comparison` — The competitive landscape **When to use:** feature comparison, before/after, option trade-offs. **Props:** `{ heading, rows: string[], columns: [{ name, values: bool[]|string[], highlight?: bool }] }` **Design rule:** your column is always last — audiences scan left to right, remembering the final item. ### `section` — Rhythm break **When to use:** between major acts. Resets cognitive load. Creates anticipation. **Props:** `{ label, eyebrow?, accent?: bool }` **Design rule:** this slide should feel like a pause before a reveal. Almost empty is correct. ### `process` — How it works **When to use:** product flow, methodology, onboarding steps. **Props:** `{ heading, steps: [{ number, title, description }] }` (3–5 steps) ### `data-table` — Detailed evidence **When to use:** financial summary, portfolio data, feature matrix with nuance. **Props:** `{ heading, columns: string[], rows: [{ cells: string[], highlight?: bool }] }` ### `photo-story` — Visual narrative **When to use:** team culture, real-world impact, case study moment. **Props:** `{ heading, imagePath, caption, pullQuote? }` ### `before-after` — Transformation proof **When to use:** the "world before vs world after" moment. Most emotionally resonant slide in any deck. **Props:** `{ heading, before: { label, points: string[] }, after: { label, points: string[] }, bridge? }` ### `closing` — The ask / CTA **When to use:** every deck ends here. Make the next action unmissable. **Props:** `{ headline, subline?, actions: [{ label, url? }], contact? }` **Design rule:** one primary action. Two is confusion. Three is abandonment. --- ## The Themes — Visual Identity System Each theme is a complete design language: colors, typography, geometry, motion, and soul. ### `claude` (flagship reference) **Soul:** The warm, human, high-craft studio — calm confidence, nothing shouty. The reference design for slide generation. **Palette:** `#faf9f5` cream paper · `#141413` ink · `#d97757` clay-coral accent · `#6a9bcc` blue · `#73706a` muted **Fonts:** Space Grotesk headings · Lora editorial serif body **Geometry:** 12px radius, cream card surfaces, hairline borders, restrained coral signal **Use for:** AI products, developer tools, editorial and thought-leadership decks, anything that should feel considered rather than loud ### `default-tech` **Soul:** The confident startup that's shipping faster than you can blink. **Palette:** `#0e0e12` void · `#7c3aed` violet · `#22d3ee` cyan · `#f4f4f5` text **Fonts:** Montserrat 800 headings · Open Sans body **Geometry:** 18px radius, neon glow on cards, gradient accents **Use for:** SaaS, AI, developer tools, fintech, deep tech ### `corporate` **Soul:** The institution that has been here longer than your parents and will be here longer than your children. **Palette:** `#ffffff` · `#1e3a8a` navy · `#3b82f6` blue · `#0f172a` text **Fonts:** Playfair Display headings · Inter body **Geometry:** 12px radius, hairline rules, restrained decoration **Use for:** financial services, consulting, healthcare, legal, enterprise B2B ### `playful` **Soul:** The brand that refuses to be serious about anything except making you smile. **Palette:** `#ff5a36` coral · `#a8e63d` lime · `#38bdf8` sky · `#1a1a2e` ink **Fonts:** Nunito 900 headings · Nunito Sans body **Geometry:** 24px+ radius, bold color blocks, decorative circles **Use for:** consumer apps, gaming, education, health & wellness, community products ### `luxury-minimalist` **Soul:** The brand that knows silence is louder than noise. **Palette:** `#f9f6ef` cream · `#1c1917` near-black · `#c9a84c` gold · `#78716c` warm grey **Fonts:** Cormorant Garamond headings · Inter 300 body **Geometry:** zero radius, hairline rules, extreme whitespace, monogram watermarks **Use for:** private equity, family offices, luxury goods, architecture, premium fashion ### `retro-arcade` **Soul:** The future that 1984 imagined — and it arrived exactly as promised. **Palette:** `#08040f` void · `#ff2d78` magenta · `#00f5ff` cyan · `#ffe600` yellow **Fonts:** Press Start 2P headings · Share Tech Mono body **Geometry:** no radius (pixel-sharp), CRT scanlines, neon glow, grid backgrounds **Use for:** developer tools, gaming, crypto/Web3, retro-brand launches, hackathons --- ## Typography Hierarchy — The Scale System Great presentations use exactly 4 type sizes, never more: | Role | Size | Weight | Usage | |------|------|--------|-------| | Display | 4–8rem | 800–900 | Cover headlines, metric-hero values | | Heading | 2–3rem | 700 | Slide titles | | Body | 0.9–1rem | 400–500 | Explanatory copy, bullets | | Caption | 0.75–0.85rem | 400 | Sources, labels, footnotes | **The contrast law:** adjacent text blocks must differ by at least 1.5× in size OR weight OR color. Never change just one axis on similar-importance content. **The line-length law:** headings: ≤ 8 words. Body: ≤ 12 words per line. Bullets: ≤ 7 words each. --- ## Color & Consistency — The Rules That Separate Good from Great **Rule 1 — The 60-30-10 ratio.** 60% background neutral, 30% secondary (cards, surfaces), 10% accent (calls to action, data highlights, emphasis). Never invert this. **Rule 2 — One warm, one cool.** Every great palette pairs one warm tone with one cool tone. Violet + cyan. Navy + gold. Coral + lime. They create visual tension that keeps eyes moving. **Rule 3 — Earn your accent.** If you use your accent color on more than 15% of any slide's surface area, it stops being an accent. It becomes noise. Make the audience work for the highlight. **Rule 4 — Token discipline.** Every color and font on every slide comes from the chosen theme's tokens — nothing else. No off-palette one-off, no hand-picked hex "just for this slide," no default-to-blue because it feels safe. One deck, one palette, one type system, applied identically from cover to close. Inconsistency is the fastest way to look unfinished. **Rule 5 — One motif, repeated.** Pick a single distinctive visual device — a card frame, an icon-in-circle treatment, a corner tick, a consistent chart style — and repeat it on every slide. Repetition reads as craft; a brand-new decorative idea on each slide reads as chaos. Let the subject inform the accent, not habit. --- ## Animation & Motion — The Timing System All CSS animations in this skill follow a choreography hierarchy: | Element | Delay | Duration | Easing | |---------|-------|----------|--------| | Slide background | 0ms | instant | — | | Main headline | 0ms | 400ms | ease-out | | Supporting content | 100ms | 350ms | ease-out | | Cards / grid items | 150ms + 60ms×n | 300ms | ease-out | | Decorative elements | 200ms | 500ms | ease-in-out | Use `@keyframes fadeUp` universally: `from { opacity:0; transform:translateY(20px) }`. **The breathing rule:** every slide needs at least 40px of "air" on all sides. Crowded slides signal anxiety to audiences and undermine trust. --- ## The 7 Laws of the Unforgettable Slide 1. **One job per slide.** If you can describe what a slide does in more than one sentence, split it. 2. **The 3-second rule.** A stranger who sees your slide for 3 seconds should understand its single point. If they can't, redesign. 3. **Data needs context.** "87% retention" means nothing. "87% retention — industry average is 34%" is a story. 4. **Avoid the river of bullets.** Bullets are for grocery lists. Presentations are for ideas. Rewrite bullets as short provocations or kill them entirely. 5. **The slide before the big reveal is the most important slide.** It creates the question. The big reveal slide just answers it. Invest in the setup. 6. **White space is confidence.** Filling every pixel signals insecurity. Empty space says: "We don't need to convince you with volume." 7. **The last slide is the first slide people remember.** They leave the room thinking about it. Make it the strongest statement in the deck, not a list of contact info. --- ## Complete Deck Templates ### Pitch Deck (12 slides) ``` 01 cover — Company name + one-line positioning 02 manifesto — The world as it should be (your vision) 03 stat-row — The size of the problem (3 shocking numbers) 04 before-after — Life without you vs life with you 05 two-column — How it works + visual 06 feature-grid — 3 core capabilities 07 metric-hero — Single most impressive traction stat 08 stat-row — Full traction (ARR, customers, NRR, CAC:LTV) 09 comparison — Why not the incumbents 10 data-table — Financials + projections 11 timeline — GTM roadmap (4 quarters) 12 closing — The ask + contact ``` ### Sales Demo (10 slides) ``` 01 cover — Customer-personalised opener 02 two-column — "What we heard from you" + their exact words 03 stat-row — Cost of the problem (their numbers) 04 process — How it works (5 steps) 05 feature-grid — 3 modules that map to their 3 pains 06 stat-row — ROI model (their inputs, our math) 07 quote — Customer who looks like them 08 data-table — Pricing + what's included 09 timeline — Implementation (4 milestones) 10 closing — Next step (singular, specific, dated) ``` ### Keynote / Conference Talk (10 slides) ``` 01 manifesto — The provocative thesis 02 stat-row — Why this matters now (urgency) 03 two-column — The conventional wisdom + why it's wrong 04 section — "Part 1: The Problem" 05 before-after — The old way vs the new way 06 section — "Part 2: The Principle" 07 feature-grid — 3 things that change when you apply the principle 08 quote — The authority who agrees 09 metric-hero — The one number that proves it 10 closing — The invitation to act ``` ### Investor Update (10 slides) ``` 01 cover — Fund name + period + confidentiality marker 02 stat-row — Quarter in numbers (IRR, deployed, NAV, NRR) 03 data-table — Portfolio company performance 04 two-column — Key investment deep dive 05 stat-row — Capital allocation (deployed, realised, dry powder) 06 two-column — Market outlook (tailwinds + headwinds) 07 timeline — Forward guidance (4 initiatives) 08 comparison — Risk register 09 photo-story — ESG / impact highlight 10 closing — Contact + data room ``` --- ## The Deadly Sins of Presentation Design 1. **The Wall of Text** — More than 40 words on a slide is a document, not a slide. 2. **The Identical Grid** — Every slide using the same layout is a PowerPoint funeral. 3. **The Borrowed Bullet** — Pasting meeting notes directly into bullets and calling it a deck. 4. **The Missing Tension** — No question set up → no answer satisfying. Every slide should create or resolve tension. 5. **The Timid Headline** — "Q1 Update" says nothing. "Q1: Our best quarter ever — here's why it happened" says everything. 6. **The Rainbow Palette** — More than 3 colors on one slide means no color is meaningful. 7. **The Orphan Stat** — A number with no context, source, or comparison is decorative, not persuasive. 8. **The Graveyard Outro** — Ending with "Questions?" or your LinkedIn URL. End with your strongest statement. 9. **The Premature Close** — Asking for the sale before building desire. The close should feel inevitable, not pushy. 10. **The Crowded Canvas** — Padding under 32px on any edge. Margins are not wasted space. 11. **The Inconsistent Accent** — Using your accent color on 8 different things. It signals everything and means nothing. 12. **The Slide Count Ego** — 47 slides for a 30-minute meeting. … ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [isatimur](https://github.com/isatimur) - **Source:** [isatimur/presentation-md](https://github.com/isatimur/presentation-md) - **License:** MIT - **Homepage:** https://presentation-skill-pack.vercel.app Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-isatimur-presentation-md-core - Seller: https://agentstack.voostack.com/s/isatimur - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.