agentsclimarketplace
Sign in

Presentation design

Skill ArnavPuri/designskills/skills/presentation-design

Design slide decks and presentations with HTML/CSS: layouts, typography, data visualization, and transitions. Trigger phrases: "presentation", "slide deck", "slides", "pitch deck", "keynote", "reveal.js", "slide design", "presentation template", "speaker notes"From its SKILL.md

Install
npx -y skills add ArnavPuri/designskills --skill presentation-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

9.6 KB, as published. Nobody here has run it

Presentation Design

Create visually stunning slide decks using HTML and CSS.

Prerequisites

  • Read any design-context files for brand colors, fonts, or presentation templates.
  • Identify the audience, purpose, and length of the presentation.

Step 1: Slide Layout Templates

Title Slide

.slide-title {
  display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--brand-500); color: white;
}
.slide-title .slide-headline { font-size: 4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1rem; }
.slide-title .slide-subtitle { font-size: 1.5rem; opacity: 0.85; margin-bottom: 2rem; }
.slide-title .slide-meta { display: flex; gap: 2rem; font-size: 1rem; opacity: 0.7; }

Content Slide (Text + Bullets)

.slide-content-layout { display: flex; flex-direction: column; justify-content: center; padding: 4rem 6rem; }
.slide-heading { font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; color: var(--gray-900); }
.slide-bullets { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.slide-bullets li { font-size: 1.5rem; line-height: 1.4; color: var(--gray-700); padding-left: 2rem; position: relative; }
.slide-bullets li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--brand-500); border-radius: 50%; }

Two-Column Comparison

.slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; }
.slide-col h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--brand-500); }

Quote Slide

.slide-quote { display: grid; place-items: center; padding: 4rem 8rem; background: var(--gray-50); }
.slide-blockquote p { font-size: 2.5rem; font-weight: 500; font-style: italic; line-height: 1.3; text-align: center; margin-bottom: 1.5rem; }
.slide-blockquote cite { display: block; font-size: 1.125rem; font-style: normal; color: var(--brand-500); font-weight: 600; text-align: center; }

