Promptslide

PromptSlide

Create slide decks with AI coding agents. Each slide is a React component styled with Tailwind CSS, with built-in animations and PDF export.

Detect Mode

Check if a PromptSlide project already exists in the current directory:

grep -q '"promptslide"' package.json 2>/dev/null

• Match found → This is an existing PromptSlide project. Go to Authoring Slides.
• No match → No project yet. Go to Creating a New Deck.

---

Creating a New Deck

Step 1: Content Discovery

Before writing any code, ask the user:

1. What is this presentation about? (topic, key message) 2. Who is the audience? (investors, team, customers, conference) 3. How many slides? (suggest 5–10 for a focused deck, 10–15 for a detailed one) 4. Do you have content ready? (outline, bullet points, or should the agent draft it)

Use the answers to plan slide structure before scaffolding.

Step 2: Style Direction

Determine the visual direction before writing any code:

1. Ask if they have brand guidelines — logo, colors, fonts. If yes, use those directly. 2. If no brand guidelines, suggest 2–3 presets from references/style-presets.md. Briefly describe each (one sentence + mood), let the user pick or mix. 3. If the user wants something custom, ask: dark or light? What mood? (professional, playful, dramatic, techy). Then build a custom direction from the building blocks in the presets.

The chosen direction determines what you configure in Steps 3–4:

• Colors → src/globals.css (--primary and other CSS variables)
• Fonts → <link> in index.html + fonts in src/theme.ts
• Layouts → Custom React components in src/layouts/ (see Layouts below)
• Card styles & animations → Applied per-slide based on the direction

Presets are starting points, not rigid templates. The user can change everything — it's all just React components and CSS variables.

Step 3: Scaffold and start

npm create slides my-deck -- --yes
cd my-deck
npm install
npm run dev

The --yes flag skips interactive prompts and uses sensible defaults. Replace my-deck with the user's desired name. The dev server starts at http://localhost:5173 with hot module replacement.

Step 4: Configure branding

Edit src/theme.ts for brand name and logo, and src/globals.css for theme colors. See references/theming-and-branding.md for details.

Step 5: Design Thinking

Before writing any slide code, commit to a clear aesthetic direction and plan the deck holistically. Generic, template-looking slides are worse than no slides at all.

Pick a direction and commit

Choose a distinct visual personality — editorial, brutalist, luxury-minimal, bold geometric, warm organic — and execute it with precision throughout the deck. The key is intentionality, not intensity. A restrained minimal deck executed with perfect spacing and typography is just as strong as a bold maximalist one. What kills a deck is indecision: a little of everything, committing to nothing.

Design each slide for its content

• What does this content want to be? A single powerful stat deserves to be big and alone on the slide. A comparison wants two sides. A list of features might work as clean typography with whitespace — not everything needs cards.
• What's the rhythm of the deck? Alternate between dense and spacious, dark and light, structured and freeform. Three white slides in a row is monotonous. Break runs with a dark "breather" slide, a full-bleed color block, or an asymmetric layout.
• Where are the hero moments? Every deck needs 1–2 slides that break the pattern — an oversized number, a bold color block, a single sentence with generous whitespace. These are what people remember.
• What makes this deck UNFORGETTABLE? Ask this before coding. If the answer is "nothing" — the design direction isn't strong enough.

Don't default to the first layout that comes to mind. Consider 2–3 options for each slide and pick the one that best serves the message.

Share your design plan with the user before coding. Briefly describe the visual direction, color strategy, and your layout approach for each slide (e.g., "slide 3: asymmetric two-column with oversized stat", "slide 7: dark hero slide — the most important in the deck"). Let them approve or adjust — don't just decide and start building.

Step 6: Create your slides

Remove the demo slides from src/slides/ and clear src/deck-config.ts, then follow the authoring instructions below.

---

Authoring Slides

Before Writing Slides

Whether this is a new deck or an existing one, confirm the visual direction with the user before creating slide files. The user's primary color may already be configured from scaffolding — don't overwrite it without asking.

