kortix-ai/kortix-registry/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

1. 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

1. 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

1. 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).

1. Batch image search — ALL queries in one call with num_results: 2

1. 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

1. 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.

1. 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: "<div>...</div>", presentation_title: "My Presentation" ) ``

1. Use downloaded images — Reference as ../images/filename in <img> 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).

1. Preview — presentation-gen with action: "preview" to launch viewer at http://localhost:3210.

1. 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 <!DOCTYPE>, <html>, <head>, <body> 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

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

<div style="position:absolute;inset:0;background:url('../images/hero.jpg') center/cover;"></div>
<div style="position:absolute;inset:0;background:rgba(0,0,0,0.5);"></div>
<div style="position:relative;z-index:1;padding:60px;">
  <!-- content over darkened image -->
</div>

Side panel (40/60 split)

<div style="display:flex;width:1920px;height:1080px;">
  <div style="width:40%;background:url('../images/photo.jpg') center/cover;"></div>
  <div style="width:60%;padding:60px;display:flex;flex-direction:column;justify-content:center;">
    <!-- content -->
  </div>
</div>

Centered accent image

<div style="text-align:center;padding:40px;">
  <img src="../images/logo.png" style="max-height:300px;margin:0 auto 30px;">
  <!-- content below -->
</div>

Data Visualization

D3.js and Chart.js are pre-loaded. Use them for charts, graphs, and data visualizations directly in slide HTML.

<canvas id="myChart" width="800" height="400"></canvas>
<script>
new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [{
      label: 'Revenue ($M)',
      data: [12, 19, 8, 15],
      backgroundColor: '#1F4E79'
    }]
  },
  options: { responsive: false }
});
</script>

Slide Templates

Title Slide

<div style="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;">
  <h1 style="font-size:64px;font-weight:800;color:#fff;text-align:center;margin:0 0 20px;">
    Presentation Title
  </h1>
  <p style="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)

<div style="width:1920px;height:1080px;padding:60px 80px;box-sizing:border-box;background:#fff;display:flex;flex-direction:column;">
  <h2 style="font-size:48px;font-weight:700;color:PRIMARY;margin:0 0 40px;">
    Section Title
  </h2>
  <ul style="font-size:24px;line-height:1.8;color:#333;list-style:none;padding:0;">
    <li style="margin-bottom:20px;">&#x2022; First key point with supporting detail</li>
    <li style="margin-bottom:20px;">&#x2022; Second key point with supporting detail</li>
    <li style="margin-bottom:20px;">&#x2022; Third key point with supporting detail</li>
  </ul>
</div>

Stats/Numbers Slide

<div style="width:1920px;height:1080px;padding:60px 80px;box-sizing:border-box;background:PRIMARY;display:flex;flex-direction:column;justify-content:center;">
  <h2 style="font-size:42px;font-weight:700;color:#fff;margin:0 0 60px;text-align:center;">
    Key Numbers
  </h2>
  <div style="display:flex;justify-content:space-around;">
    <div style="text-align:center;">
      <div style="font-size:72px;font-weight:900;color:ACCENT;">$2.5B</div>
      <div style="font-size:20px;color:rgba(255,255,255,0.8);margin-top:10px;">Revenue</div>
    </div>
    <div style="text-align:center;">
      <div style="font-size:72px;font-weight:900;color:ACCENT;">150K+</div>
      <div style="font-size:20px;color:rgba(255,255,255,0.8);margin-top:10px;">Customers</div>
    </div>
    <div style="text-align:center;">
      <div style="font-size:72px;font-weight:900;color:ACCENT;">98%</div>
      <div style="font-size:20px;color:rgba(255,255,255,0.8);margin-top:10px;">Satisfaction</div>
    </div>
  </div>
</div>

Quote Slide

<div style="width:1920px;height:1080px;display:flex;align-items:center;justify-content:center;background:SECONDARY;padding:120px;box-sizing:border-box;">
  <div style="max-width:1200px;text-align:center;">
    <div style="font-size:120px;color:ACCENT;line-height:1;margin-bottom:20px;">"</div>
    <p style="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>
    <p style="font-size:20px;color:#666;margin-top:30px;">— Attribution Name, Title</p>
  </div>
</div>