@kolbo/kolbo-code-linux-arm64-musl 2.2.4 → 2.3.0

package/skills/kolbo/VERSION

@@ -0,0 +1 @@
+0.4.0

package/skills/kolbo/references/models/creative-director.md

@@ -0,0 +1,106 @@
+<!-- PARITY: this file mirrors getCreativeDirectorPromptSystemPrompt() in
+     kolbo-api/src/config/systemPrompt.js (lines ~1062–1155).
+     When that function changes, update this file in the same session. -->
+
+# Creative Director — Multi-Scene Prompt Rules
+
+Load this file when the user wants **2–8 related outputs from one brief** — storyboards, ad campaigns, character lookbooks, multi-angle/multi-pose sets, scene variations. For single-image work see `models/gpt-image.md` / `models/nano-banana.md`. For single-clip video see `models/seedance.md` / `models/veo.md`.
+
+**Kolbo MCP routing:** always call `generate_creative_director` (NEVER fire ≥2 `generate_image` calls in a loop). Pass `scene_count: 1–8`, optional `visual_dna_ids`, `reference_images`, `moodboard_id`, `workflow_type: "video"` for clips, `model` to pin a specific image/video model.
+
+## What the Creative Director Tool Is
+
+A multi-scene batch generator. Submit 1–8 scenes in one go and the tool fans them out in parallel into images or videos, optionally locked to a character/product (Visual DNA) and a mood/style (Moodboard). Total wall time = slowest scene, not the sum.
+
+### The Three Modes
+- **Photo Auto Pilot** — each scene = one image. Optional reference images for style/subject. Best for: campaign batches, product shoots, character lookbooks, ad variants. Pass `workflow_type: "image"` (or omit — image is default).
+- **Video Auto Pilot** — each scene = one short video clip. Optional reference image per scene anchors the starting frame. Best for: storyboards, mood reels, ad teasers, character action sequences. Pass `workflow_type: "video"`.
+- **Cinema Manual** — per-scene **first frame + last frame** + per-scene prompt. Full cinematic control over composition transitions. Best for: hero shots, controlled camera moves, deliberate edits.
+
+### Identity & Style Locks
+- **Visual DNA** — attach a character/product preset via `visual_dna_ids` to lock identity across all scenes. Up to **8 Visual DNAs** can be active at once (e.g. main character + product + side character). See `workflows/visual-dna.md` for the `@name` syntax — every DNA must be tagged inside the prompt.
+- **Moodboard** — attach `moodboard_id` (or `moodboard_ids`) for a curated mood/style reference that anchors the aesthetic of the whole batch.
+- When the user mentions a recurring character/product, **ask** if they want to use a Visual DNA and recommend it. Same for a consistent aesthetic → recommend a Moodboard.
+
+## CRITICAL Kolbo Platform Rules
+
+- **Aspect ratio and resolution are MCP-tool params** (`aspect_ratio`, `resolution`) — NEVER include "16:9", "9:16", "1024x1536", "2K", or any size syntax inside the scene prompts.
+- **Model selection is the `model` param** — never hardcode "Nano Banana", "Veo", "Seedance", "Flux" inside the scene text.
+- Output scenes in the exact format below — anything else breaks the parser.
+- **Never pass `num_images` to `generate_creative_director`** — use `scene_count` (1–8). `num_images` is for `generate_image` (same prompt, different seeds).
+
+## The Output Format (non-negotiable)
+
+All scenes go in **ONE fenced code block** in this exact shape:
+```
+Scene 1: <prompt for scene 1>
+Scene 2: <prompt for scene 2>
+Scene 3: <prompt for scene 3>
+...
+```
+- One scene per line. Each line starts with `Scene N:` followed by a single concise prompt.
+- **No meta-commentary inside the block**: no "Output:", "Tips:", "Notes:", resolution, dimensions, or "this scene…" preamble.
+- Number sequentially from 1. Hard cap at 8 scenes.
+
+## How to Build the Batch
+
+### Step 1 — Pick the right mode
+- Single static asset per scene → **Photo Auto Pilot**
+- Motion / camera moves → **Video Auto Pilot**
+- Controlled first→last frame transitions → **Cinema Manual**
+
+### Step 2 — Decide the narrative arc
+A great batch isn't 8 random shots — it's a sequence with intent. Pick one structure:
+- **Campaign**: establishing → product hero → lifestyle → detail → close
+- **Storyboard**: setup → inciting action → escalation → climax → resolution
+- **Character lookbook**: full body → 3/4 → portrait → action → environment
+- **Ad concept**: hook → tension → reveal → CTA
+- **Variant exploration**: same concept, varying angle/lighting/mood/palette
+
+### Step 3 — Write each scene under the right framework
+
+**Photo Auto Pilot scene prompt** (image instruction):
+- Vary at least one axis between scenes: angle, lighting, mood, framing, palette.
+- Concise: 1–3 sentences. Concept-led, not keyword soup.
+- Subject + Action + Setting + Style cue.
+- If a Visual DNA is attached, refer to the subject by `@<dna-name>` — the DNA does identity work, don't re-describe it every scene.
+
+**Video Auto Pilot scene prompt** (motion instruction):
+- The model can see the reference image — **describe what happens, not what's already there**.
+- Always name a **camera move** per scene: `dolly in`, `pull-back`, `arc orbit`, `tracking shot`, `handheld natural lag`, `crane up`, `static drift`, `crash zoom`.
+- Format: `<action> + <camera move>`. Short and action-led.
+- Don't re-describe what the image already shows; describe the verb.
+
+**Cinema Manual scene prompt** (transition instruction):
+- The user provides first frame + last frame. Describe what bridges them: motion, time-passage, camera move, transformation.
+- Be explicit about the transition type: `smooth dolly between`, `time-lapse`, `match cut`, `whip pan reveal`.
+
+### Step 4 — Apply consistency rules
+- If recurring subject: keep description anchored to the same noun across scenes ("the woman", "the bottle") or use a single `@<dna-name>` consistently. Don't rename her in scene 4.
+- If recurring location: same world descriptors throughout (don't switch "Tel Aviv rooftop" to "downtown LA" mid-batch unless that's the arc).
+- Vary lighting/angle/composition between scenes — never two consecutive identical setups.
+
+## Output Discipline
+
+- Final scenes in ONE fenced code block in `Scene N:` format. **No model names, no resolutions, no aspect ratios inside scenes.**
+- When summarizing the call to the user, state separately:
+  - **Mode:** Photo Auto Pilot / Video Auto Pilot / Cinema Manual — one-line why
+  - **Recommended model:** (Nano Banana 2 / Nano Banana Pro / GPT Image 2 for photo; Veo / Seedance 2 / Kling for video) — one-line why
+  - **Aspect / Resolution preset:** what to pass — one-line why
+  - **Visual DNA / Moodboard:** recommend if applicable, or "—" if not
+  - **Why this arc works:** 1 line on the narrative choice
+- Reply explanations in the user's language; scenes themselves in English.
+
+## After Generation
+
+**Share results as individual URLs, one per scene. Do NOT create an HTML grid artifact or any combined layout.** Just list each scene's title and its image URL on separate lines — the desktop canvas already renders them as a gallery. See SKILL.md "Generated URLs in chat".
+
+## Character-Driven Video — Frames First
+
+For any ad / story / scene-based video **created from scratch** featuring a Visual DNA character, do NOT jump straight from DNA to per-shot video. The right flow is:
+
+1. **Generate the shot frames first** as still images via `generate_creative_director` with `scene_count` + `visual_dna_ids` + `workflow_type: "image"`. DNA is strongest in image generation; the user can approve cheaply before any expensive video runs.
+2. **Confirm the frames with the user** if there are more than ~3 shots, or if the user hasn't said "go straight to video."
+3. **Animate each frame** with `generate_video_from_image`, passing each approved frame as `image_url`.
+
+Skip frames-first only when the user says "go straight to video / skip the storyboard", on single-shot quick experiments, or when the user supplies their own approved frames.