Present your design plan to the user before writing any slide code. Include: 1. The overall visual direction — mood, color strategy, how the primary color will be used (sparingly for impact, not on every element) 2. The layout approach for each slide — not just "cards" but the specific composition (e.g., "asymmetric split with oversized number left, description right") 3. Which slides will be the "hero moments" that break the pattern 4. Font choice and why it fits the deck's personality

For each slide, think about what the content wants to be. See references/slide-design-guide.md for design principles and anti-patterns to avoid.

Architecture

src/
├── layouts/           # Slide layouts — your "master themes", create freely
├── slides/            # Your slides go here
├── theme.ts           # Brand name, logo, fonts
├── deck-config.ts     # Slide order + step counts
├── App.tsx            # Theme provider
└── globals.css        # Theme colors (CSS custom properties)

Key Constraints

• Slide dimensions: 1280×720 (16:9). Content scales automatically in presentation mode.
• Semantic colors: Use text-foreground, text-muted-foreground, text-primary, bg-background, bg-card, border-border — these map to the theme's CSS custom properties.
• Icons: Import from lucide-react (e.g., import { ArrowRight } from "lucide-react").

Creating a Slide

Every slide is a React component that receives SlideProps:

// src/slides/slide-example.tsx
import type { SlideProps } from "promptslide";

export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
  return (
    <div className="bg-background text-foreground flex h-full w-full flex-col p-12">
      <h2 className="text-4xl font-bold">Your Title</h2>
      <div className="flex flex-1 items-center">
        <p className="text-muted-foreground text-lg">Your content</p>
      </div>
    </div>
  );
}

Register it in src/deck-config.ts:

import type { SlideConfig } from "promptslide";
import { SlideExample } from "@/slides/slide-example";

export const slides: SlideConfig[] = [{ component: SlideExample, steps: 0 }];

Layouts (Master Themes)

Layouts are React components in src/layouts/ that wrap slide content. They control structure (headers, footers, backgrounds, padding) and are the closest thing to "master slides" in traditional tools. Change a layout once, every slide using it updates.

Create 2–4 layouts per deck for visual variety.

The scaffolded project includes SlideLayoutCentered as a starter. Create new ones freely — they're just React components. Users can customize padding, backgrounds, header styles, or add entirely new structural patterns.

Animations

Use <Animated> for click-to-reveal steps and <AnimatedGroup> for staggered reveals. Available animations: fade, slide-up, slide-down, slide-left, slide-right, scale.

Critical rules:

• The steps value in deck-config.ts MUST equal the highest step number used in that slide. steps: 0 means no animations.
• <Animated> renders a wrapper <div>. When inside a grid or flex container, you MUST pass layout classes (h-full, w-full, col-span-*) via className on the <Animated>, not only on the inner child — otherwise the wrapper collapses and breaks the layout.

For the full animation API, see references/animation-api.md.

Styling Constraints (PDF Compatibility)

These rules ensure slides look identical on screen and in PDF export:

• No blur: filter: blur() and backdrop-filter: blur() are silently dropped by Chromium's PDF pipeline
• No gradients: bg-gradient-to-* and radial gradients render inconsistently — use solid colors with opacity instead (e.g., bg-primary/5, bg-muted/20). If you want a soft radial glow effect, the project includes /public/images/glow-white.png which can be placed as an absolutely-positioned image — see the theming reference for details.
• No shadows: box-shadow (including shadow-sm, shadow-lg, shadow-2xl) does not export correctly to PDF — use borders or background tints instead (e.g., border border-border, bg-white/5)

For content density rules, design principles, and visual anti-patterns, see references/slide-design-guide.md.

Visual Verification

After creating or modifying a slide, you can capture a screenshot to visually verify it renders correctly. See references/visual-verification.md for the promptslide to-image command and workflow.

Annotations (User Feedback)

Users can click on slide elements in the browser to leave annotations — text feedback attached to specific DOM elements. Annotations are stored in annotations.json at the project root.

Reading Annotations

Check for annotations before starting work:

cat annotations.json 2>/dev/null

Each annotation has:

• slideIndex — which slide (0-based, matching deck-config.ts order)
• slideTitle — human-readable slide name
• target.selector — CSS selector to the element within the slide
• target.textContent — text content of the target element
• target.dataAnnotate — stable identifier if the element has a data-annotate attribute
• body — the user's feedback
• status — "open" or "resolved"

