---
name: present
description: 'Skills for business: Present. Create a professional, animated presentation that runs in any web browser as one self-contained HTML file, or convert an existing PowerPoint (.pptx) or PDF deck into one. Includes paging, keyboard, click, touch and clicker navigation, a control bar, slide menu, speaker notes, fullscreen, blank screen, progress bar and print-to-PDF. Use when: presentation, slides, slide deck, pitch, keynote, steering committee, board update, kick-off, status report, project update, convert PowerPoint to HTML, browser presentation, animated slides.'
---

# Present

Part of the **Skills for business** series. Present turns a topic, a set of notes or an existing PowerPoint into a presentation that runs offline in the browser. Its fixed canvas scales to the screen; inspect the delivered size and actual fonts before claiming fidelity.

The person asking is usually **not technical**, for example a project manager. Do the technical work yourself, explain choices in plain language, and never ask them to edit HTML.

## What the presenter gets

| Feature | How it works for the presenter |
|---|---|
| One file | `my-deck.html` opens in Edge, Chrome, Firefox or Safari. Easy to email, store on SharePoint or put on a USB stick. Works offline. |
| Slides that fit any screen | Every slide is built on a fixed 1920 × 1080 canvas and scales to the screen, so the layout never shifts. |
| Professional motion | Slides slide in smoothly. Content builds up in a short, calm sequence. Numbers count up, bars grow and arrows draw themselves. |
| Navigation | Arrow keys, space, Page Up/Down (presentation clickers), mouse click, swipe on touch screens, Home/End. |
| Control bar | Appears when the mouse moves: previous, next, slide menu, notes, fullscreen, help. |
| Slide menu | Press `O` (or `M`) to see every slide title and jump straight to one. |
| Speaker notes | Press `N`. Notes appear on the same screen, so use them while rehearsing or on a second device that has its own copy of the file. |
| Blank screen | Press `B` to black out the screen during a discussion. Press it again to come back. |
| Deep links | The address ends in `#7` for slide 7. Share that link to open the deck at that slide. |
| PDF handout | `Ctrl+P` (or `Cmd+P`), then Save as PDF. Each slide becomes one landscape page with all content visible. |
| Accessible | Screen-reader labels, keyboard focus, and respect for the operating system's "reduce motion" setting. |

## When to use

- Someone needs a new presentation: a status update, steering committee, kick-off, pitch, training or board update.
- Someone wants to **convert** an existing PowerPoint (`.pptx`) or PDF into a modern browser presentation.
- Someone wants to restyle, shorten or animate an existing HTML deck made with this skill.

Do not use it for documents that people read rather than watch, such as reports or long handouts. In that case, suggest a document instead.

## Procedure

### Visual direction and content ownership

Present owns implementation and presentation behavior. [Unique design](references/unique-design/SKILL.md) owns substantial art direction and visual review; a separate language workflow owns editorial changes. For a new direction, load Unique design's Direct phase in the same parent workflow, then return here to build. Do not introduce a second renderer or require an extra approval when the work is already authorized.

If a `unique-design/v1` handoff exists, consume its current phase, scope, content lock, decisions, exceptions and verification status. Do **not** call Direct again. Follow [the handoff contract](references/unique-design/handoff.md): brief → build → review → bounded correction. An Audit handoff never authorizes editing. If Unique design is unavailable, use the brief and conditional guidance below, without claiming its review occurred.

**Content locks override every editorial suggestion in this skill and its references.** Preserve approved wording, exact values, units, sources and essential caveats, including required visible placement. Do not rewrite a locked title, round a number, shorten a qualification or move it into notes to make a layout fit. Adjust the layout; return any necessary content change as location, proposed replacement, reason and decision needed. Preserve the original content baseline across handoffs.

### 1. Get the brief

Ask only for what you cannot find in the source material, and ask everything in one round. Offer sensible defaults.

