Presentation

---
name: presentation
description: >-
  Cria apresentacoes HTML navegaveis em 16:9 e documentos visuais em scroll
  vertical usando o design system da Vector Labs. Use para pitch decks,
  propostas, workshops, one-pagers e relatorios visuais.
license: Apache-2.0
compatibility: claude-code
allowed-tools: Read Write Edit Glob Bash
metadata:
  author: vector-labs
  version: "1.0"
tags: [slides, design]
complexity: intermediate
featured: true
---

# Presentation Skill

Create and edit HTML presentations (slide decks) and visual documents using the Vector Labs design system.

## Two Modes

| | Slide Deck | Visual Document |
|---|---|---|
| **Layout** | Horizontal, 16:9, one slide at a time | Vertical, scrollable, reading width |
| **Navigation** | Keyboard/touch/buttons | Natural scroll |
| **Output** | Engine folder + slide files | Single self-contained HTML |
| **Use cases** | Pitch decks, propostas, workshops | One-pagers, relatórios, briefs, guias |
| **Engine** | Copies `3-resources/presentations/engine/` | No engine needed |

## Key References (read on demand)

- **Slide catalog** (14 types, full HTML/CSS): `3-resources/presentations/slide-catalog.md`
- **Design system** (colors, typography, spacing, animations): `3-resources/presentations/design-system.md`
- **Engine** (copy for new decks): `3-resources/presentations/engine/`
- **Palette catalog**: `references/palettes.md` (bundled)
- **Document sections** (base patterns for visual docs): `references/document-sections.md` (bundled)
- **README**: `3-resources/presentations/README.md`

## Initial Flow (both modes)

1. Read the document/project the user points to (or their description)
2. Ask using AskUserQuestion:
   - **Formato**: Slide deck ou documento visual?
   - **Objetivo**: Qual o objetivo? (pitch, proposta, update, relatório, brief...)
   - **Público**: Quem vai ver?
   - **Tom**: Formal, casual, técnico?
3. Read `references/palettes.md`, ask user to choose palette or create custom
4. Proceed to the appropriate workflow below

---

## Slide Deck

### Slide Types (quick reference)

1. **Cover** — Title + subtitle + date (dark)
2. **Statement** — Single powerful message
3. **Problem** — Two-column reality vs consequences
4. **Market/Comparison** — 2-4 option cards
5. **TAM/Data Viz** — Market sizing, left text + right visual
6. **Roadmap/Flow** — Data flows, architecture, features
7. **Pricing/Proposal** — Two paths with highlighted option
8. **Closing** — Logo, next steps, CTA
9. **Section Divider** — Section number + title
10. **Team** — Grid of members
11. **Quote/Testimonial** — Blockquote with attribution
12. **Single Stat Hero** — One massive number
13. **Timeline** — Milestones with dots and dates
14. **Thank You/Contact** — Generic closing

For full HTML/CSS of each type, read `3-resources/presentations/slide-catalog.md`.

### New Deck

1. Suggest slide composition (which types, what order, brief content outline per slide)
2. Confirm with user. Iterate until approved.
3. Read `3-resources/presentations/slide-catalog.md` for HTML/CSS templates
4. Read `3-resources/presentations/design-system.md` for tokens
5. Copy `3-resources/presentations/engine/` to target directory
6. Edit `parts/head.html`: set deck title, add stylesheet `<link>` tags
7. Generate each slide as `slides/NN-name.html`:
   - Single `<div class="slide" data-theme="dark|light">` per file
   - **Every `<div>` must have a matching `</div>`** — `build.sh` validates this and will refuse to build if tags are unbalanced (unclosed divs cause slides to nest inside each other, breaking navigation)
   - Use `.anim-in` + `.d1`..`.d8` for animation stagger
   - Use `.slide-label`, `.slide-title`, `.slide-inner` structure
   - Lucide icons inline SVG when needed