Resolving Annotations

After addressing feedback, update the annotation's status to "resolved" and optionally add a resolution note explaining what was changed. Edit annotations.json directly.

Adding data-annotate Attributes

When creating slides, add data-annotate="descriptive-name" to key elements (headings, feature cards, stat blocks) to make annotations more stable across edits:

<h2 data-annotate="main-title" className="text-4xl font-bold">Title</h2>
<div data-annotate="feature-card-1" className="rounded-2xl bg-card p-6">...</div>

Publish Metadata

After all slides are authored, update .promptslide-lock.json with deckMeta (title, description, 3–6 tags) and per-slide meta entries (title, tags, section) under items. These become pre-filled defaults when the user runs promptslide publish. Read the existing lockfile first and merge — don't overwrite other fields.

Animation API Reference

Animated Component

Reveals content at a specific animation step (click-to-reveal).

import { Animated } from "@/framework/animated"
;<Animated step={1} animation="slide-up" duration={0.4} delay={0.05} className="flex">
  <p>Content</p>
</Animated>

Props

Layout warning: <Animated> renders a wrapper <div>. When used as a direct child of a grid or flex container, you MUST pass layout classes (h-full, w-full, col-span-*, row-span-*, etc.) via className on the <Animated> — not only on the inner child. Without this, the wrapper collapses and breaks the layout.

>

```tsx

// BROKEN — wrapper div collapses, card won't fill the grid cell

<div className="grid h-full grid-cols-2 gap-4">

<Animated step={1} animation="slide-up">

<div className="h-full rounded-2xl bg-card p-6">...</div>

</Animated>

</div>

>

// CORRECT — layout classes on the Animated wrapper

<div className="grid h-full grid-cols-2 gap-4">

<Animated step={1} animation="slide-up" className="h-full">

<div className="h-full rounded-2xl bg-card p-6">...</div>

</Animated>

</div>

```

AnimationType Values

---

AnimatedGroup Component

Staggers multiple children with sequential delays, all triggered by a single step.

import { AnimatedGroup } from "@/framework/animated"
;<AnimatedGroup
  startStep={1}
  animation="slide-up"
  staggerDelay={0.1}
  className="grid grid-cols-3 gap-6"
>
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</AnimatedGroup>

Props

Grid span warning: AnimatedGroup wraps each child in a motion <div> that has no className. CSS grid span classes (col-span-*, row-span-*) and sizing classes (h-full, w-full) on the inner children will NOT affect grid placement — they must be on the direct grid children. For bento/spanning grids or any grid where children need to fill their cells, use individual <Animated> components with className instead:

>

```tsx

<div className="grid h-full grid-cols-3 grid-rows-2 gap-4">

<Animated step={1} animation="slide-down" className="col-span-2 h-full">

<div className="h-full rounded-2xl bg-card p-6">Wide card</div>

</Animated>

<Animated step={1} animation="slide-down" className="row-span-2 h-full">

<div className="h-full rounded-2xl bg-card p-6">Tall card</div>

</Animated>

</div>

```

---

Step Count Rules

• Steps are 1-indexed (step 1 = first click)
• Multiple <Animated> elements can share the same step (they appear together)
• The steps value in deck-config.ts must equal the highest step number used in that slide
• If a slide has no <Animated> components, use steps: 0

// Slide uses step={1}, step={2}, step={3}
{ component: MySlide, steps: 3 }

// Slide has no animations
{ component: MySlide, steps: 0 }

Common Patterns

Sequential cards — each card gets its own step:

<Animated step={1} animation="slide-up"><Card>A</Card></Animated>
<Animated step={2} animation="slide-up" delay={0.05}><Card>B</Card></Animated>
<Animated step={3} animation="slide-up" delay={0.1}><Card>C</Card></Animated>
// deck-config: steps: 3

Grouped by row — top row on step 1, bottom row on step 2 (note className="h-full" for grid cells):

{
  items.map((item, index) => (
    <Animated
      key={item.title}
      step={index < 3 ? 1 : 2}
      animation="slide-up"
      delay={(index % 3) * 0.05}
      className="h-full"
    >
      <Card>{item.title}</Card>
    </Animated>
  ))
}
// deck-config: steps: 2