1. **Purpose**: What should the audience know, decide or do afterwards? This becomes the closing slide.
2. **Audience and setting**: Who will watch, how long is the slot, and will it be in a room, on Teams or Zoom, or read on its own?
3. **Source**: Topic notes, a document, a `.pptx` or a PDF. For PowerPoint, follow [powerpoint-conversion.md](references/powerpoint-conversion.md).
4. **Look**: Reuse the approved visual brief and available brand evidence. For an unestablished direction, use Unique design as above. The sample theme is a starting point, not a style suitable for every organization. See [design-guide.md](references/design-guide.md#rebranding).
5. **Details**: The presenter's name and role, the date, the language, and the footer text.

### 2. Plan the storyline before building

- Plan one primary task or message per slide. For unlocked drafts, a conclusion title can help; retain approved titles and useful dense comparisons.
- Plan about 1–2 minutes per slide. A 20-minute slot usually needs 10–14 slides.
- A good arc is: cover, then agenda (if there are more than 8 slides), then context or problem, then approach, then evidence (numbers, chart, timeline), then the ask or decision, then closing.
- Show a compact outline with layouts when useful. Proceed within existing authorization; ask only about unresolved decisions that materially affect the result. For a conversion, account for every source slide and proposed merge, split or relocation, subject to content locks.

### 3. Choose a layout per slide

Pick from the catalogue in [layouts.md](references/layouts.md). Each layout appears in the template with a `data-layout` attribute.

| Need | Layout |
|---|---|
| Open or close | `cover`, `closing` |
| Structure | `agenda`, `section` |
| Ideas, benefits, pillars | `cards` |
| Before/after, option A/B | `comparison` |
| How things connect | `hub` (diagram) |
| Steps, phases, method | `process` |
| Headline numbers, RAG status | `kpi` |
| Data over time or by category | `chart` |
| Plan, roadmap, milestones | `timeline` |
| Screenshot, photo, product | `split` |
| Strong statement, customer voice | `quote` |

Choose layouts from the relationship being explained and the approved visual brief. Dark/light alternation and varied layouts are options. Repeated layouts support comparisons and orientation; do not change them solely to satisfy a variety quota. Extend section 5 when the catalogue cannot express the relationship clearly.

### 4. Build

1. Copy [template.html](assets/template.html.txt) next to the user's files and give it a clear name, for example `Project-Horizon-steering-committee.html`. Never edit the template in the skill folder.
2. Update `<title>`, `<meta name="description">`, `<html lang>` and `data-title` on `<main class="deck">`.
3. Set the theme from the approved brief using `:root` tokens in section 1. Use scoped visual component extensions in section 5 where tokens are insufficient, preserving protected behavior.
4. Replace the brand mark on every slide: change the name in `<div class="brand-mark"><i></i>Name</div>`, or use `<img class="logo" src="..." alt="Organisation name">`.
5. Build the slides by copying the `<section>` blocks of the chosen layouts. Delete the sample slides you don't use. Each `<section class="slide">` needs:
   - a short, unique `data-title`. It appears in the slide menu, the browser tab and screen readers.
   - a `<footer class="slide-footer">` with an empty `<span class="slide-number"></span>`. The script fills in the numbers.
   - `<aside class="speaker-notes" hidden>` with the notes.
6. Leave the `<script>` controller, the presentation UI markup (`nav.controls`, hint, dialog) and CSS sections 2, 4, 6, 7 and 8 **unchanged**. Add new component CSS to section 5 only when no existing layout fits.
7. Keep all content inside the safe area: 120 px side margins, heading from 166 px, body from 380 px to 930 px. Nothing may overflow the 1920 × 1080 canvas.

### 5. Animate

Follow [motion.md](references/motion.md). In short:

- Leave headings still, because they anchor the slide, and animate the content into place.
- Stagger items with `style="--delay:120ms"`, `220ms`, `320ms` and so on, roughly 80–120 ms apart. Every slide should be fully built within about 1.2 seconds.
- Use motion only when it explains meaning. Static content is valid. Available effects include `reveal`, `grow-x`, `grow-y`, `flow` and `pop`; avoid `data-count` for locked figures or formatting because it rewrites their text during playback.
- Never add click-by-click builds. The deck uses timed builds so that the presenter only ever presses "next".

### 6. Write speaker notes

Write useful speaker notes, preserving approved notes when converting. Supporting explanation can go there; essential caveats, sources and other content required visibly must stay on the slide. Do not treat notes as a substitute for required audience information.

### 7. Check before hand-over

Open the file in the browser and inspect a contact sheet plus every slide at readable size. Use [Unique design's adapter checks](references/unique-design/presentations.md) when available; inspect actual fonts and text/background contrast after scaling. If a renderer is unavailable, report these checks as unverified.

- [ ] No text is cut off, overlapping or wrapping onto a single orphan word in titles. Check at 1920 × 1080 and on a small laptop window.
- [ ] Every slide has a `data-title`, a footer and speaker notes, and the slide menu (`O`) lists sensible titles.
- [ ] Animations finish within about 1.5 s, and nothing flickers or jumps after the build.
- [ ] Numbers, names and dates match the source exactly, and no content was invented.
- [ ] Navigation, notes, menu, focus, fullscreen, blanking, deep links and touch work; reduced motion shows all information.
- [ ] Print shows one complete slide per page, with completed builds and no controls. If delivering PDF, inspect the actual PDF pages separately; a page count or successful HTML render is insufficient. Native PowerPoint export is not implemented.
- [ ] The file has no `http://` or `https://` references for images, fonts or scripts. The deck must work offline.
- [ ] Images have `alt` text, and decorative elements have `aria-hidden="true"`.
- [ ] If images are linked rather than embedded, either embed them or deliver the folder together with the file. See [powerpoint-conversion.md](references/powerpoint-conversion.md#make-it-one-file).

### 8. Hand over

Tell the user in plain language:

- **Where** the file is, and that they open it by double-clicking.
- **How to present**: press `F` for fullscreen, use the arrow keys or a clicker to move, `N` for notes, `O` for the slide menu and `B` to blank the screen.
- **How to make a PDF**: press `Ctrl+P`, choose Save as PDF and turn on "Background graphics" if colours are missing.
- **What to check**: list any facts you could not verify and any placeholders that are left, such as the sample screenshot.
- **How to change things**: ask in chat, for example "make slide 4 about risks" or "use our blue #0A3D62 as the main colour".

## Fundamentals (do not break)

- **Self-contained and offline**: one HTML file with no frameworks, CDNs, web fonts from the internet, trackers or external requests. Images are embedded or sit in a folder next to the file.
- **Fixed canvas**: all slides are 1920 × 1080 px and absolutely positioned. The controller scales the whole canvas, so never use viewport units or media queries inside slides.
- **One active slide**: `.slide.is-active` is visible. Others are hidden, `inert` and `aria-hidden`. Entrance animations are keyed to `.is-active`, so they replay each time a slide opens.
- **Theme by tokens**: colours, fonts and radii come from CSS custom properties in `:root`. Components never hard-code brand colours.
- **Motion with restraint**: animation explains or directs attention, and it never decorates for its own sake. The OS "reduce motion" setting turns it off.
- **Print-ready**: every slide prints as one page with all builds completed.
- **Safe content**: slide text is static markup written by you. Never insert user-provided HTML or scripts into the deck.

## Resources

- [assets/template.html](assets/template.html.txt): the starter deck with 13 sample slides, one per layout, plus the controller.
- [references/layouts.md](references/layouts.md): layout catalogue, starting capacities and markup for each building block.
- [references/motion.md](references/motion.md): animation vocabulary, timing rules, SVG arrow drawing and a PowerPoint-to-HTML animation mapping.
- [references/design-guide.md](references/design-guide.md): type scale, spacing, colour, rebranding, images, charts and writing for slides.
- [references/powerpoint-conversion.md](references/powerpoint-conversion.md): extracting text, notes, tables, charts, images and theme colours from a `.pptx`, mapping slides to layouts, and making a single file.