8. If non-default palette: create `styles/theme.css` with CSS overrides, add `<link>` to `parts/head.html`
9. If architecture diagrams: add anime.js CDN + `architecture.js` + hooks in `parts/foot.html`
10. Run `./build.sh` to assemble `index.html`

#### Slide HTML pattern

```html
<div class="slide" data-theme="dark">
  <div class="slide-inner">
    <span class="slide-label anim-in d1">LABEL</span>
    <h1 class="slide-title anim-in d2">Title</h1>
    <div class="anim-in d3"><!-- content --></div>
  </div>
</div>
```

### Edit Existing Deck

1. List the `slides/` directory to see current slides
2. Read existing slide files
3. Ask what to change: add slide, edit content, remove, reorder, change palette
4. Confirm before writing
5. After changes: run `./build.sh` to reassemble `index.html`

---

## Visual Document

### New Document

1. Read `references/document-sections.md` for base HTML structure and section patterns
2. Suggest document structure (which sections, content outline)
3. Confirm with user. Iterate until approved.
4. Generate single self-contained HTML file:
   - Google Fonts CDN for typography
   - Inline `<style>` with design system tokens + palette
   - `.doc` container, width controlled by `--doc-width` variable
   - Compose from base sections (hero, stats, cards, text, callout, table, divider)
   - Invent new section patterns as needed, following design tokens from `references/document-sections.md`
5. Dark or light variant based on content and user preference

### Edit Existing Document

1. Read the existing HTML file
2. Ask what to change: add section, edit content, change palette, restructure
3. Confirm before writing

---

## Shared Guidelines

- **Typography**: Fraunces (titles, 800), Plus Jakarta Sans (body), JetBrains Mono (labels/data)
- **Labels**: JetBrains Mono 11px, uppercase, letter-spacing 0.15em, accent color
- **Icons**: Lucide inline SVG, stroke-width 2, 16-24px
- **Palette**: Always ask and apply from catalog or custom. Read `references/palettes.md`.
- **Confirm before generating**: Always present plan to user before writing files

# Seções Base — Documentos Visuais

Padrões reutilizáveis para documentos HTML verticais. Usar como base e adaptar livremente conforme o conteúdo. Novas seções podem ser inventadas seguindo os mesmos tokens de design.

## Estrutura HTML Base

Cada documento visual é um HTML único self-contained:

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título do Documento</title>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    /* Palette — replace with chosen palette from palettes.md */
    :root {
      /* Example: Vector Labs (swap entire block per palette) */
      --primary-dark: #2D2D2D;
      --accent: #E04B1A;
      --neutral: #8A8085;
      --surface-0: #F5F0EB;
      --surface-1: #EDE6DF;
      --surface-2: #E0D8D0;
      --surface-3: #D4CBC2;
      --surface-4: #C8BEB4;
      --text-primary: #2D2D2D;
      --text-secondary: #5A5A5A;
      --text-dim: #8A8085;

      /* Structural tokens — consistent across palettes */
      --doc-width: 900px;
      --radius: 12px;
      --gap-section: 56px;
      --gap-section-sm: 32px;
      --gap-card: 24px;
      --gap-element: 12px;
      --shadow-sm: 0 1px 4px rgba(45, 45, 45, 0.06);
      --shadow-md: 0 2px 8px rgba(45, 45, 45, 0.08);
      --shadow-lg: 0 4px 16px rgba(45, 45, 45, 0.12);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: var(--text-primary);
      background: var(--surface-0);
      line-height: 1.6;
    }

    .doc {
      max-width: var(--doc-width);
      margin: 0 auto;
      padding: 64px 32px;
    }

    /* Typography */
    .doc h1 { font-family: 'Fraunces', serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 16px; }
    .doc h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 28px; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 12px; }
    .doc h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
    .doc p { font-size: 16px; margin-bottom: 16px; color: var(--text-secondary); }
    .doc .label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); }
    .doc .mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

    /* Section spacing */
    .section { margin-bottom: var(--gap-section); }
    .section-sm { margin-bottom: var(--gap-section-sm); }
  </style>