All at once with stagger — single step, visual stagger via delay:

{
  items.map((item, index) => (
    <Animated key={item.name} step={1} animation="slide-up" delay={index * 0.05}>
      <Row>{item.name}</Row>
    </Animated>
  ))
}
// deck-config: steps: 1

---

Morph Animations

Smoothly transition shared elements between consecutive slides using Framer Motion's layoutId.

Note: Morph is currently disabled in fullscreen presentation mode due to CSS transform conflicts with Framer Motion's layoutId calculations.

Morph

import { Morph } from "@/framework/morph"

// Slide 1 — large version
<Morph layoutId="hero-title">
  <h1 className="text-6xl">Title</h1>
</Morph>

// Slide 2 — small version (same layoutId = morphs between them)
<Morph layoutId="hero-title">
  <h1 className="text-2xl">Title</h1>
</Morph>

MorphGroup + MorphItem

Group multiple morph elements together:

import { MorphGroup, MorphItem } from "@/framework/morph"
;<MorphGroup groupId="card" className="flex gap-4">
  <MorphItem id="icon" prefix="card">
    <Icon />
  </MorphItem>
  <MorphItem id="title" prefix="card">
    <h2>Title</h2>
  </MorphItem>
</MorphGroup>

MorphItem generates layoutIds by combining prefix and id (e.g., "card-icon", "card-title").

MorphText

Specialized for text that changes size between slides:

import { MorphText } from "@/framework/morph"

// Slide 1
<MorphText layoutId="heading" as="h1" className="text-6xl">Title</MorphText>

// Slide 2
<MorphText layoutId="heading" as="h2" className="text-2xl">Title</MorphText>

The as prop accepts: "h1", "h2", "h3", "h4", "p", "span" (default: "span").

---

Animation Intent Guide

Choose animations based on the mood and purpose of the presentation, not just technical preference.

General rules:

• Faster animations (0.2–0.3s) feel professional; slower (0.5–0.8s) feel dramatic
• Match stagger direction to reading direction (top-to-bottom = slide-up, left-to-right = slide-left)
• Use scale sparingly — it draws the most attention, so reserve it for key moments
• A slide with no animations (steps: 0) is perfectly fine for simple content slides

---

Animation Config Constants

All timing values from src/framework/animation-config.ts:

Durations (seconds)

Spring Configurations

Distances (pixels)

Slide Dimensions

Slide Design Guide

Design visually diverse, clean slide decks. Every slide should look different from its neighbors — vary layouts, card styles, and animations throughout the deck.

---

Content Density

Slides are projected, not read. Enforce strict limits per slide type — if content exceeds them, split across multiple slides.

Title slides:

• 1 heading + 1 subtitle (max 10 words)
• Optional: logo, tagline, or single visual

Content slides:

• 1 heading + 4–6 bullet points, OR
• 1 heading + 2 short paragraphs (2–3 sentences each), OR
• 1 heading + 2–4 cards/items in a grid

Data slides:

• 1 heading + 1 chart/table/diagram
• Max 6 rows in a table, max 4 data points in a comparison

Quote slides:

• 1 quote (max 30 words) + attribution

Split rule: If you're writing a 7th bullet point or a 3rd paragraph, stop — create a second slide instead. Two clean slides always beat one cramped one.

---

Design Principles

Let the content shape the layout. Before coding each slide, ask: what is this content trying to say, and what's the best way to show it?

• A single important number → make it huge, give it the whole slide
• A comparison or before/after → side by side, not stacked cards
• A list of features → maybe clean typography with whitespace is enough — not everything needs cards
• A key message or quote → let it breathe with generous space around it
• A process or timeline → show the flow visually, not as a grid of boxes

Create rhythm across the deck. A dense data slide followed by a spacious quote creates contrast. Alternate between structured and freeform, tight and airy. Every deck should have 1–2 "hero moments" — slides that break the pattern with oversized typography, a bold color block, or a single idea given the whole canvas.

