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.
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.
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)
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
Batch searches — Multiple queries in ONE call using ||| separator
Chain shell commands — ALL folder creation + image downloads in ONE bash command
Parallel slide creation — Create ALL slides simultaneously (multiple create_slide calls at once)
Creation Workflow
Phase 1: Topic Confirmation
Extract the topic from the user's message
If clear enough to act on, proceed immediately with defaults:
Only ask for clarification if the topic is completely unclear
Phase 2: Theme Design
Batch web search for brand identity — ALL in one call:
[topic] brand colors
[topic] visual identity
[topic] official website design
[topic] brand guidelines
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.
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
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).
Batch image search — ALL queries in one call with num_results: 2
Select images based on:
Topic specificity (actual brand/person images, not generic stock)
Dimensions (landscape for backgrounds, portrait for side panels)
<divstyle="width:1920px;height:1080px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,PRIMARY,SECONDARY);padding:80px;box-sizing:border-box;"><h1style="font-size:64px;font-weight:800;color:#fff;text-align:center;margin:0 0 20px;">
Presentation Title
</h1><pstyle="font-size:28px;font-weight:400;color:rgba(255,255,255,0.8);text-align:center;">
Subtitle or tagline
</p></div>
Content Slide (title + bullets)
<divstyle="width:1920px;height:1080px;padding:60px 80px;box-sizing:border-box;background:#fff;display:flex;flex-direction:column;"><h2style="font-size:48px;font-weight:700;color:PRIMARY;margin:0 0 40px;">
Section Title
</h2><ulstyle="font-size:24px;line-height:1.8;color:#333;list-style:none;padding:0;"><listyle="margin-bottom:20px;">• First key point with supporting detail</li><listyle="margin-bottom:20px;">• Second key point with supporting detail</li><listyle="margin-bottom:20px;">• Third key point with supporting detail</li></ul></div>
<divstyle="width:1920px;height:1080px;display:flex;align-items:center;justify-content:center;background:SECONDARY;padding:120px;box-sizing:border-box;"><divstyle="max-width:1200px;text-align:center;"><divstyle="font-size:120px;color:ACCENT;line-height:1;margin-bottom:20px;">"</div><pstyle="font-size:36px;font-weight:500;color:PRIMARY;line-height:1.6;font-style:italic;">
The quote text goes here, keeping it impactful and concise.
</p><pstyle="font-size:20px;color:#666;margin-top:30px;">— Attribution Name, Title</p></div></div>
Closing/CTA Slide
<divstyle="width:1920px;height:1080px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,PRIMARY,SECONDARY);padding:80px;box-sizing:border-box;"><h2style="font-size:56px;font-weight:800;color:#fff;text-align:center;margin:0 0 30px;">
Thank You
</h2><pstyle="font-size:24px;color:rgba(255,255,255,0.8);text-align:center;">
Contact info or call to action
</p></div>
Presentation Viewer
A polished slide viewer and preview server for HTML presentations (1920x1080).
Architecture
The viewer consists of two parts:
viewer.html — a self-contained HTML template that renders slides in scaled iframes with keyboard navigation, fullscreen, and a thumbnail strip.
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 <iframe src="slide_XX.html"> does not work reliably over file://. Browsers enforce CORS/sandboxing restrictions on file:// origins. An HTTP server on localhost eliminates all of this.
In the Sandbox (Container)
The viewer is already running as a service inside the sandbox container. It starts automatically on boot via s6-overlay and listens on port 3210.
The service watches /workspace/presentations/ for any presentation with a metadata.json
It serves the most recently created/updated presentation at http://localhost:3210
Port 3210 is exposed in docker-compose and mapped to the host
The agent does not need to start the server manually. After creating slides, tell the user to open http://localhost:3210.
Each slide is a 1920x1080 iframe. The viewer measures the stage area, computes min(availWidth / 1920, availHeight / 1080), sets the wrapper to displayed pixel size, and applies transform: scale(factor) with transform-origin: 0 0. The 16:9 aspect ratio is maintained at any viewport size.