</head>
<body>
  <div class="doc">
    <!-- seções aqui -->
  </div>
</body>
</html>
```

## Dark variant

Para documentos com fundo escuro, trocar body styles:

```css
body {
  background: var(--primary-dark);
  color: #fff;
}
.doc p { color: rgba(255,255,255,0.7); }
.doc h1, .doc h2, .doc h3 { color: #fff; }
```

## Seções Base

### Hero / Header

Título principal com metadata. Primeira coisa do documento.

```html
<header class="section hero">
  <span class="label">Tipo do Documento</span>
  <h1>Título Principal do Documento</h1>
  <p class="hero-subtitle">Subtítulo ou descrição breve do que se trata</p>
  <div class="hero-meta">
    <span class="mono">Vector Labs</span>
    <span class="meta-sep">·</span>
    <span class="mono">Fev 2026</span>
  </div>
</header>
```

```css
.hero-subtitle { font-size: 20px; color: var(--text-secondary); max-width: 640px; }
.hero-meta { display: flex; gap: 8px; align-items: center; margin-top: 24px; color: var(--text-dim); }
.meta-sep { color: var(--neutral); }
```

### Stat Block

1 a 4 números grandes em linha. Bom pra métricas, KPIs, highlights.

```html
<div class="section stats-grid">
  <div class="stat-card">
    <span class="stat-value">R$ 2.4M</span>
    <span class="stat-label">Receita Anual</span>
  </div>
  <div class="stat-card">
    <span class="stat-value">47%</span>
    <span class="stat-label">Crescimento YoY</span>
  </div>
  <div class="stat-card">
    <span class="stat-value">12</span>
    <span class="stat-label">Clientes Ativos</span>
  </div>
</div>
```

```css
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap-card); }
.stat-card { background: var(--surface-1); border-radius: var(--radius); padding: 24px; border: 1px solid var(--surface-2); border-top: 2px solid var(--accent); box-shadow: var(--shadow-md); }
.stat-value { font-family: 'Fraunces', serif; font-weight: 800; font-size: 36px; display: block; color: var(--accent); }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-top: 8px; display: block; }
```

### Card Grid

Cards com ícone, título e descrição. 2-3 colunas.

```html
<div class="section">
  <span class="label">Seção</span>
  <h2>Título da Seção</h2>
  <div class="card-grid">
    <div class="card">
      <div class="card-icon"><!-- Lucide SVG inline --></div>
      <h3>Card Title</h3>
      <p>Descrição do card com informações relevantes.</p>
    </div>
    <!-- mais cards -->
  </div>
</div>
```

```css
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap-card); margin-top: var(--gap-card); }
.card { background: var(--surface-1); border-radius: var(--radius); padding: 28px; border: 1px solid var(--surface-2); box-shadow: var(--shadow-md); }
.card-icon { width: 40px; height: 40px; background: var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 16px; }
.card-icon svg { width: 20px; height: 20px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14px; margin-bottom: 0; }
```

### Texto com Label

Seção de texto corrido com label de categoria.

```html
<div class="section">
  <span class="label">Contexto</span>
  <h2>Título da Seção</h2>
  <p>Parágrafo com texto corrido explicando o conteúdo em detalhe...</p>
  <p>Mais parágrafos conforme necessário.</p>
</div>
```

### Callout / Quote

Destaque visual para citações ou informações importantes.

```html
<div class="callout">
  <p>"Citação ou informação em destaque que merece atenção especial."</p>
  <span class="callout-attr">— Atribuição</span>
</div>
```

```css
.callout { border-left: 3px solid var(--accent); padding: 24px 28px; background: var(--surface-1); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--gap-section-sm) 0; border-top: 1px solid var(--surface-2); border-right: 1px solid var(--surface-2); border-bottom: 1px solid var(--surface-2); box-shadow: var(--shadow-sm); }
.callout p { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; }
.callout-attr { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); }
```

### Tabela

Tabela estilizada para dados estruturados.

```html
<div class="section">
  <span class="label">Dados</span>
  <h2>Título</h2>
  <div class="table-wrap">
    <table>
      <thead><tr><th>Coluna A</th><th>Coluna B</th><th>Coluna C</th></tr></thead>
      <tbody>
        <tr><td>Valor</td><td>Valor</td><td>Valor</td></tr>
      </tbody>
    </table>
  </div>