Use visual variety as a tool, not a rule. Mix card treatments (bordered, tinted, accent-border, none), try asymmetric grids (col-span-2 + col-span-3), vary heading sizes, and match animations to the content's energy. The goal isn't variety for its own sake — it's that each slide feels intentionally designed for what it's showing.

---

Visual Anti-Patterns

Avoid these common mistakes that make slides look generic or "AI-generated":

Overused patterns:

• Same card style on every slide (rounded-xl border bg-card p-8 everywhere)
• Uniform icon-title-description grids on 3+ consecutive slides
• Centering everything — use left-aligned, asymmetric, or split layouts for variety
• Every heading the same size and weight — vary hierarchy with text-2xl to text-6xl

Generic aesthetics:

• Purple/indigo as the default accent on every deck — match the brand or pick a distinctive palette
• Low-contrast muted colors everywhere — use at least one bold accent or contrast moment
• Identical spacing on all slides — let some content breathe with generous whitespace, pack others tightly for energy

What to do instead:

• Mix at least 3 different visual treatments across a deck: full-bleed color, cards, typography-driven, data-heavy, asymmetric grid
• Use one "hero moment" slide with oversized typography or a single bold number
• Alternate between dense and spacious slides for rhythm
• Use color blocking (full-width bg-primary sections) sparingly but deliberately for impact

---

Distinctive Aesthetics (Adapted for Slides)

Slides must look genuinely designed, not AI-generated. Apply these principles within the PDF compatibility constraints (no gradients, no blur, no shadows).

Typography as a design tool

Fonts are projected large and seen at a distance — they carry real visual weight in slides.

• Choose fonts that fit the deck's personality. Don't default to the first familiar name. Browse Google Fonts or Fontshare and pick something that matches the mood. See theming-and-branding.md for pairing principles.
• Use weight contrast for hierarchy. Headings at 800–900 weight, body at 400. Heavy titles against light body text creates structure without needing color or size alone.
• Vary heading sizes across slides. Not every title needs to be text-3xl. A hero stat at text-8xl next to a slide with a text-xl heading creates rhythm.

Color as a weapon, not wallpaper

• Use the primary color sparingly and deliberately. A blue accent bar on every slide means none of them stand out. Save bold color for 3–4 key moments: the cover, a chapter divider, a total-cost callout, the closing.
• Dominant + accent outperforms even distribution. A mostly dark/white deck with sharp blue accents on key elements has more impact than blue sprinkled everywhere at equal weight.
• Refine raw brand colors for screen use. Pure colors like #0000FF, #FF0000, #00FF00 are harsh on screens and projectors. Shift them slightly (e.g., #0033FF, #E63946, #00B865) — still recognizably the brand, but less retina-searing.

Atmosphere within PDF constraints

You can't use gradients, blur, or box-shadow — but you can create depth and atmosphere:

• Solid color blocks as design elements — a bold colored panel, a dark sidebar, a full-bleed background change
• Glow overlays — the project includes glow-white.png (/public/images/) which can add subtle radial depth on dark slides. Position it absolute inset-0 with object-cover and opacity-30 to opacity-50. One option among many — not every deck needs it.
• Opacity layers — bg-white/5, bg-primary/10 on dark backgrounds create subtle depth
• Borders as structure — colored top borders (border-t-[3px] border-primary) on cards create accent without shadows
• Image overlays at low opacity — brand patterns or textures at 5–10% opacity add atmosphere without competing with content
• Asymmetric layouts — a 60/40 split feels more designed than 50/50. Grid-breaking elements (a column that spans two rows, a stat that overlaps a section boundary) add visual interest.

The "unforgettable" test

Before finalizing a deck, ask: if someone saw this deck for 10 seconds, what would they remember? If the answer is "nothing specific" — the design needs a stronger hero moment. Every deck needs at least one slide that makes someone pause: an oversized number, a bold color block, a single sentence with dramatic whitespace, or an unexpected layout that breaks the grid.

Style Presets

Curated visual directions for slide decks. Use these as mood inspiration, not as a spec to follow row by row. Each preset describes a color palette, card treatment, and animation feel — but the actual design of each slide should come from thinking about what the content needs (see the Design Thinking step and slide-design-guide.md). Choose fonts separately based on the deck's personality (see theming-and-branding.md).