package/skills/kolbo/references/models/gpt-image.md

@@ -0,0 +1,111 @@
+<!-- PARITY: this file mirrors getGptImagePromptSystemPrompt() in
+     kolbo-api/src/config/systemPrompt.js (lines ~858–965).
+     When that function changes, update this file in the same session. -->
+
+# GPT Image 2 — Prompt Rules
+
+Load this file when the user wants a **GPT Image 2 / gpt-image-2** image (OpenAI). For other image models see `models/nano-banana.md`, `models/creative-director.md`, or `models/prompt-copilot.md`.
+
+**Kolbo MCP routing:** call `generate_image` (text-to-image) or `generate_image_edit` (edits with `source_images`). Pass `model: "gpt-image-2"` when the user named it; otherwise consult `list_models({ type: "text_to_img" })`.
+
+## CRITICAL Kolbo Platform Rules
+
+- **Resolution and aspect ratio are MCP-tool params** (`aspect_ratio`, `resolution`) — NEVER include `size=`, `1024x1536`, aspect-ratio tags, or any resolution syntax inside the `prompt` field.
+- Pass aspect / resolution as separate tool parameters. Quality (`low` / `medium` / `high`) is its own param too — never bake it into the prompt text.
+- Do not write Python, `client.images.generate`, OpenAI SDK code, or `size=` keyword arguments. The user is generating through Kolbo's MCP tools.
+
+## Universal Prompting Rules (apply to EVERY prompt)
+
+- **Structure + goal**: write prompts in a consistent order — background/scene → subject → key details → constraints → declared intended use (ad / UI mock / infographic / poster / logo / etc.). The "intended use" line sets the mode and polish level.
+- **Format**: prefer skimmable templates over clever syntax. Use short labeled segments or line breaks for complex requests. Minimal, descriptive paragraph, JSON-like, instruction-style, or tag-based all work — pick whichever is most maintainable for that asset.
+- **Specificity + quality cues**: be concrete about materials, shapes, textures, and medium (photo / watercolor / 3D render / vector). Add targeted quality levers only when needed (`film grain`, `textured brushstrokes`, `macro detail`).
+- **Photorealism trigger**: include the literal word **"photorealistic"** to engage the model's photorealistic mode. Supporting phrases: "real photograph", "taken on a real camera", "professional photography", "iPhone photo", "35mm film". Camera specs (lens mm, aperture) work for high-level look but are loosely interpreted — use for vibe, not physics.
+- **Composition**: specify framing/viewpoint (close-up, wide, top-down), perspective (eye-level, low-angle), lighting/mood (soft diffuse, golden hour, high-contrast). If layout matters, call out placement ("logo top-right", "subject centered, negative space on left").
+- **People, pose, action**: describe scale, body framing, gaze, object interactions ("full body visible, feet included", "looking down at the open book, not at the camera", "hands naturally gripping the handlebar").
+- **Constraints — what changes vs what stays**: state exclusions and invariants explicitly. For edits use **"change only X" + "keep everything else the same"**, and re-state the preserve list on every iteration to prevent drift. Common invariants: identity, geometry, layout, brand elements, camera angle, saturation, contrast, labels, surrounding objects. Always include "no watermark, no extra text, no logos/trademarks" unless the brief specifies otherwise.
+- **Text in images**: put literal text in **quotes** or **ALL CAPS**, specify typography (font style, size, color, placement). For tricky words / brand names, spell letter-by-letter. Recommend quality **high** when text is small, dense, or multi-font.
+- **Multi-image inputs**: reference each input by number with a short description ("Image 1: product photo… Image 2: style reference…") and describe the interaction ("apply Image 2's style to Image 1", "place the dog from Image 2 next to the woman in Image 1"). Use `@image1` / `@image2` tags — see `workflows/visual-dna.md`.
+- **Iterate, don't overload**: prefer a clean base prompt + single-change follow-ups ("make lighting warmer", "remove the extra tree", "restore the original background") over one giant prompt.
+
+## Latency vs Fidelity (recommend `quality` param)
+
+- **low**: high-volume batches, drafts, ideation, latency-sensitive cases. Often "good enough" — default for variant exploration.
+- **medium**: balanced. Style probing, normal exploration.
+- **high**: final assets, small/dense text, multi-font layouts, close-up portraits, identity-sensitive edits, infographics, diagrams, posters, UI with labels, scientific visuals, slides with charts/footnotes.
+
+## Use Cases (text → image)
+
+### Infographics, diagrams, scientific visuals, slides/charts
+- Treat as artifact spec, not illustration request. Name exact deliverable. Define hierarchy. Provide real text/data verbatim in quotes.
+- Demand: readable typography, polished spacing, no decorative clutter, no stock-photo treatment.
+- Recommend: `quality: "high"`, landscape `aspect_ratio` for deck/slide outputs.
+
+### Photorealism
+- Prompt as if a real photo is being captured in the moment. Use photography language (lens, lighting, framing). Explicitly ask for **real texture** — pores, wrinkles, fabric wear, imperfections.
+- Avoid words that imply studio polish ("glamorized", "heavily retouched") unless that's the brief.
+
+### Logos
+- Brand personality + use case + clean, original mark + strong silhouette + balanced negative space + scales from small to large. Flat design, minimal strokes, no gradients unless essential. Plain background, generous padding, centered. "Original, non-infringing".
+- Recommend: `quality: "medium"`, square or portrait `aspect_ratio`; pass `num_images: 4` for variants.
+
+### Ads / marketing creatives
+- Write like a creative brief: brand, audience, culture, concept, composition, exact copy. Let the model make taste decisions inside boundaries.
+- Quote the tagline verbatim, demand exactly one rendering, integrated into the layout.
+
+### Story-to-comic / multi-panel
+- Define the narrative as a sequence of clear visual beats — one per panel. Number each panel and describe action concretely. For multi-panel sets, prefer `generate_creative_director` with `scene_count` — see `models/creative-director.md`.
+
+### UI mockups
+- Describe the product **as if it already exists**. Focus on layout, hierarchy, spacing, real interface elements. Avoid concept-art language. Place inside a device frame when relevant ("iPhone frame").
+
+### Translation in images (edit)
+- "Translate the text to <lang>. Do not change any other aspect of the image. Preserve typography style, placement, spacing, and hierarchy. Translate verbatim. No reflow unless necessary. Do not edit logos, icons, or imagery."
+
+## Use Cases (text + image → image, edits)
+
+For edits, the prompt should be tight and constraint-heavy. Call `generate_image_edit` with `source_images: [...]`.
+
+### Style transfer
+- "Use the same style from the input image. Generate <new subject/scene>. Keep <palette/texture/brushwork> consistent. Background: <X>. Framing: <Y>. No extra elements."
+
+### Virtual try-on
+- Lock the person (face, body shape, pose, hair, expression). Change garments only. Demand realistic fit (draping, folds, occlusion), consistent lighting and shadows so it doesn't look pasted on. No accessories/text/logos unless asked.
+
+### Drawing → photoreal render
+- "Preserve exact layout, proportions, perspective. Add realism via plausible materials, lighting, environment. Do not add new elements or text."
+
+### Product mockup / extraction
+- Plain opaque background, centered product, crisp silhouette, no halos/fringing. Preserve geometry and label legibility exactly. Only light polishing + subtle contact shadow. No restyling.
+
+### Marketing creative with in-image text
+- Quote copy exactly. Demand "verbatim, no extra characters, exactly once". Specify font style, contrast, kerning, placement.
+
+### Lighting / weather transformation
+- Change ONLY environmental conditions (lighting direction/quality, shadows, atmosphere, precipitation, wetness). Preserve identity, geometry, camera angle, object placement.
+
+### Object removal
+- "Remove the <X>. Do not change anything else." Keep edits surgical. Re-state every invariant.
+
+### Person → scene compositing
+- Ground realism: natural lighting, believable detail, no cinematic grading unless asked. Lock subject identity, expression, body. Higher input fidelity helps likeness across larger scene edits.
+
+### Multi-image referencing / compositing
+- Specify which input to transplant ("the dog from `@image2`"), where it goes ("right next to the woman in `@image1`"), and what stays ("scene, background, framing"). Match lighting, perspective, scale, and shadows.
+
+### Interior design swap (precision edit)
+- "Replace ONLY <object> with <new object>. Preserve camera angle, room lighting, floor shadows, surrounding objects. Photorealistic contact shadows and fabric texture."
+
+### Character consistency across pages (children's book / story art)
+- Step 1: establish a **character anchor** — lock appearance, proportions, outfit, palette, personality on a plain background. Better yet: create a Visual DNA (see `workflows/visual-dna.md`).
+- Step 2+: feed the anchor (or DNA via `visual_dna_ids`) as input. "Continue the story using `@<dna-name>`. Do not redesign. Same <outfit/features/palette>. New scene: <X>."
+
+## Output Discipline
+
+- Pass the prompt as the `prompt` field on `generate_image` / `generate_image_edit`.
+- **NEVER** include resolution/size/aspect/ratio strings inside the prompt body.
+- When summarizing the call to the user, mention 3 things separately from the prompt:
+  - **Aspect / Resolution preset:** `<portrait | landscape | square | wide / 2K>` with a one-line why
+  - **Quality:** `<low | medium | high>` with a one-line why
+  - **Why this works:** 1 line on the key prompting choice (constraint clarity / text fidelity / identity lock / etc.)
+- If the user asks in any language other than English, write explanations in their language but keep the prompt itself English.
+- Suggest small, single-change iterations for follow-ups rather than re-writing the whole prompt.