</div>
```

```css
.table-wrap { overflow-x: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; }
th { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--surface-2); }
td { padding: 12px 16px; border-bottom: 1px solid var(--surface-2); font-size: 14px; }
```

### Divider

Separação visual entre seções.

```html
<hr class="divider">
```

```css
.divider { border: none; height: 1px; background: var(--surface-3); margin: var(--gap-section) 0; }
```

## Princípios para Novas Seções

Ao inventar seções não catalogadas, seguir:

- **Containers**: `border-radius: var(--radius)`, `background: var(--surface-1)`, `padding: 24-28px`, `border: 1px solid var(--surface-2)`, `box-shadow: var(--shadow-md)`
- **Spacing**: usar as variáveis `--gap-card`, `--gap-section`, `--gap-element` — nunca valores hardcoded
- **Depth**: todo card/container precisa de border + shadow para separar do fundo. Sem isso, cards se perdem no background.
- **Accent borders**: usar `border-top: 2px solid var(--accent)` em cards de destaque (stats, KPIs). Usar `border-left: 3px solid var(--accent)` em cards sequenciais (métodos, steps) e callouts.
- **Internal separators**: cards com múltiplas zonas (ex: descrição + prós/contras) devem ter `border-top: 1px solid var(--surface-2)` separando as zonas.
- **Labels**: sempre JetBrains Mono 11px uppercase, cor `--accent`
- **Títulos**: Fraunces para h1/h2, Plus Jakarta Sans para h3+
- **Dados/números**: Fraunces bold para destaque, JetBrains Mono para meta
- **Ícones**: Lucide icons, inline SVG, stroke-width 2, 16-24px
- **Cores de fundo**: usar a escala surface-0..4 para backgrounds. Cards usam `var(--surface-1)` com border para contraste.

# Catálogo de Paletas

Cada paleta define CSS custom properties que fazem override das variáveis do engine em `base.css`.
Aplicar via bloco `<style>` no `index.html` do deck ou num arquivo `styles/theme.css`.

## Vector Labs (default)

**Vibe**: Dark profissional com acento laranja vibrante
**Uso**: Pitch decks Vector Labs, propostas comerciais, apresentações de produto

```css
:root {
  --primary-dark: #2D2D2D;
  --accent: #E04B1A;
  --neutral: #8A8085;
  --surface-0: #F5F0EB;
  --surface-1: #EDE6DF;
  --surface-2: #E0D8D0;
  --surface-3: #D4CBC2;
  --surface-4: #C8BEB4;
  --text-primary: #2D2D2D;
  --text-secondary: #5A5A5A;
  --text-dim: #8A8085;
}
```

## Mise (Sage + Argila)

**Vibe**: Orgânico, sofisticado, terroso
**Uso**: Produto Mise, apresentações com identidade Mise

```css
:root {
  --primary-dark: #1A2E22;
  --accent: #C4725A;
  --neutral: #8A9A8F;
  --surface-0: #F5F2EE;
  --surface-1: #EBE6E0;
  --surface-2: #DDD6CC;
  --surface-3: #C4B8AA;
  --surface-4: #A89888;
  --text-primary: #1A2E22;
  --text-secondary: #3D5A47;
  --text-dim: #8A9A8F;
}
```

## Tech Slate

**Vibe**: Moderno, tech, confiável
**Uso**: Demos de SaaS, pitches de tecnologia, apresentações técnicas

```css
:root {
  --primary-dark: #0F172A;
  --accent: #3B82F6;
  --neutral: #64748B;
  --surface-0: #F8FAFC;
  --surface-1: #F1F5F9;
  --surface-2: #E2E8F0;
  --surface-3: #CBD5E1;
  --surface-4: #94A3B8;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-dim: #64748B;
}
```

## Corporate Clean

**Vibe**: Formal, neutro, institucional
**Uso**: Propostas formais, relatórios, apresentações corporativas

```css
:root {
  --primary-dark: #1E293B;
  --accent: #2563EB;
  --neutral: #6B7280;
  --surface-0: #FFFFFF;
  --surface-1: #F9FAFB;
  --surface-2: #F3F4F6;
  --surface-3: #E5E7EB;
  --surface-4: #D1D5DB;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-dim: #6B7280;
}
```

## Creative Bold

**Vibe**: Energético, vibrante, ousado
**Uso**: Projetos criativos, workshops, apresentações de brainstorm

```css
:root {
  --primary-dark: #1A0A2E;
  --accent: #F43F5E;
  --neutral: #A78BFA;
  --surface-0: #FFF7ED;
  --surface-1: #FFEDD5;
  --surface-2: #FED7AA;
  --surface-3: #FDBA74;
  --surface-4: #FB923C;
  --text-primary: #1A0A2E;
  --text-secondary: #4C1D95;
  --text-dim: #7C3AED;
}
```

## Minimal Light

**Vibe**: Clean, arejado, minimalista
**Uso**: Apresentações internas, documentação, updates de equipe

```css
:root {
  --primary-dark: #18181B;
  --accent: #18181B;
  --neutral: #A1A1AA;
  --surface-0: #FAFAFA;
  --surface-1: #F4F4F5;
  --surface-2: #E4E4E7;
  --surface-3: #D4D4D8;
  --surface-4: #A1A1AA;
  --text-primary: #18181B;
  --text-secondary: #3F3F46;
  --text-dim: #71717A;
}
```

## Warm Earth

**Vibe**: Acolhedor, natural, artesanal
**Uso**: Lifestyle, hospitalidade, marcas com identidade orgânica

```css
:root {
  --primary-dark: #292524;
  --accent: #C2410C;
  --neutral: #A8A29E;
  --surface-0: #FAFAF9;
  --surface-1: #F5F5F4;
  --surface-2: #E7E5E4;
  --surface-3: #D6D3D1;
  --surface-4: #A8A29E;
  --text-primary: #1C1917;
  --text-secondary: #44403C;
  --text-dim: #78716C;
}
```

## Criar Paleta Custom

Se nenhuma paleta se encaixa, ajudar o usuário a criar uma. Perguntar:

1. **Cor principal da marca** (hex ou nome) — vira `--accent`
2. **Tom de fundo** (escuro, claro, neutro) — define `--primary-dark` e `--surface-*`
3. **Mood** (formal, casual, energético, minimalista) — ajusta contraste e intensidade

Gerar as variáveis seguindo a mesma estrutura: primary-dark, accent, neutral, surface-0..4, text-primary/secondary/dim.

## Tokens Estruturais (opcional por paleta)

As variáveis estruturais abaixo têm defaults definidos em `document-sections.md`. Paletas podem fazer override quando necessário:

```css
/* Defaults — só fazer override se a paleta exigir */
--radius: 12px;
--shadow-sm: 0 1px 4px rgba(45, 45, 45, 0.06);
--shadow-md: 0 2px 8px rgba(45, 45, 45, 0.08);
--shadow-lg: 0 4px 16px rgba(45, 45, 45, 0.12);
```

### Quando ajustar

- **Paletas com `surface-0` claro (ex: Corporate Clean, `#FFFFFF`)**: shadows precisam ser mais fortes para criar separação. Considerar `--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1)`.
- **Paletas com surfaces de alto contraste (ex: Creative Bold)**: borders sutis podem desaparecer. Considerar shadows mais fortes ou borders mais visíveis.
- **Documentos com fundo escuro** (`body { background: var(--primary-dark) }`): inverter a lógica de shadow — usar `rgba(0, 0, 0, 0.25)` ou mais, já que shadows claras são invisíveis em fundos escuros.