---

Dark Themes

1. Electric Noir

High-contrast dark background with a single vivid accent color. Large section numbers or oversized typography as visual anchors.

Design philosophy: Let bold scale contrasts do the heavy lifting — oversized numbers next to small labels, huge headlines against dark space. Slides should feel cinematic, not busy.

2. Midnight Studio

Warm dark theme with amber/gold accents. Sophisticated and editorial.

Design philosophy: The serif/sans contrast carries the visual weight — let typography be the design element. Reach for pull quotes, editorial layouts, and whitespace over card grids.

3. Neon Terminal

Developer/hacker aesthetic. Monospace type, green-on-dark, terminal feel.

Design philosophy: Lean into the code aesthetic — monospace text, command-line prefixes, and tight structure are the visuals. Slides should feel like well-formatted terminal output, not design artifacts.

---

Light Themes

4. Clean Corporate

Minimal, professional white theme. No visual noise.

Design philosophy: Restraint is the design. Use generous whitespace and clean typography to convey authority. Let data and key numbers be the visual anchors — the absence of decoration is the style.

5. Warm Editorial

Magazine-inspired layout with warm neutrals and serif headings.

Design philosophy: Think magazine spread, not slide deck. Use asymmetric text layouts, horizontal rules as structure, and pull quotes as visual anchors. Cards would fight the editorial feel — let typography and spacing do the work.

6. Pastel Soft

Friendly, approachable light theme with soft pastels.

Design philosophy: Warmth through color, not complexity. Tinted card backgrounds and rounded shapes create friendliness — lean into playful color variety across slides rather than uniform structure.

---

Specialty Themes

7. Grid Rational

Bauhaus/Swiss design. Geometric precision, strong grid, bold color blocks.

Design philosophy: The grid is the design. Use bold color blocks, sharp edges, and geometric layouts. Every element should feel placed with intention — asymmetric grids and strong vertical/horizontal divisions over soft cards.

8. Deep Night

Rich dark theme with deep blue-to-purple color palette. Polished and modern.

Design philosophy: Depth through layered opacity — cards at different transparency levels create a sense of dimension. Vary visual weight across slides with solid primary accents as focal points. Use solid colors with opacity (e.g., bg-white/5, bg-primary/10) — not gradients.

---

Using a Preset

1. Set the --primary color in src/globals.css (in the :root block) 2. Load fonts via <link> in index.html (Google Fonts or Fontshare) 3. Set fonts.heading and fonts.body in src/theme.ts 4. Follow the card style and animation recommendations when building slides 5. Use the "signature" element on at least 1–2 slides for visual identity

Presets are starting points. Mix elements across presets if the brand calls for it.

Theming & Branding Reference

Brand Color

Change your brand color by editing --primary in src/globals.css:

:root {
  --primary: oklch(0.55 0.2 250);
}

Example Brand Colors

---

OKLCH Color System

Format: oklch(lightness chroma hue)

Hue reference: 0=red, 30=orange, 60=yellow, 120=green, 195=teal, 250=blue, 300=purple, 330=pink

Tips for picking values:

• Primary: lightness 0.5–0.65, chroma 0.15–0.25
• Keep chroma above 0.15 for vibrant brand colors

---

All CSS Variables

:root {
  --background: oklch(0.159 0 0); /* Near-black */
  --foreground: oklch(0.985 0 0); /* Near-white */

  --card: oklch(0.205 0 0); /* Dark gray */
  --card-foreground: oklch(0.985 0 0);

  --primary: oklch(0.55 0.2 250); /* Brand color */
  --primary-foreground: oklch(0.985 0 0); /* White text on primary */

  --secondary: oklch(0.985 0 0);
  --secondary-foreground: oklch(0.141 0 0);

  --muted: oklch(0.305 0 0); /* Muted backgrounds */
  --muted-foreground: oklch(0.712 0 0); /* Secondary text */

  --accent: oklch(0.305 0 0);
  --accent-foreground: oklch(0.925 0 0);

  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);

  --border: oklch(0.269 0 0); /* Borders */
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);

  --radius: 0.625rem;
}

---

