# Presentations > Use this skill any time the user wants to create, edit, or export a slide deck presentation. This includes any task involving slides, decks, pitch decks, keynotes, or visual presentations. Trigger when the user says anything like 'create a presentation', 'make slides', 'build a deck', 'presentation about X'. The deliverable is a set of HTML slides (1920x1080) created via the presentation-gen tool, with optional PDF/PPTX export. Do NOT trigger for documents, reports, spreadsheets, or web pages — only slide deck presentations. - Skill: `kortix-ai/presentations` (Agent Skill, multi-file: 16 files) - Install (CLI): `npx skillmds@latest add kortix-ai/presentations` - Raw SKILL.md: https://api.skillmd.com/api/skills/kortix-ai/presentations/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: kortix-ai (https://skillmd.com/u/kortix-ai) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/kortix-ai/presentations --- # Kortix Presentations — Slide Deck Creation Skill You are loading the presentation creation skill. Follow these instructions for ALL presentation work. --- ## Autonomy Doctrine **Act, don't ask.** Receive the topic, research it, design a custom theme, create all slides, validate, preview, export. No permission requests. No presenting options. Just deliver a complete, polished deck. - **Decide the structure yourself.** Pick the right number of slides, the right layout, the right visuals. - **Research before designing.** Never use generic colors. Find actual brand colors and visual identity. - **Create all slides in parallel.** Don't build one at a time — batch them. - **Validate and preview before delivering.** Fix any overflows or visual issues yourself. - Only ask for clarification if the topic is completely unclear or genuinely ambiguous. --- ## Available Tools - **`presentation-gen`** — Create, manage, validate, preview, and export slides. - `create_slide` — Create a single slide (HTML body content) - `list_slides` / `delete_slide` — Manage slides - `list_presentations` / `delete_presentation` — Manage presentations - `validate_slide` — Check dimensions via Playwright (must fit 1920x1080) - `export_pdf` — Render all slides to merged PDF via Playwright - `export_pptx` — 3-layer PPTX (background + visual elements + editable text) via Playwright + python-pptx - `preview` — Start local HTTP server at `http://localhost:3210` with keyboard nav, fullscreen, thumbnails - **`image-search`** — Search Google Images. Batch queries with `|||` separator. - **`image-gen`** — Generate images via Replicate (Flux Schnell). Actions: `generate`, `edit`, `upscale`, `remove_bg`. - **`web-search`** — Search the web via Tavily. Batch queries with `|||` separator. - **`scrape-webpage`** — Fetch and extract content from URLs via Firecrawl. **CRITICAL**: ALWAYS use `presentation-gen` with `action: "create_slide"` to build slides. NEVER create slide HTML files manually. --- ## Folder Structure ``` presentations/ images/ ← shared images (downloaded BEFORE slides) hero.jpg logo.png [presentation-name]/ ← created automatically by create_slide metadata.json slide_01.html slide_02.html viewer.html ← auto-generated on every create/delete ``` Images go to `presentations/images/` BEFORE the presentation folder exists. Reference images as `../images/[filename]` from slides. --- ## Efficiency Rules 1. **Batch searches** — Multiple queries in ONE call using `|||` separator 2. **Chain shell commands** — ALL folder creation + image downloads in ONE bash command 3. **Parallel slide creation** — Create ALL slides simultaneously (multiple `create_slide` calls at once) --- # Creation Workflow ## Phase 1: Topic Confirmation 1. Extract the topic from the user's message 2. If clear enough to act on, proceed immediately with defaults: - Target audience: "General public" unless specified - Goals: "Informative overview" unless specified 3. Only ask for clarification if the topic is completely unclear ## Phase 2: Theme Design 1. **Batch web search for brand identity** — ALL in one call: - `[topic] brand colors` - `[topic] visual identity` - `[topic] official website design` - `[topic] brand guidelines` 2. **Define custom color scheme** based on research: - USE ACTUAL brand colors found in research - FORBIDDEN: "blue for tech", "red for speed", "green for innovation" without research backing - For companies: use their official brand colors - For people: find their associated visual identity - Document WHERE you found the color information - Define: primary, secondary, accent, text color, font choices, layout patterns ## Phase 3: Research and Content Planning Complete ALL steps including ALL image downloads before Phase 4. 1. **Batch content research** — ALL in one call: - `[topic] history background` - `[topic] key features` - `[topic] statistics data facts` - `[topic] significance impact` - Scrape key pages for detail 2. **Create content outline** — one main idea per slide. Note a TOPIC-SPECIFIC image query for each slide (always include the actual topic name/brand/person — never generic category queries). 3. **Batch image search** — ALL queries in one call with `num_results: 2` 4. **Select images** based on: - Topic specificity (actual brand/person images, not generic stock) - Dimensions (landscape for backgrounds, portrait for side panels) - Visual quality and relevance 5. **Download ALL images in one command**: ```bash mkdir -p presentations/images && \ curl -L "URL1" -o presentations/images/slide1_hero.jpg && \ curl -L "URL2" -o presentations/images/slide2_detail.jpg && \ ls -lh presentations/images/ ``` Verify ALL expected files exist. Retry any failures. 6. **Document image mapping**: slide number -> filename, dimensions, orientation, placement ## Phase 4: Slide Creation Only start after Phase 3 is complete with all images downloaded and verified. 1. **Create ALL slides in parallel** — multiple `create_slide` calls simultaneously: ``` presentation-gen( action: "create_slide", presentation_name: "my_pres", slide_number: 1, slide_title: "Introduction", content: "
...
", presentation_title: "My Presentation" ) ``` 2. **Use downloaded images** — Reference as `../images/filename` in `` tags: - Landscape → full-width backgrounds, hero images - Portrait → side panels, accent images - Square → centered focal points, logos ## Phase 5: Validate, Preview, Export 1. **Validate** — `presentation-gen` with `action: "validate_slide"` on each slide. Fix any overflows (content exceeding 1920x1080). 2. **Preview** — `presentation-gen` with `action: "preview"` to launch viewer at `http://localhost:3210`. 3. **Export** — both formats: - `action: "export_pdf"` — merged PDF via Playwright - `action: "export_pptx"` — 3-layer PPTX (background + visuals + editable text) Both require `presentation_name`. Output saved in the presentation folder. ## Phase 6: Deliver Review all slides for visual consistency, then report: - What was created (topic, slide count, theme) - Viewer URL: `http://localhost:3210` - Paths to exported PDF and PPTX files --- # Slide Content Rules ## HTML Rules - HTML body content ONLY — no ``, ``, ``, `` tags (added automatically) - Inter font is pre-loaded — use it directly - Use emoji for icons — no Font Awesome or icon libraries - Design for FIXED **1920x1080 pixels** — NOT responsive - `box-sizing: border-box` on all containers - Max 40px container padding - `overflow: hidden` on all containers ## Typography | Element | Size | Weight | |---|---|---| | Titles | 48-72px | 700-900 | | Subtitles | 32-42px | 600-700 | | Headings | 28-36px | 600 | | Body | 20-24px | 400-500 | | Small/captions | 16-18px | 300-400 | Line height: 1.5-1.8 for all text. ## Layout — PRESENTATION, NOT WEBSITE **FORBIDDEN:** - Multi-column card grids - Responsive patterns, `vw`/`vh` units, media queries - Scrolling content - More than 5 bullet points per slide - More than 2 ideas per slide **REQUIRED:** - Centered, focused content - Large titles with visual impact - Fixed pixel dimensions only - 1-2 ideas per slide max - 3-5 bullet points max - Think PowerPoint: large title, centered content, minimal elements ## Color Usage - **Primary** — backgrounds, main elements - **Secondary** — subtle backgrounds, section dividers - **Accent** — highlights, CTAs, key numbers - **Text** — all text content - Consistent scheme across ALL slides — no slide should look like it belongs to a different deck ## Image Placement Patterns ### Full-bleed background ```html
``` ### Side panel (40/60 split) ```html
``` ### Centered accent image ```html
``` ## Data Visualization D3.js and Chart.js are pre-loaded. Use them for charts, graphs, and data visualizations directly in slide HTML. ```html ``` --- # Slide Templates ## Title Slide ```html

Presentation Title

Subtitle or tagline

``` ## Content Slide (title + bullets) ```html

Section Title

``` ## Stats/Numbers Slide ```html

Key Numbers

$2.5B
Revenue
150K+
Customers
98%
Satisfaction
``` ## Quote Slide ```html
"

The quote text goes here, keeping it impactful and concise.

— Attribution Name, Title

``` ## Closing/CTA Slide ```html

Thank You

Contact info or call to action

``` --- # Presentation Viewer A polished slide viewer and preview server for HTML presentations (1920x1080). ## Architecture The viewer consists of two parts: 1. **`viewer.html`** — a self-contained HTML template that renders slides in scaled iframes with keyboard navigation, fullscreen, and a thumbnail strip. 2. **`serve.ts`** — a lightweight Bun HTTP server that serves the presentation folder and injects the viewer at `/`. Both files live in `skills/presentations/` alongside this SKILL.md. ## Why a Server (Not Just a Static HTML File)? Standalone 1920x1080 HTML slides opened directly in a browser are an unscaled, scrollable mess. The viewer fixes this by loading slides into iframes and CSS-scaling them to fit any viewport. The problem: **loading `