package/skills/kolbo/references/models/html-presentation.md

@@ -0,0 +1,139 @@
+<!-- PARITY: this file mirrors getHtmlPresentationSystemPrompt() + HTML_ARTIFACT_BOILERPLATE
+     in kolbo-api/src/config/systemPrompt.js (lines ~1377–1515).
+     When that function changes, update this file in the same session. -->
+
+# HTML Presentation — Build Rules
+
+Load this file when the user wants to **build / create / generate an HTML presentation, slide deck, or pitch deck**. For landing pages see `models/landing-page.md`; for any other interactive HTML artifact (dashboard, game, chart, widget) see `models/visual-code.md`.
+
+**Kolbo Code routing:** write the artifact as a single HTML block in your reply. The Kolbo Code panel renders it as a previewable artifact card. Optionally call `publish_html_artifact({ title, content })` afterward to get a public `sites.kolbo.ai` URL.
+
+## 🚨 NON-NEGOTIABLE: Viewport Fitting
+
+Every single slide MUST fit exactly within 100vh. **No scrolling within a slide, ever.** If content doesn't fit, SPLIT into multiple slides. This is the #1 rule, no exceptions.
+
+Apply these invariants to EVERY slide in EVERY deck:
+- Every `.slide` element has: `height: 100vh; height: 100dvh; overflow: hidden;` and a centered flex/grid layout.
+- ALL font sizes and spacing use `clamp(min, preferred, max)` — **never fixed px/rem**. Example: `font-size: clamp(2.5rem, 5vw, 5rem);`.
+- Content containers need explicit `max-height` constraints.
+- Images: `max-height: min(50vh, 400px); object-fit: contain;`.
+- Include short-viewport breakpoints: `@media (max-height: 700px)`, `(max-height: 600px)`, `(max-height: 500px)` — reduce font sizes / hide decoration / tighten gaps at each.
+- Add `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }`.
+- Never negate CSS functions directly. `-clamp()` is silently ignored. Use `calc(-1 * clamp(...))`.
+
+## 🚨 NON-NEGOTIABLE: Content Density Limits per Slide
+
+| Slide Type     | Maximum Content |
+| -------------- | --------------- |
+| Title slide    | 1 heading + 1 subtitle + optional tagline |
+| Content slide  | 1 heading + 4–6 bullets OR 1 heading + 2 short paragraphs |
+| Feature grid   | 1 heading + max 6 cards (2×3 or 3×2) |
+| Code slide     | 1 heading + 8–10 lines of code max |
+| Quote slide    | 1 quote (≤3 lines) + attribution |
+| Image slide    | 1 heading + 1 image (max 60vh height) |
+
+**Content exceeds limits? Split into more slides. Never cram, never shrink fonts to fit, never enable scrolling.**
+
+## Deck Length & Structure
+
+- **Default 8–12 slides** unless the user specifies otherwise. **Hard cap 16 slides** — bigger decks become unwieldy.
+- Pick a structure based on the purpose:
+  - **Pitch deck**: Hook → Problem → Solution → How it works → Traction → Market → Team → Ask
+  - **Product / feature demo**: Title → Why → What → How (3 features) → Demo → Pricing → Next steps
+  - **Educational**: Title → Learning goals → Concept 1 → Concept 2 → Concept 3 → Example → Recap → Q&A
+  - **Status / review**: Title → Wins → Numbers → Challenges → Next quarter → Ask
+- **One idea per slide.** Headlines lead: short, declarative, ideally <8 words. Body copy supports.
+
+## Slide Layout Palette (vary these — never use the same layout twice in a row)
+
+- **Title slide**: oversized headline, subtitle, optional brand mark / date / speaker name.
+- **Content slide**: headline + 4–6 bullets OR 2-column split (text left, visual right).
+- **Quote / pull-quote**: big quote, attribution, optional accent.
+- **Data slide**: big number (kpi) + label + small supporting chart (Chart.js).
+- **Image-led slide**: full-bleed image with caption overlay.
+- **Comparison slide**: side-by-side with checkmarks/crosses.
+- **Process / flow slide**: numbered steps with arrows / chevrons.
+- **Closing / CTA slide**: short CTA, contact, thank-you.
+
+## Aesthetic Direction — COMMIT BOLDLY
+
+**Pick a clear conceptual direction and execute it with precision.** No timid middle-ground choices. Bold maximalism and refined minimalism both work — what matters is intentionality.
+
+Before writing CSS, pick ONE aesthetic and commit:
+- **Bold Signal** — high-contrast monochrome + one electric accent, oversized type
+- **Electric Studio** — saturated brand color, generous whitespace, geometric accents
+- **Dark Botanical** — near-black + deep emerald + warm gold, organic curves
+- **Creative Voltage** — bright neon palette, kinetic typography, motion-led
+- **Neon Cyber** — black + cyan + magenta, scanlines / grid lines, terminal vibes
+- **Split Pastel** — soft duotones, rounded geometry, friendly playful
+- **Notebook Tabs** — paper textures, marker-style annotations, hand-drawn shapes
+- **Paper & Ink** — cream + black + warm red, classical serif, editorial restraint
+- **Swiss Modern** — pure white + black + one accent, grid-disciplined, helvetica-class fonts
+- **Vintage Editorial** — sepia / cream tones, classical serif headlines, golden-ratio layouts
+- **Pastel Geometry** — soft palette, bold shapes, layered transparencies
+- Or invent one that matches the topic. Don't always default to the same look.
+
+## Typography — DISTINCTIVE FONTS ONLY
+
+**Never use system fonts. Never use Inter, Roboto, or Arial.** Pull from Google Fonts or Fontshare. Pair a distinctive display font with a refined body font:
+- Editorial: `'Fraunces'` / `'Playfair Display'` / `'DM Serif Display'` + `'Source Sans 3'` body
+- Modern technical: `'Bricolage Grotesque'` / `'Instrument Serif'` / `'Geist'` + `'IBM Plex Sans'` body
+- Bold creative: `'Boldonse'` / `'Anton'` / `'Archivo Black'` + `'Manrope'` body
+- Mono accent: `'JetBrains Mono'` / `'Geist Mono'` / `'IBM Plex Mono'`
+- **Avoid `'Space Grotesk'` for everything** — it's an LLM cliché. Pick something else most of the time.
+
+Hebrew: `'Heebo'`, `'Rubik'`, `'Frank Ruhl Libre'`, `'Assistant'`. Arabic: `'Cairo'`, `'Tajawal'`, `'IBM Plex Sans Arabic'`, `'Reem Kufi'`.
+
+## Color & Background
+
+- Commit to a cohesive palette. **Dominant color with sharp accents beats timid evenly-distributed palettes.** Use CSS custom properties (`:root { --bg: ...; --fg: ...; --accent: ...; }`).
+- Backgrounds with atmosphere, not solid colors: layered gradients, gradient meshes, subtle noise texture (data-URI SVG noise), geometric patterns, grain overlays, scanlines, dot grids.
+- ❌ NEVER: default purple/violet gradient on white background — instant AI-slop signal.
+
+## Motion — High-Impact, Not Scattered
+
+- One well-orchestrated page-load with staggered reveals (`animation-delay` ladder) beats scattered micro-interactions sprinkled everywhere.
+- Slide transitions: `transform: translateX()` + `opacity` with 300–500ms ease-out cubic-bezier. No bouncy / corny effects.
+- Use CSS keyframes for everything. GSAP via CDN ONLY if you need a timeline or scroll-trigger.
+- Always include the `prefers-reduced-motion` media query.
+
+## Slide Mechanics
+
+- Each slide = `<section class="slide">` inside `<main id="deck">`.
+- Only ONE slide visible at a time. Non-active slides: `display: none` (or `opacity: 0; pointer-events: none` if cross-fading). Active slide: `.active` with the slide-type's display.
+- Navigation:
+  - Arrow keys: `ArrowRight` / `Space` → next, `ArrowLeft` → prev. `Home` / `End` → first/last.
+  - On-screen prev/next buttons at bottom corners, semi-transparent.
+  - Slide counter "3 / 10" in a corner.
+  - Press `F` for fullscreen (`document.documentElement.requestFullscreen()`). `Esc` exits.
+  - Press number keys 1–9 to jump to that slide.
+  - **RTL decks**: swap arrow direction — right arrow → previous, left arrow → next.
+- Subtle progress bar at the very top, fills as the user advances.
+
+## RTL / Multilingual
+
+- Detect language. Set `<html lang="he" dir="rtl">` (or appropriate) when content is Hebrew / Arabic / Persian / Urdu.
+- Use Tailwind logical properties (`me-*`, `ms-*`, `ps-*`, `pe-*`, `text-start`, `text-end`) or CSS logical properties (`margin-inline-start`).
+- Headline fonts: use locale-appropriate fonts (see Typography section).
+
+## Real Content, Not Lorem Ipsum
+
+- If the user gave you content, use it verbatim where appropriate.
+- If they gave a topic only, **invent plausible specific content** for that topic — real numbers, real-sounding quotes, real-feeling section headings. Never "Lorem ipsum", never "Insert your text here".
+
+## Output Discipline — HTML Artifact (NON-NEGOTIABLE)
+
+- Your reply MUST contain exactly ONE ` ```html ... ``` ` fenced code block with a COMPLETE, self-contained HTML document.
+- Document must start with `<!DOCTYPE html>` and include `<html>`, `<head>` (with `<meta charset="UTF-8">` + `<meta name="viewport" content="width=device-width, initial-scale=1">`), and `<body>`.
+- Embed ALL CSS inside `<style>` and ALL JavaScript inside `<script>`. No external CSS files, no relative asset paths. CDN URLs are fine.
+- Approved CDN libraries (use only what you need): Tailwind `<script src="https://cdn.tailwindcss.com"></script>`, GSAP, Chart.js, D3.js, Three.js, Lucide Icons, Framer Motion, React 18 + Babel standalone, Vue 3, date-fns.
+- Outside the html block you can write a one-line lead-in and a short 1–2 line note about how to iterate. Nothing else.
+- If the user wrote in any language other than English, write your lead-in / closing note in their language. Inside the HTML, match the in-page copy to the user's language and set the appropriate `lang` + `dir` attributes.
+
+## Media Integration
+
+If the conversation contains generated Kolbo media URLs (images, videos, audio), USE the actual URLs inside `<img>` / `<video>` / `<audio>` tags. Never substitute placeholder images or gradient backgrounds when real assets are available.
+
+## Publishing
+
+After the user approves the deck, offer `publish_html_artifact({ title, content })` to get a shareable `sites.kolbo.ai` URL. Server dedupes by content hash — re-publishing identical bytes returns the same URL. The page is served with strict CSP, so it cannot exfiltrate data; CDN frameworks still load.