Semantic Color Classes

Use these Tailwind classes for consistent theming:

---

Theme Setup

Configure in src/theme.ts:

import type { ThemeConfig } from "promptslide";

export const theme: ThemeConfig = {
  name: "Acme Inc",
  logo: {
    full: "/logo.svg",
    icon: "/icon.svg",            // Compact variant (title slides)
    fullLight: "/logo-white.svg", // For dark backgrounds
  },
  colors: {
    primary: "oklch(0.55 0.2 250)",
    secondary: "oklch(0.6 0.15 200)",
    accent: "oklch(0.7 0.2 50)",
  },
  fonts: {
    heading: "Inter",
    body: "Inter",
  },
};

Everything is optional except name. Omitted values fall back to globals.css defaults.

• Place your logo file in the public/ directory (e.g., public/logo.svg)
• The logo appears in the footer of every slide (unless hideFooter is set)
• Logo renders at h-8 w-auto (32px height, auto width)
• Colors use OKLCH format and are injected as CSS variable overrides at runtime

---

Background Glow (Optional)

Projects include /public/images/glow-white.png — a neutral radial glow PNG that can add subtle depth on dark slides. It's one design option, not a default — use it when it fits the deck's aesthetic.

Usage: add as the first child inside a slide's root <div>:

<img
  src="/images/glow-white.png"
  alt=""
  className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-40"
/>

Adjust opacity-40 to control intensity. The glow is a PNG (not a CSS gradient) for PDF export compatibility. To create a brand-colored variant, regenerate the PNG using the project's primary color RGB values (derived from the OKLCH --primary variable).

Generation script (replace the white RGB values with your brand color):

import numpy as np
from PIL import Image

w, h = 890, 570
cx, cy = w / 2, h * 0.42
img = np.zeros((h, w, 4), dtype=np.uint8)
y, x = np.mgrid[0:h, 0:w]
dx = (x - cx) / (w * 0.45)
dy = (y - cy) / (h * 0.45)
dist = np.sqrt(dx**2 + dy**2)
alpha = np.clip(np.exp(-dist**2 * 2.0) * 80, 0, 255).astype(np.uint8)
img[:, :, 0] = 255  # R — replace with brand color
img[:, :, 1] = 255  # G — replace with brand color
img[:, :, 2] = 255  # B — replace with brand color
img[:, :, 3] = alpha
Image.fromarray(img, 'RGBA').save('public/images/glow-white.png')

---

Font Pairings

Load fonts via <link> in index.html (Google Fonts or Fontshare), then set them in src/theme.ts.

Choose fonts that match the deck's personality. Browse Google Fonts or Fontshare and pick something that fits the mood — don't default to the first familiar name.

Pairing principles:

• One font family for the whole deck is fine — don't force a pairing
• Serif headings + sans body = classic contrast (editorial, formal)
• Sans headings + sans body = modern, clean (most presentations)
• Monospace everything = developer/hacker aesthetic only
• Avoid pairing two serif fonts — it gets busy
• Avoid defaulting to Inter, Roboto, or Arial — they're readable but generic. If the brand doesn't mandate a specific font, choose one with more character.

Visual Verification

Capture a slide as a PNG screenshot to visually verify it renders correctly.

Usage

npx promptslide to-image <slide-path> [-o <output-file>]

• <slide-path>: Slide file relative to project root (e.g. src/slides/slide-title.tsx). This is a positional argument — pass the file path directly, not a flag.
• -o <output-file>: Optional output path. Defaults to <slide-name>.png in the current directory.

Important: The command takes a file path, not a slide number. Do NOT use --slide 1 or --port flags — they don't exist and will cause a timeout error.

Workflow

1. Identify the slide file. If unclear, glob for src/slides/**/*.tsx. 2. Run npx promptslide to-image <slide-path> from the project root. 3. Read the resulting PNG with the Read tool to visually inspect it. 4. If the slide has visual issues (layout, spacing, content), fix the code and re-capture.

What to Check

• Layout and spacing look correct
• Text is readable and not clipped
• Colors and styling match expectations
• Animations render in their final state (all steps shown)

If something looks off, iterate on the slide code and re-capture until it looks right.