Data/Stats Slide

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; text-align: center; }
.stat-number { display: block; font-size: 4rem; font-weight: 800; color: var(--brand-500); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { font-size: 1.125rem; color: var(--gray-500); }

Image + Text Slide

.slide-image-text { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.slide-image-text .slide-image { background-size: cover; background-position: center; }
.slide-image-text .slide-text { display: flex; flex-direction: column; justify-content: center; padding: 4rem; }

Step 2: Slide Container (16:9)

.slide {
  width: 100%; aspect-ratio: 16 / 9; max-width: 1280px; max-height: 720px;
  overflow: hidden; position: relative; font-family: var(--font-body);
}
.presentation { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: black; }
.presentation .slide { width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; }
.slide-content { padding: 4rem 6rem; } /* Safe margins */

Step 3: One Idea Per Slide

Each slide communicates exactly ONE concept. Structure:

  1. Headline: The one takeaway (1 line, 6-8 words max)
  2. Support: Visual or 3-4 bullet points reinforcing the headline
  3. Visual anchor: An image, chart, icon, or number

Cut: paragraphs of text, more than 4-5 bullets, busy diagrams. Split or simplify.

Step 4: Typography for Presentations

ElementSizeWeightNotes
Headline3-4.5rem700-8001 line, max 2 lines
Subhead1.5-2rem500Supporting context
Body1.25-1.5rem400Bullets, descriptions
Caption1-1.125rem400Attribution, fine print
Stat4-6rem800Key metrics, big numbers

Dark Background Contrast

.slide-dark { background: var(--gray-900); color: var(--gray-50); }
.slide-dark .slide-heading { color: white; }
.slide-dark .slide-body { color: var(--gray-300); }

Use font-display: block for presentation fonts to avoid FOUT during live presentation.

Step 5: Data Visualization for Slides

CSS Bar Chart

.chart-bars { display: flex; align-items: flex-end; gap: 2rem; height: 300px; padding-top: 2rem; }
.bar { flex: 1; height: calc(var(--value) * 1%); background: var(--brand-500); border-radius: 0.5rem 0.5rem 0 0; position: relative; transition: height 0.6s var(--ease-out); }
.bar-value { position: absolute; top: -2rem; font-weight: 700; font-size: 1.25rem; }
.bar-label { position: absolute; bottom: -2rem; font-size: 1rem; color: var(--gray-500); }

CSS Donut Chart

.donut { width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(var(--brand-500) 0% 65%, var(--gray-200) 65% 100%); display: grid; place-items: center; }
.donut::after { content: '65%'; width: 140px; height: 140px; background: white; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800; }

Rules for Slide Charts

  1. Minimize gridlines and labels -- communicate a trend, not precise data
  2. Highlight the key data point (larger, different color, label it)
  3. Animate chart elements on slide entrance for impact

Step 6: Transition and Build Animations

Slide Transitions

.slide { opacity: 0; transition: opacity 0.4s ease; }
.slide.is-active { opacity: 1; }

Progressive Build (Bullet Reveal)

.slide-bullets li { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.slide-bullets li.is-revealed { opacity: 1; transform: translateX(0); }

Number Count-Up

@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
.stat-number { animation: count-up 2s var(--ease-out) forwards; counter-reset: num var(--num); }
.stat-number::after { content: counter(num) '%'; }
@keyframes count-up { from { --num: 0; } to { --num: 65; } }

Step 7: Speaker Notes

<section class="slide" data-notes="Explain the key metric here."><!-- slide content --></section>

.speaker-notes { display: none; }
@media print, screen and (min-width: 1800px) {
  .presentation-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
  .speaker-notes { display: block; padding: 2rem; font-size: 1.125rem; line-height: 1.6; border-left: 3px solid var(--brand-500); }
}

Step 8: Slide Framework Setup

Custom Slide System (No Framework)

.deck { width: 100vw; height: 100vh; overflow: hidden; position: relative; }
.slide { position: absolute; inset: 0; display: flex; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.slide.is-active { opacity: 1; pointer-events: auto; }

let current = 0;
const slides = document.querySelectorAll('.slide');
function goTo(index) {
  slides[current].classList.remove('is-active');
  current = Math.max(0, Math.min(index, slides.length - 1));
  slides[current].classList.add('is-active');
}
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight' || e.key === ' ') goTo(current + 1);
  if (e.key === 'ArrowLeft') goTo(current - 1);
});
goTo(0);

For Reveal.js, load from CDN and customize with CSS variables (--r-heading-font, --r-main-color, --r-link-color).

Step 9: Brand-Consistent Templates

.deck {
  --slide-bg: white; --slide-heading-color: var(--gray-900);
  --slide-text-color: var(--gray-600); --slide-accent: var(--brand-500);
  font-family: var(--slide-font);
}
.slide::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--slide-accent); }
.slide-number { position: absolute; bottom: 1.5rem; right: 2rem; font-size: 0.875rem; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.slide-logo { position: absolute; bottom: 1.5rem; left: 2rem; width: 80px; opacity: 0.3; }

Step 10: Closing / CTA Slide

The last slide stays up longest during Q&A. Include:

  1. A clear next step / CTA (URL, QR code)
  2. Contact information
  3. Optionally: key takeaway in one line
.slide-closing { display: grid; place-items: center; text-align: center; background: var(--gray-900); color: white; }
.closing-headline { font-size: 4rem; font-weight: 800; margin-bottom: 2rem; }
.closing-link { font-size: 2rem; color: var(--brand-300); font-weight: 600; }
.closing-contact { font-size: 1.125rem; opacity: 0.6; display: flex; gap: 2rem; }

Quick Reference

  1. Use 16:9 aspect ratio with generous padding (4-6rem).
  2. One idea per slide. Split complex slides.
  3. Headlines: 3-4.5rem, max 8 words.
  4. Body text: 1.25-1.5rem minimum (readable from back of room).
  5. Use brand colors consistently. Max 3 colors per slide.
  6. Animate builds progressively. Do not animate everything.
  7. Data visualizations: simplify, highlight the key point.
  8. Include speaker notes for every content slide.
  9. Closing slide: CTA + contact. Keep it on screen during Q&A.
  10. Test on a projector or large screen -- colors appear washed out.

Keep looking

Skills are one crate of 628,853. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.