package/skills/kolbo/references/models/landing-page.md

@@ -0,0 +1,135 @@
+<!-- PARITY: this file mirrors getLandingPageSystemPrompt() + HTML_ARTIFACT_BOILERPLATE
+     in kolbo-api/src/config/systemPrompt.js (lines ~1517–1622).
+     When that function changes, update this file in the same session. -->
+
+# Landing Page — Build Rules
+
+Load this file when the user wants to **build / create a landing page, marketing site, one-pager, product page, app launch page, SaaS sign-up page, or event page**. For slide decks see `models/html-presentation.md`; for dashboards / games / charts / widgets see `models/visual-code.md`.
+
+**Kolbo Code routing:** write the artifact as a single HTML block in your reply. Kolbo Code's panel renders it as a previewable artifact card. After approval, call `publish_html_artifact({ title, content })` to get a public `sites.kolbo.ai` URL.
+
+## 🎯 Design Thinking — Commit Before You Code
+
+Before writing CSS, lock these four answers:
+1. **Purpose** — what problem does this page solve, for whom?
+2. **Tone** — pick an EXTREME and execute it. Brutally minimal · maximalist chaos · retro-futuristic · organic / natural · luxury / refined · playful / toy-like · editorial / magazine · brutalist / raw · art deco / geometric · soft / pastel · industrial / utilitarian. **There are dozens of flavors — never default to the same one.**
+3. **Constraints** — framework, performance, accessibility.
+4. **Differentiation** — what's the ONE thing someone will remember 5 minutes after closing the tab?
+
+**Bold maximalism and refined minimalism BOTH work.** The killer is timid middle-ground. Intentionality, not intensity.
+
+## 🚨 Anti-AI-Slop Mandates
+
+- ❌ NEVER use `Inter`, `Roboto`, `Arial`, `-apple-system`, or any default system font.
+- ❌ NEVER ship the "purple-to-violet gradient on white background" look. It's the #1 LLM tell.
+- ❌ NEVER default to `Space Grotesk` everywhere — it's a tired LLM cliché. Use it occasionally for genuinely fitting briefs.
+- ❌ NEVER ship "centered card with rounded corners + medium-weight type" on every section.
+- ❌ NEVER use placeholder lorem ipsum unless explicitly asked. Invent plausible specific copy.
+
+## Typography — DISTINCTIVE FONTS ONLY
+
+Pull from Google Fonts or Fontshare. Pair a distinctive display font with a refined body font.
+- Editorial / luxury: `'Fraunces'`, `'Playfair Display'`, `'DM Serif Display'`, `'Instrument Serif'`, `'Cormorant Garamond'` + `'Source Sans 3'` or `'Inter Tight'` body
+- Bold modern: `'Bricolage Grotesque'`, `'Boldonse'`, `'Archivo Black'`, `'Anton'`, `'Familjen Grotesk'` + `'Manrope'` body
+- Technical / brutalist: `'JetBrains Mono'`, `'Geist Mono'`, `'IBM Plex Mono'`, `'Space Mono'`
+- Playful / display: `'Bagel Fat One'`, `'Climate Crisis'`, `'Caprasimo'`, `'Bungee'`
+- Hebrew: `'Heebo'`, `'Rubik'`, `'Frank Ruhl Libre'`, `'Assistant'`. Arabic: `'Cairo'`, `'Tajawal'`, `'IBM Plex Sans Arabic'`, `'Reem Kufi'`.
+
+Set them up correctly: `<link rel="preconnect" href="https://fonts.googleapis.com">` + `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` + `<link href="https://fonts.googleapis.com/css2?family=...&display=swap" rel="stylesheet">`.
+
+## Color & Theme
+
+- Commit to a cohesive palette. **Dominant color with sharp accents** beats timid evenly-distributed palettes. Use CSS variables (`:root { --bg: ...; --fg: ...; --accent: ...; --accent-2: ...; --muted: ...; }`).
+- Draw inspiration from IDE themes, cultural aesthetics, art movements — not Tailwind defaults.
+- Vary between light and dark themes across briefs. Dark default for: technical / startup / dev-tools / luxury / cinematic. Light default for: consumer / wellness / education / food / fashion.
+
+## Backgrounds & Visual Details — Atmosphere, Not Solid Colors
+
+- Gradient meshes (multiple radial gradients with low opacity)
+- Noise textures (data-URI SVG noise overlay at `opacity: 0.04–0.08`)
+- Geometric patterns, dot grids, line grids
+- Layered transparencies and blur (`backdrop-filter: blur()`)
+- Dramatic shadows (large soft shadows + sharp colored accent shadows)
+- Decorative borders (offset borders, dashed accents, hand-drawn SVG borders)
+- Grain overlays for film / editorial feel
+- Custom cursors when they fit the aesthetic
+
+## Spatial Composition — Break the Grid
+
+- Asymmetry. Overlap. Diagonal flow. Grid-breaking elements.
+- Generous negative space OR controlled density — pick one with intent.
+- Variations: split-screen, sidebar layouts, masonry, overlapping cards, full-bleed sections alternating with constrained ones.
+- **❌ Never** ship "8 stacked centered sections, each with the same padding".
+
+## Motion — High-Impact, Not Scattered
+
+- One well-orchestrated page-load with staggered reveals (`animation-delay` ladder) creates more delight than scattered micro-interactions everywhere.
+- Scroll-triggered fade-in / slide-in for sections: vanilla `IntersectionObserver` + CSS transitions, OR Framer Motion CDN if React.
+- Hover states on EVERY interactive element. Cursor: pointer. Subtle lift / color shift / underline-reveal.
+- Custom-easing animations (`cubic-bezier`), not linear.
+- Always include `@media (prefers-reduced-motion: reduce) { ... }`.
+
+## Section Architecture (pick what fits; never ship all 10 generically)
+
+1. **Sticky nav** — logo + 3–5 links + primary CTA, top-right.
+2. **Hero** — bold headline + 1-sentence subhead + primary CTA + hero visual (mockup / abstract / 3D / image). Above the fold.
+3. **Social proof strip** — "Trusted by X" + logo row or "1,000+ users" — small, just under hero.
+4. **Features / benefits** — 3 or 6 features in a grid, each with Lucide icon + headline + 1–2 sentences. Group by benefit, not feature dump.
+5. **How it works** — 3-step numbered flow.
+6. **Testimonials** — 2–4 quote cards with name / role / company. Real-sounding, specific.
+7. **Pricing** — 2–3 tiers, highlight the recommended one.
+8. **FAQ** — accordion of 4–8 common questions.
+9. **Final CTA** — repeat primary CTA in a bold full-width section.
+10. **Footer** — minimal: brand mark + 2 columns + copyright.
+
+Skip sections that don't fit (no pricing for a waitlist page, no testimonials for a brand-new launch). Don't pad with filler. **Drop sections rather than dilute the page.**
+
+## Hero Patterns (pick one based on the brand mood — DON'T always do centered)
+
+- **Centered hero**: huge headline center-aligned, subhead, CTA pair, hero visual below.
+- **Split hero**: text left, visual right (or reverse). Visual can be product mockup, abstract gradient, 3D scene.
+- **Editorial hero**: big serif headline, generous negative space, single CTA, optional pull-quote.
+- **Bold-statement hero**: solid color or textured background, ultra-large display font, single sentence, prominent CTA.
+- **Asymmetric hero**: offset headline, decorative shapes / typography overlap, rule-breaking layout.
+
+## Conversion Patterns
+
+- **One page, one goal.** Pick ONE primary CTA (Sign up / Buy / Book demo / Download / Join waitlist) and make every section pull toward it.
+- Above-the-fold CTA must be unmissable.
+- Sticky CTA on scroll (button appears in nav after hero scrolls past).
+- One value prop, three angles: hero / features / final CTA — same promise, different framings.
+- Social proof early — directly under hero, not buried at the bottom.
+- Buttons: max TWO styles — primary (filled, brand color, generous padding, hover lift) and secondary (ghost / outline). Never more.
+
+## Real Copy, Not Lorem Ipsum
+
+- Infer brand voice from the request: playful for consumer, precise for B2B, bold for DTC, refined for luxury, technical for dev-tools.
+- Write 2–3 punchy headline variants internally and pick the strongest.
+- Numbers and specifics beat vague claims. "10× faster" beats "Super fast". "$8.7M raised" beats "Well-funded".
+
+## Mobile-First & Responsive
+
+- Stack columns to single-column on mobile. Reduce font sizes proportionally. Hide non-essential decoration.
+- Test mentally at 375px width — would a thumb easily tap each CTA?
+- Use `clamp()` for fluid typography. Use `min()` / `max()` for constraints.
+
+## RTL / Multilingual
+
+- Detect language. Set `<html lang dir>` correctly. For Hebrew / Arabic, flip nav alignment, use Tailwind logical properties (`ms-*`, `me-*`, `ps-*`, `pe-*`, `text-start`, `text-end`).
+
+## Output Discipline — HTML Artifact (NON-NEGOTIABLE)
+
+- Reply MUST contain exactly ONE ` ```html ... ``` ` fenced code block with a COMPLETE, self-contained HTML document.
+- Document must start with `<!DOCTYPE html>` and include `<html>`, `<head>` (with `<meta charset="UTF-8">` + `<meta name="viewport" content="width=device-width, initial-scale=1">`), and `<body>`.
+- Embed ALL CSS inside `<style>` and ALL JavaScript inside `<script>`. No external CSS files, no relative asset paths. CDN URLs are fine.
+- Approved CDN libraries (use only what you need): Tailwind, GSAP, Chart.js, D3.js, Three.js, Lucide Icons, Framer Motion, React 18 + Babel standalone, Vue 3, date-fns.
+- Outside the html block: one-line lead-in and a short 1–2 line note about how to iterate. Nothing else.
+- If the user wrote in any language other than English, write your lead-in / closing note in their language. Inside the HTML, match the in-page copy and set `lang` + `dir` correctly.
+
+## Media Integration
+
+If the conversation contains generated Kolbo media URLs (images, videos, audio), USE the actual URLs inside `<img>` / `<video>` / `<audio>` tags. Never substitute placeholder images or gradient backgrounds when real assets are available.
+
+## Publishing
+
+After approval, offer `publish_html_artifact({ title, content })` to publish to `sites.kolbo.ai`. Server dedupes by content hash. Strict CSP (`connect-src 'none'`, `form-action 'none'`) — the page can't exfiltrate data, but CDN libraries still load.

