@kortix/sandbox 0.4.1

package/opencode/skills/KORTIX-presentations/SKILL.md

@@ -0,0 +1,344 @@
+---
+name: kortix-presentations
+description: "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)
+  - `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: "<div>...</div>",
+     presentation_title: "My Presentation"
+   )
+   ```
+
+2. **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).
+
+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 `<!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
+
+| 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
+<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)
+```html
+<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
+```html
+<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.
+
+```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
+```html
+<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)
+```html
+<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
+```html
+<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
+```html
+<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>
+```
+
+## Closing/CTA Slide
+```html
+<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;">
+  <h2 style="font-size:56px;font-weight:800;color:#fff;text-align:center;margin:0 0 30px;">
+    Thank You
+  </h2>
+  <p style="font-size:24px;color:rgba(255,255,255,0.8);text-align:center;">
+    Contact info or call to action
+  </p>
+</div>
+```

package/opencode/skills/KORTIX-remotion/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: remotion-best-practices
+description: Best practices for Remotion - Video creation in React
+metadata:
+  tags: remotion, video, react, animation, composition
+---
+
+## When to use
+
+Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
+
+## Captions
+
+When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.
+
+## Using FFmpeg
+
+For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.
+
+## Audio visualization
+
+When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.
+
+## How to use
+
+Read individual rule files for detailed explanations and code examples:
+
+- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
+- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
+- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
+- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
+- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
+- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
+- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
+- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
+- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
+- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
+- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
+- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
+- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
+- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
+- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
+- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks
+- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
+- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
+- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
+- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
+- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
+- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
+- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
+- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
+- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency
+- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
+- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
+- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
+- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it

package/opencode/skills/KORTIX-remotion/rules/3d.md

@@ -0,0 +1,86 @@
+---
+name: 3d
+description: 3D content in Remotion using Three.js and React Three Fiber.
+metadata:
+  tags: 3d, three, threejs
+---
+
+# Using Three.js and React Three Fiber in Remotion
+
+Follow React Three Fiber and Three.js best practices.  
+Only the following Remotion-specific rules need to be followed:
+
+## Prerequisites
+
+First, the `@remotion/three` package needs to be installed.  
+If it is not, use the following command:
+
+```bash
+npx remotion add @remotion/three # If project uses npm
+bunx remotion add @remotion/three # If project uses bun
+yarn remotion add @remotion/three # If project uses yarn
+pnpm exec remotion add @remotion/three # If project uses pnpm
+```
+
+## Using ThreeCanvas
+
+You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
+`<ThreeCanvas>` MUST have a `width` and `height` prop.
+
+```tsx
+import { ThreeCanvas } from "@remotion/three";
+import { useVideoConfig } from "remotion";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <ambientLight intensity={0.4} />
+  <directionalLight position={[5, 5, 5]} intensity={0.8} />
+  <mesh>
+    <sphereGeometry args={[1, 32, 32]} />
+    <meshStandardMaterial color="red" />
+  </mesh>
+</ThreeCanvas>
+```
+
+## No animations not driven by `useCurrentFrame()`
+
+Shaders, models etc MUST NOT animate by themselves.  
+No animations are allowed unless they are driven by `useCurrentFrame()`.  
+Otherwise, it will cause flickering during rendering.  
+
+Using `useFrame()` from `@react-three/fiber` is forbidden.
+
+## Animate using `useCurrentFrame()`
+
+Use `useCurrentFrame()` to perform animations.
+
+```tsx
+const frame = useCurrentFrame();
+const rotationY = frame * 0.02;
+
+<mesh rotation={[0, rotationY, 0]}>
+  <boxGeometry args={[2, 2, 2]} />
+  <meshStandardMaterial color="#4a9eff" />
+</mesh>
+```
+
+## Using `<Sequence>` inside `<ThreeCanvas>`
+
+The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
+
+```tsx
+import { Sequence } from "remotion";
+import { ThreeCanvas } from "@remotion/three";
+
+const { width, height } = useVideoConfig();
+
+<ThreeCanvas width={width} height={height}>
+  <Sequence layout="none">
+    <mesh>
+      <boxGeometry args={[2, 2, 2]} />
+      <meshStandardMaterial color="#4a9eff" />
+    </mesh>
+  </Sequence>
+</ThreeCanvas>
+```

package/opencode/skills/KORTIX-remotion/rules/animations.md

@@ -0,0 +1,29 @@
+---
+name: animations
+description: Fundamental animation skills for Remotion
+metadata:
+  tags: animations, transitions, frames, useCurrentFrame
+---
+
+All animations MUST be driven by the `useCurrentFrame()` hook.  
+Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
+
+```tsx
+import { useCurrentFrame } from "remotion";
+
+export const FadeIn = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+    extrapolateRight: 'clamp',
+  });
+ 
+  return (
+    <div style={{ opacity }}>Hello World!</div>
+  );
+};
+```
+
+CSS transitions or animations are FORBIDDEN - they will not render correctly.  
+Tailwind animation class names are FORBIDDEN - they will not render correctly.  

package/opencode/skills/KORTIX-remotion/rules/assets.md

@@ -0,0 +1,78 @@
+---
+name: assets
+description: Importing images, videos, audio, and fonts into Remotion
+metadata:
+  tags: assets, staticFile, images, fonts, public
+---
+
+# Importing assets in Remotion
+
+## The public folder
+
+Place assets in the `public/` folder at your project root.
+
+## Using staticFile()
+
+You MUST use `staticFile()` to reference files from the `public/` folder:
+
+```tsx
+import {Img, staticFile} from 'remotion';
+
+export const MyComposition = () => {
+  return <Img src={staticFile('logo.png')} />;
+};
+```
+
+The function returns an encoded URL that works correctly when deploying to subdirectories.
+
+## Using with components
+
+**Images:**
+
+```tsx
+import {Img, staticFile} from 'remotion';
+
+<Img src={staticFile('photo.png')} />;
+```
+
+**Videos:**
+
+```tsx
+import {Video} from '@remotion/media';
+import {staticFile} from 'remotion';
+
+<Video src={staticFile('clip.mp4')} />;
+```
+
+**Audio:**
+
+```tsx
+import {Audio} from '@remotion/media';
+import {staticFile} from 'remotion';
+
+<Audio src={staticFile('music.mp3')} />;
+```
+
+**Fonts:**
+
+```tsx
+import {staticFile} from 'remotion';
+
+const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
+await fontFamily.load();
+document.fonts.add(fontFamily);
+```
+
+## Remote URLs
+
+Remote URLs can be used directly without `staticFile()`:
+
+```tsx
+<Img src="https://example.com/image.png" />
+<Video src="https://remotion.media/video.mp4" />
+```
+
+## Important notes
+
+- Remotion components (`<Img>`, `<Video>`, `<Audio>`) ensure assets are fully loaded before rendering
+- Special characters in filenames (`#`, `?`, `&`) are automatically encoded