package/skills/kolbo/references/models/music.md

@@ -0,0 +1,120 @@
+<!-- PARITY: this file mirrors getMusicPromptSystemPrompt() in
+     kolbo-api/src/config/systemPrompt.js (lines ~1259–1371).
+     When that function changes, update this file in the same session. -->
+
+# Music — Prompt Rules (Suno-led)
+
+Load this file when the user wants AI-generated **music** — full songs, lyrics, instrumentals, jingles, scores, soundtracks, lo-fi beats, trailers, ad music. Primarily Suno; the same craft applies to other music models. For TTS / voice cloning see `models/prompt-copilot.md`. For sound effects see SKILL.md "Sound Effects".
+
+**Kolbo MCP routing:** call `generate_music`. Suno is a model option — use `list_models({ type: "music_gen" })` to see versions. Pass `instrumental` and `duration` as separate params; pass the Style/Description text as `style` and the Lyrics as `lyrics`.
+
+## CRITICAL Kolbo Platform Rules
+
+- **Model version, duration, and instrumental toggle are MCP-tool params.** Don't write `v4.5`, `30 seconds`, or `instrumental: true` inside the prompt fields themselves.
+- Suno generations have **two separate input fields**: a **Style / Description** field (`style` param) and a **Lyrics** field (`lyrics` param). Output your prompt as **TWO separate fenced code blocks** so the user (and the tool call) know exactly what goes where.
+- Tell the user to run the prompt multiple times — Suno output varies significantly between generations, that's a feature. Use `num_generations` if the tool supports it, or fire 2–4 parallel `generate_music` calls.
+
+## How Music Prompting Actually Works
+
+Suno responds to **descriptive, layered prompts**, not vague ones.
+- ❌ "make a pop song"
+- ⚠️ "upbeat dance-pop, female vocals, glossy production, catchy chorus, summer vibe"
+- ✅ "Dance-pop track, bright analog synths, female lead vocal with airy harmonies, catchy four-on-the-floor hook, 120 BPM, summer road-trip energy"
+
+The formula: **Genre + Mood + Instrumentation + Vocal style + Tempo/BPM + Scene/era anchor**
+
+## The Style / Description Field (`style`)
+
+Pack these into one comma-separated descriptor line (no labels, no quotes around the whole thing — Suno reads it as a style descriptor):
+- **Genre / sub-genre** — `synthwave`, `neo-soul`, `bedroom indie pop`, `drill`, `baroque trap`, `cinematic orchestral trailer`
+- **Mood** — `melancholic`, `euphoric`, `tense`, `hopeful`, `hypnotic`, `nostalgic`
+- **Instrumentation** — `bright analog synths`, `fingerpicked nylon guitar`, `808 sub bass`, `brushed snare`, `Rhodes electric piano`, `strings + harpsichord`, `muted brass section`
+- **Vocal style** — `female lead with airy harmonies`, `whispered male falsetto`, `autotuned melodic rap`, `gospel choir backing`, `spoken-word female narrator`, `no vocals` (for instrumental)
+- **Tempo / BPM** — `120 BPM`, `slow tempo 70 BPM`, `uptempo 140 BPM`
+- **Era / production cue** — `80s analog warmth`, `modern polished pop production`, `lo-fi cassette tape feel`, `live-room reverb`, `bedroom production`
+- **Scene anchor (optional but powerful)** — `late night highway drive`, `80s prom night`, `rainy city rooftop`, `Tokyo bullet train`
+
+**Style cap**: keep this field to roughly **8–15 descriptors**. More starts to muddy the output.
+
+## The Lyrics Field (`lyrics`)
+
+Use Suno's section tags to control structure. Each tag goes on its own line, content under it:
+- `[Intro]`
+- `[Verse]` / `[Verse 1]` / `[Verse 2]`
+- `[Pre-Chorus]`
+- `[Chorus]`
+- `[Bridge]`
+- `[Outro]`
+- `[Instrumental]` / `[Solo]`
+
+**Production tags** (inline, in brackets — Suno follows them):
+- `[Bass drop]`, `[Beat switch]`, `[Tempo change]`
+- `[Whisper vocals]`, `[Falsetto]`, `[Spoken word]`, `[Gospel choir]`
+- `[Flute solo]`, `[Guitar riff]`, `[808 drop]`
+- `[Stop]`, `[Build up]`, `[Breakdown]`
+- `- crowd noise -`, `- record scratch -` (SFX in dashes)
+
+**Emphasis**: ALL CAPS amplifies intensity / emotion on that word or line. Use sparingly for impact moments.
+
+**Structure templates**:
+- Pop / radio: Intro → Verse → Chorus → Verse → Chorus → Bridge → Chorus → Outro
+- Hip-hop: Intro → Verse → Hook → Verse → Hook → Bridge → Hook → Outro
+- Cinematic / score: Intro (build) → Theme A → Theme B → Climax → Resolution
+- Lo-fi / chill: Intro → Loop A → Loop B → Loop A → Outro (often no vocals)
+
+## Power Moves
+
+- **Mix unexpected genres** — `country + EDM`, `folk + ambient synths`, `classical + trap drums`, `baroque + 808s`. Best outputs often come from contrast.
+- **Scene-based language beats sound-only language** — `late-night highway drive` does more work than `atmospheric`.
+- **Tags shape structure better than prose** — don't write "then there's a chorus", write `[Chorus]`.
+- **No real artist names** — Suno blocks them. Reverse-engineer their style: vocal style + production era + instrumentation + mood.
+- **Lean into imperfection** — Suno's quirks often produce the best moments. Don't over-correct.
+- **Generate multiple times** — same prompt produces wildly different songs. Tell the user to run 3–4 takes.
+
+## Workflow by Use Case
+
+### Full song with vocals
+- `style`: full descriptor stack
+- `lyrics`: tagged structure with lyric content
+- Recommend: 2–3 generations to compare
+
+### Instrumental / score / lo-fi beat
+- `style`: descriptor stack + `instrumental`, `no vocals`
+- `lyrics`: structure tags only (`[Intro]`, `[Theme A]`, `[Build]`, `[Drop]`), no lyric lines. Or leave empty and pass `instrumental: true` to the tool.
+
+### Jingle / ad music (15–30s)
+- `style`: short, punchy descriptor (`upbeat retail pop jingle, female vocal, claps, glossy production, summer energy`)
+- `lyrics`: 2–4 short lines max, often just chorus
+- Pass the shortest `duration` the tool supports.
+
+### Cinematic trailer / score
+- `style`: `cinematic orchestral trailer, swelling strings, taiko drums, hybrid choir, dramatic build, modern hybrid score`
+- `lyrics`: structure tags only — `[Intro]` `[Build]` `[Drop]` `[Climax]` `[Resolution]`
+- `instrumental: true`
+
+## Output Discipline
+
+Always output **two fenced code blocks**, clearly labeled (these map directly to `style` and `lyrics` MCP params):
+
+```
+STYLE / DESCRIPTION:
+<style descriptors, comma-separated, one line>
+```
+
+```
+LYRICS:
+[Intro]
+...
+[Verse]
+...
+[Chorus]
+...
+```
+
+When summarizing to the user, state separately:
+- **Instrumental:** yes / no (the `instrumental` param)
+- **Recommended duration:** short / medium / long (the `duration` param)
+- **Run takes:** N generations (usually 2–4) — fire them in parallel
+- **Why this works:** 1 line on the key genre / structure / instrumentation choice
+
+If the user is in any language other than English, explanations in their language; lyric language matches what the user wants (any language works in Suno).