hyperframes 0.1.6 → 0.1.8

package/dist/skills/captions/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: captions
+description: Build tone-adaptive captions from whisper transcripts. Detects script energy (hype, corporate, tutorial, storytelling, social) and applies matching typography, color, and animation. Supports per-word styling for brand names, ALL CAPS, numbers, and CTAs. Use when adding captions or subtitles to a HyperFrames composition.
+---
+
+# Captions
+
+Analyze the spoken content to determine caption style. If the user specifies a style, use that. Otherwise, detect tone from the transcript.
+
+## Transcript Source
+
+The project's `transcript.json` contains word-level timestamps from whisper.cpp (`--output-json-full` with `--dtw`):
+
+```json
+{
+  "transcription": [
+    {
+      "offsets": { "from": 0, "to": 5000 },
+      "text": " Hello world.",
+      "tokens": [
+        { "text": " Hello", "offsets": { "from": 0, "to": 1000 }, "p": 0.98 },
+        { "text": " world", "offsets": { "from": 1000, "to": 2000 }, "p": 0.95 }
+      ]
+    }
+  ]
+}
+```
+
+Normalize tokens into a word array before grouping:
+
+```js
+const words = [];
+for (const segment of transcript.transcription) {
+  for (const token of segment.tokens || []) {
+    const text = token.text.trim();
+    if (!text) continue;
+    words.push({
+      text,
+      start: token.offsets.from / 1000,
+      end: token.offsets.to / 1000,
+    });
+  }
+}
+```
+
+If no `transcript.json` exists, check for `.srt` or `.vtt` files. If no transcript is available, ask the user to provide one or run `hyperframes transcribe` (when available).
+
+## Style Detection (Default — When No Style Is Specified)
+
+Read the full transcript before choosing a style. The style comes from the content, not a template.
+
+### Four Dimensions
+
+**1. Visual feel** — the overall aesthetic personality:
+
+- Corporate/professional scripts → clean, minimal, restrained
+- Energetic/marketing scripts → bold, punchy, high-impact
+- Storytelling/narrative scripts → elegant, warm, cinematic
+- Technical/educational scripts → precise, high-contrast, structured
+- Social media/casual scripts → playful, dynamic, friendly
+
+**2. Color palette** — driven by the content's mood:
+
+- Dark backgrounds with bright accents for high energy
+- Muted/neutral tones for professional or calm content
+- High contrast (white on black, black on white) for clarity
+- One accent color for emphasis — not multiple
+
+**3. Font mood** — typography character, not specific font names:
+
+- Heavy/condensed for impact and energy
+- Clean sans-serif for modern and professional
+- Rounded for friendly and approachable
+- Serif for elegance and storytelling
+
+**4. Animation character** — how words enter and exit:
+
+- Scale-pop/slam for punchy energy
+- Gentle fade/slide for calm or professional
+- Word-by-word reveal for emphasis
+- Typewriter for technical or narrative pacing
+
+## Per-Word Styling
+
+Scan the script for words that deserve distinct visual treatment. Not every word is equal — some carry the message.
+
+### What to Detect
+
+- **Brand names / product names** — larger size, unique color, distinct entrance
+- **ALL CAPS words** — the author emphasized them intentionally. Scale boost, flash, or accent color.
+- **Numbers / statistics** — bold weight, accent color. Numbers are the payload in data-driven content.
+- **Emotional keywords** — "incredible", "insane", "amazing", "revolutionary" → exaggerated animation (overshoot, bounce)
+- **Proper nouns** — names of people, places, events → distinct accent or italic
+- **Call-to-action phrases** — "sign up", "get started", "try it now" → highlight, underline, or color pop
+
+### How to Apply
+
+For each detected word, specify:
+
+- Font size multiplier (e.g., 1.3x for emphasis, 1.5x for hero moments)
+- Color override (specific hex value)
+- Weight/style change (bolder, italic)
+- Animation variant (overshoot entrance, glow pulse, scale pop)
+
+## Script-to-Style Mapping
+
+| Script tone          | Font mood                             | Animation                               | Color                                        | Size                 |
+| -------------------- | ------------------------------------- | --------------------------------------- | -------------------------------------------- | -------------------- |
+| Hype/launch          | Heavy condensed, 800-900 weight       | Scale-pop, back.out(1.7), fast 0.1-0.2s | Bright accent on dark (cyan, yellow, lime)   | Large 72-96px        |
+| Corporate/pitch      | Clean sans-serif, 600-700 weight      | Fade + slide-up, power3.out, 0.3s       | White/neutral on dark, single muted accent   | Medium 56-72px       |
+| Tutorial/educational | Mono or clean sans, 500-600 weight    | Typewriter or gentle fade, 0.4-0.5s     | High contrast, minimal color                 | Medium 48-64px       |
+| Storytelling/brand   | Serif or elegant sans, 400-500 weight | Slow fade, power2.out, 0.5-0.6s         | Warm muted tones, low opacity (0.85-0.9)     | Smaller 44-56px      |
+| Social/casual        | Rounded sans, 700-800 weight          | Bounce, elastic.out, word-by-word       | Playful colors, colored backgrounds on pills | Medium-large 56-80px |
+
+## Word Grouping by Tone
+
+Group size affects pacing. Fast content needs fast caption turnover.
+
+- **High energy:** 2-3 words per group. Quick turnover matches rapid delivery.
+- **Conversational:** 3-5 words per group. Natural phrase length.
+- **Measured/calm:** 4-6 words per group. Longer groups match slower pace.
+
+Break groups on sentence boundaries (`.` `?` `!`), pauses (>150ms gap), or max word count — whichever comes first.
+
+## Positioning
+
+- **Landscape (1920x1080):** Bottom 80-120px, centered
+- **Portrait (1080x1920):** Lower middle ~600-700px from bottom, centered
+- Never cover the subject's face
+- Use `position: absolute` — never relative (causes overflow)
+- One caption group visible at a time
+
+## Constraints
+
+- **Deterministic.** No `Math.random()`, no `Date.now()`.
+- **Sync to transcript timestamps.** Words appear when spoken.
+- **One group visible at a time.** No overlapping caption groups.
+- **Check project root** for font files before defaulting to Google Fonts.

package/dist/skills/compose-video/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: compose-video
+description: Create HyperFrames HTML video compositions. Use when asked to create a video, build an animation, make a composition, add a title card, or generate any HTML-based video content for HyperFrames.
+---
+
+# Compose Video
+
+HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
+
+## Approach
+
+Before writing HTML, think at a high level:
+
+1. **What** — what should the viewer experience? Identify the narrative arc, key moments, and emotional beats.
+2. **Structure** — how many compositions, which are sub-compositions vs inline, what tracks carry what (video, audio, overlays, captions).
+3. **Timing** — which clips drive the duration, where do transitions land, what's the pacing.
+4. **Execute** — then implement using the rules below.
+
+For small edits (fix a color, adjust timing, add one element), skip straight to the rules.
+
+When no `visual-style.md` or animation direction is provided, follow [house-style.md](./house-style.md) for motion defaults, sizing, and color palettes.
+
+## Data Attributes
+
+### All Clips
+
+| Attribute          | Required                          | Values                                                 |
+| ------------------ | --------------------------------- | ------------------------------------------------------ |
+| `id`               | Yes                               | Unique identifier                                      |
+| `data-start`       | Yes                               | Seconds or clip ID reference (`"el-1"`, `"intro + 2"`) |
+| `data-duration`    | Required for img/div/compositions | Seconds. Video/audio defaults to media duration.       |
+| `data-track-index` | Yes                               | Integer. Same-track clips **cannot overlap**.          |
+| `data-media-start` | No                                | Trim offset into source (seconds)                      |
+| `data-volume`      | No                                | 0-1 (default 1)                                        |
+
+`data-track-index` does **not** affect visual layering — use CSS `z-index`.
+
+### Composition Clips
+
+| Attribute                    | Required | Values                                       |
+| ---------------------------- | -------- | -------------------------------------------- |
+| `data-composition-id`        | Yes      | Unique composition ID                        |
+| `data-duration`              | Yes      | Takes precedence over GSAP timeline duration |
+| `data-width` / `data-height` | Yes      | Pixel dimensions (1920x1080 or 1080x1920)    |
+| `data-composition-src`       | No       | Path to external HTML file                   |
+
+## Composition Structure
+
+Every composition is a `<template>` wrapping a `<div>` with `data-composition-id`. Each must include its own GSAP script and register its timeline:
+
+```html
+<template id="my-comp-template">
+  <div data-composition-id="my-comp" data-width="1920" data-height="1080">
+    <!-- content -->
+    <style>
+      [data-composition-id="my-comp"] {
+        /* scoped styles */
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      // tweens...
+      window.__timelines["my-comp"] = tl;
+    </script>
+  </div>
+</template>
+```
+
+Load in root: `<div id="el-1" data-composition-id="my-comp" data-composition-src="compositions/my-comp.html" data-start="0" data-duration="10" data-track-index="1"></div>`
+
+## Video and Audio
+
+Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
+
+```html
+<video
+  id="el-v"
+  data-start="0"
+  data-duration="30"
+  data-track-index="0"
+  src="video.mp4"
+  muted
+  playsinline
+></video>
+<audio
+  id="el-a"
+  data-start="0"
+  data-duration="30"
+  data-track-index="2"
+  src="video.mp4"
+  data-volume="1"
+></audio>
+```
+
+## Timeline Contract
+
+- All timelines start `{ paused: true }` — the player controls playback
+- Register every timeline: `window.__timelines["<composition-id>"] = tl`
+- Framework auto-nests sub-timelines — do NOT manually add them
+- Duration comes from `data-duration`, not from GSAP timeline length
+- Never create empty tweens to set duration
+
+## Rules (Non-Negotiable)
+
+**Deterministic:** No `Math.random()`, `Date.now()`, or time-based logic. The renderer must produce identical output every time.
+
+**GSAP:** Only animate visual properties (`opacity`, `x`, `y`, `scale`, `rotation`, `color`, `backgroundColor`, `borderRadius`, transforms). Do NOT animate `visibility`, `display`, or call `video.play()`/`audio.play()`.
+
+**Animation conflicts:** Never animate the same property on the same element from multiple timelines simultaneously — causes flickering in headless renders.
+
+**Never do:**
+
+1. Forget `window.__timelines` registration
+2. Use video for audio — always muted video + separate `<audio>`
+3. Nest video inside a timed div — use a non-timed wrapper
+4. Use `data-layer` (use `data-track-index`) or `data-end` (use `data-duration`)
+5. Animate video element dimensions — animate a wrapper div
+6. Call play/pause/seek on media — framework owns playback
+7. Create a top-level container without `data-composition-id`
+
+## Editing Existing Compositions
+
+- Read the full composition first — match existing fonts, colors, animation patterns
+- Only change what was requested — don't rewrite untouched sections
+- Don't rewrite entire files for small changes
+- Preserve timing of unrelated clips
+
+## Typography and Assets
+
+- Every composition loads its own fonts (`@import` or `@font-face` in `<style>`)
+- Use `font-display: block` for local fonts — renderer needs fonts loaded before capturing
+- Add `crossorigin="anonymous"` to media loaded from external URLs
+- Minimum readable text: 20px landscape, 18px portrait
+- All files (video, audio, fonts, images) live at the project root alongside `index.html`
+- From sub-compositions, use `../` to reference root files
+
+For PiP, title cards, and slide show patterns, see [patterns.md](./patterns.md).
+For data, stats, and infographics, see [data-in-motion.md](./data-in-motion.md).
+
+## Output Checklist
+
+- [ ] Every top-level container has `data-composition-id`
+- [ ] Every composition has `data-width`, `data-height`, `data-duration`
+- [ ] Compositions in own HTML files, loaded via `data-composition-src`
+- [ ] `<template>` wrapper on sub-compositions
+- [ ] `window.__timelines` registered for every composition
+- [ ] 100% deterministic — no randomness
+- [ ] Each composition includes GSAP: `<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>`

package/dist/skills/compose-video/data-in-motion.md

@@ -0,0 +1,19 @@
+# Data in Motion
+
+Light guidance for data and stats in video compositions. The [house style](./house-style.md) handles aesthetics — this just addresses data-specific pitfalls.
+
+## Visual Continuity
+
+When successive stats belong to the same concept (Q1 → Q2 → Q3 → Q4, or three metrics for the same product), keep them in the same visual space with the same aesthetic. Only the VALUE changes. An aesthetic change should signal a new concept, not just a new number.
+
+## Numbers Need Visual Weight
+
+A number on its own floats in empty space. Pair every metric with a visual element that gives it presence — a proportional fill bar, a background color shift, a shape that represents the value, a progress ring. The visual doesn't need to be a chart — it just needs to fill the frame and make the data feel tangible rather than just text on a background.
+
+## Avoid Web Patterns
+
+- **No pie charts** — hard to compare, looks like PowerPoint
+- **No multi-axis charts** — viewer can't study intersections in a 3-second window
+- **No 6-panel dashboards** — 2-3 related metrics side-by-side is fine, 6+ is a web pattern
+- **No gridlines, tick marks, or legends** — visual noise that adds nothing in motion
+- **No chart library output** — build with GSAP + SVG/CSS, not D3 or Chart.js

package/dist/skills/compose-video/house-style.md

@@ -0,0 +1,130 @@
+# House Style
+
+Defaults when no `visual-style.md` or animation direction is provided. These raise the floor — not a brand identity, just professional quality.
+
+## Before Writing HTML
+
+1. **Interpret the prompt.** Generate real content for the topic — don't use the prompt text as body copy. A recipe lists real ingredients. A stats dashboard shows the actual numbers given. A product showcase names real features and specs. A sci-fi HUD has actual crosshairs and readouts, not a heading that says "sci-fi HUD."
+2. **Pick a palette.** First decide: does this content call for a light or dark canvas? Food, weddings, children, wellness, education, lifestyle, nature, and celebrations → light palette (Warm/Editorial, Clean/Corporate, Nature/Earth, Pastel/Soft). Tech, finance, cinema, nightlife, horror, gaming, and premium → dark palette. Then load the file and pick one palette. Declare your bg, fg, and accent colors before writing any code.
+3. **Pick a typeface.** Don't reach for Sora, Space Grotesk, Outfit, Playfair Display, Cormorant Garamond, or Bodoni Moda — they're overused. Explore the full range of Google Fonts. Serif for editorial, mono for technical, display for impact, handwritten for personal.
+4. **Pick a layout approach.** Don't default to the same structure every time. Options: full-bleed centered hero, left-aligned editorial column, split-frame (content left / visual right or vice versa), scattered/asymmetric positioning, grid-based with uneven cells, stacked vertical sections. Vary this across compositions.
+5. **Pick your entrance patterns.** Plan how elements enter — never use the same entrance pattern twice in a composition.
+
+## Motion
+
+### Easing
+
+Vary your eases. Don't use the same ease on more than 2 tweens in a composition. Pick from the full GSAP vocabulary:
+
+`power1-4.in/out/inOut`, `back.out(1.4-2.5)`, `elastic.out(1, 0.3-0.5)`, `circ.out`, `expo.out`, `sine.inOut`, `steps(n)`
+
+A few principles:
+
+- Opacity fades should be gentle (`power1` or `none`) — don't draw attention to the fade itself
+- Overshoot on scale or position feels alive — `back.out` or `elastic.out`
+- Snappy moves want `expo.out` or `power4.out` — fast departure, hard stop
+- Smooth arcs want `sine.inOut` or `circ.inOut` — no hard edges
+
+### Timing
+
+- **0.3–0.6s** for most moves. Shorter than you think.
+- **Exits 2x faster** than entrances.
+- **Nothing starts at t=0** — offset first animation 0.1–0.3s.
+- **Overlap entries** — next element starts before previous finishes. Use GSAP position parameter: `tl.to(el, {...}, "-=0.15")`
+- **Stagger with easing**, not uniform: `stagger: { each: 0.08, ease: "power2.in" }`
+
+### Entrance Patterns
+
+Never fade-in alone. Combine opacity with at least one transform. Never repeat the same entrance in a composition. Invent your own combinations — mix properties creatively:
+
+- **Position** — x, y, or both (diagonal). Vary the axis and distance per element.
+- **Scale** — from smaller or larger. Pair with overshoot easing.
+- **Rotation** — small angles (3-12deg) feel intentional. Large angles (45-180deg) feel dramatic.
+- **Clip path** — `inset()`, `circle()`, `polygon()`. Direction matters: left, right, top, center outward.
+- **Blur + opacity** — `filter: blur(8px)` combined with opacity creates a focus-pull effect.
+- **Letter spacing / word spacing** — for text, animate tracking from wide to tight or vice versa.
+- **Skew** — `skewX` or `skewY` gives a motion-blur feeling without actual blur.
+- **3D transforms** — `rotationX`, `rotationY` with `transformPerspective` for depth.
+
+Don't copy the same combination across compositions. Each composition should feel like it has its own motion personality.
+
+### Choreography
+
+- **Combined transforms** — animate 2–3 properties together (position + scale, rotation + opacity), not one at a time.
+- **Coordinated entry** — when a new element enters, existing elements react. Anchor moves, follower tracks.
+- **Ambient motion** — keep the composition alive during holds. Don't default to zoom-in every time. Pick one per composition:
+  - Slow pan (x or y drift on a container)
+  - Subtle rotation (0.5–2deg over several seconds)
+  - Scale push or pull (zoom in OR out — both work)
+  - Parallax layers (background moves slower than foreground)
+  - Color/opacity shift on an accent element
+  - No ambient motion at all — stillness can be powerful
+- **End with intention** — don't always zoom at the end. Options: snap to black, fade to stillness, final element snaps into place, a hard cut. Vary this across compositions.
+
+### Scene Pacing
+
+Structure compositions in three phases — don't front-load everything:
+
+- **Build (0–30%)** — elements enter. Stagger arrivals so there's a sequence, not a simultaneous dump.
+- **Breathe (30–70%)** — content is visible. Keep it alive with subtle motion: slow camera push, gentle drift, a color shift, a pulsing accent. Static holds feel dead.
+- **Resolve (70–100%)** — elements exit or the composition punctuates. Exits are faster than entrances. End with intention — a final zoom, a fade to black, a snap to stillness.
+
+Don't crowd the build phase. If you have 6 elements, let 2-3 enter, breathe, then bring in the rest. Layers of reveals beat a single wave.
+
+## Sizing
+
+- **Text scale contrast** — headings at 3–5x body size, not 1.5x. Big contrast reads as cinematic.
+- **Element fill** — hero elements fill 60–80% of the frame. Don't leave them floating at 30%.
+- **Travel distance** — entrance moves should cover 80–200px. Under 20px looks like a glitch.
+- **Overshoot** — 5–10% overshoot reads as energy. Under 2% reads as a bug.
+
+## Visual Depth
+
+Flat single-color backgrounds look digital. Avoid pure solid backgrounds — add some visual layer to break the flatness. Options include gradients, subtle background shapes, texture, shadows on cards, or border accents. Pick what fits the content — not every composition needs the same treatment. A luxury product wants subtle gradients. A children's show wants bold shapes. A news graphic wants clean borders.
+
+## Typography
+
+Beyond choosing a typeface:
+
+- **Weight contrast** — pair a heavy weight (700-900) headline with a light weight (300-400) body. Always use at least two explicit font-weight values — even with display fonts that look bold by default, set labels or secondary text to a lighter weight.
+- **Case deliberately** — ALL CAPS for labels and short text (under 5 words). Sentence case for longer text. Don't uppercase paragraphs.
+- **Tracking** — tight tracking (-0.02em) on large headlines. Normal or wide tracking on small labels.
+- **One typeface, two weights** — don't mix typefaces unless you have a reason. One family at two weights creates more hierarchy than two families at one weight each.
+
+## Anti-Defaults
+
+Things the LLM reaches for that look generic. Do the opposite.
+
+| Default                           | Instead                                                                                                                                                                                                                                          |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Inter / Roboto / system font      | Pick a typeface with character — commit to it                                                                                                                                                                                                    |
+| `#f5f5f5` / `#333` / mid-gray     | Go high contrast. Near-black or near-white, not the middle                                                                                                                                                                                       |
+| Blue accent `#3b82f6`             | No blue unless the user asks for blue                                                                                                                                                                                                            |
+| Everything centered, equal weight | One focal point per frame. Lead the eye somewhere                                                                                                                                                                                                |
+| Uniform spacing                   | Tight clusters and open gaps. Vary deliberately                                                                                                                                                                                                  |
+| Same entrance on every element    | Never repeat an entrance pattern in a composition                                                                                                                                                                                                |
+| 1s duration on everything         | 0.3–0.6s. Shorter than you think                                                                                                                                                                                                                 |
+| `power2.out` on everything        | Vary eases — no more than 2 independent tweens with the same ease (staggers are exempt)                                                                                                                                                          |
+| Always dark background            | Match the content: food, weddings, kids, wellness, education → light palette                                                                                                                                                                     |
+| Inventing colors per-element      | Declare palette up front. Every element references it                                                                                                                                                                                            |
+| Content in cards/containers       | Place content directly on the canvas — separate with space and alignment, not box boundaries. Cards are a web pattern. Exception: dashboards, lower thirds, captions over footage                                                                |
+| Hand-drawn SVG illustrations      | Don't attempt to draw real-world objects (faces, buildings, food, animals) with SVG paths — they look crude. Use geometric shapes, lines, and abstract forms only. If the composition needs imagery, use text and typography to evoke it instead |
+| Overlapping elements              | Every element needs its own clear space. Check that positioned elements don't collide — stagger positions vertically with enough margin. Overlapping text is always ugly                                                                         |
+
+## Palettes
+
+Before writing any HTML, declare your palette: one background, one foreground, one accent. Pick from a category below — don't invent colors. **Match palette to content** — don't default to dark. Children's content, food, weddings, wellness, education, and lifestyle content should typically use light or warm palettes.
+
+| Category          | Use for                                       | File                                                       |
+| ----------------- | --------------------------------------------- | ---------------------------------------------------------- |
+| Bold / Energetic  | Product launches, social media, announcements | [palettes/bold-energetic.md](palettes/bold-energetic.md)   |
+| Warm / Editorial  | Storytelling, documentaries, case studies     | [palettes/warm-editorial.md](palettes/warm-editorial.md)   |
+| Dark / Premium    | Tech, finance, luxury, cinematic              | [palettes/dark-premium.md](palettes/dark-premium.md)       |
+| Clean / Corporate | Explainers, tutorials, presentations          | [palettes/clean-corporate.md](palettes/clean-corporate.md) |
+| Nature / Earth    | Sustainability, outdoor, organic              | [palettes/nature-earth.md](palettes/nature-earth.md)       |
+| Neon / Electric   | Gaming, tech, nightlife                       | [palettes/neon-electric.md](palettes/neon-electric.md)     |
+| Pastel / Soft     | Fashion, beauty, lifestyle, wellness          | [palettes/pastel-soft.md](palettes/pastel-soft.md)         |
+| Jewel / Rich      | Luxury, events, sophisticated                 | [palettes/jewel-rich.md](palettes/jewel-rich.md)           |
+| Monochrome        | Dramatic, typography-focused                  | [palettes/monochrome.md](palettes/monochrome.md)           |
+
+**Escape hatch:** If no category fits, derive from the color wheel — pick a base hue, take its complement or triadic, pull a dark from OKLCH lightness 15% and a light from 90%.

package/dist/skills/compose-video/palettes/bold-energetic.md

@@ -0,0 +1,14 @@
+# Bold / Energetic
+
+Product launches, social media, announcements, high-energy content.
+
+```
+#FFBE0B #FB5607 #FF006E #8338EC #3A86FF
+#F72585 #7209B7 #3A0CA3 #4361EE #4CC9F0
+#EF476F #FFD166 #06D6A0 #118AB2 #073B4C
+#FF595E #FFCA3A #8AC926 #1982C4 #6A4C93
+#9B5DE5 #F15BB5 #FEE440 #00BBF9 #00F5D4
+#390099 #9E0059 #FF0054 #FF5400 #FFBD00
+#3D348B #7678ED #F7B801 #F18701 #F35B04
+#FFBC42 #D81159 #8F2D56 #218380 #73D2DE
+```

package/dist/skills/compose-video/palettes/clean-corporate.md

@@ -0,0 +1,14 @@
+# Clean / Corporate
+
+Explainers, tutorials, presentations, professional content.
+
+```
+#FFFCF2 #CCC5B9 #403D39 #252422 #EB5E28
+#22223B #4A4E69 #9A8C98 #C9ADA7 #F2E9E4
+#3D5A80 #98C1D9 #E0FBFC #EE6C4D #293241
+#2B2D42 #8D99AE #EDF2F4 #EF233C #D90429
+#353535 #3C6E71 #FFFFFF #D9D9D9 #284B63
+#E7ECEF #274C77 #6096BA #A3CEF1 #8B8C89
+#CFDBD5 #E8EDDF #F5CB5C #242423 #333533
+#2F6690 #3A7CA5 #D9DCD6 #16425B #81C3D7
+```

package/dist/skills/compose-video/palettes/dark-premium.md

@@ -0,0 +1,14 @@
+# Dark / Premium
+
+Tech, finance, luxury, cinematic content.
+
+```
+#000000 #14213D #FCA311 #E5E5E5 #FFFFFF
+#000814 #001D3D #003566 #FFC300 #FFD60A
+#0D1B2A #1B263B #415A77 #778DA9 #E0E1DD
+#0D1321 #1D2D44 #3E5C76 #748CAB #F0EBD8
+#011627 #FDFFFC #2EC4B6 #E71D36 #FF9F1C
+#0B090A #161A1D #660708 #A4161A #E5383B
+#001427 #708D81 #F4D58D #BF0603 #8D0801
+#001524 #15616D #FFECD1 #FF7D00 #78290F
+```

package/dist/skills/compose-video/palettes/jewel-rich.md

@@ -0,0 +1,14 @@
+# Jewel / Rich
+
+Luxury, events, sophisticated, high-end content.
+
+```
+#5F0F40 #9A031E #FB8B24 #E36414 #0F4C5C
+#780000 #C1121F #FDF0D5 #003049 #669BBC
+#10002B #240046 #3C096C #5A189A #7B2CBF
+#355070 #6D597A #B56576 #E56B6F #EAAC8B
+#6F1D1B #BB9457 #432818 #99582A #FFE6A7
+#231942 #5E548E #9F86C0 #BE95C4 #E0B1CB
+#461220 #8C2F39 #B23A48 #FCB9B2 #FED0BB
+#780116 #F7B538 #DB7C26 #D8572A #C32F27
+```

package/dist/skills/compose-video/palettes/monochrome.md

@@ -0,0 +1,14 @@
+# Monochrome
+
+Dramatic, typography-focused, serious content.
+
+```
+#F8F9FA #E9ECEF #DEE2E6 #CED4DA #ADB5BD #6C757D #495057 #343A40 #212529
+#0466C8 #0353A4 #023E7D #002855 #001233
+#012A4A #013A63 #01497C #2A6F97 #468FAF #89C2D9
+#582F0E #7F4F24 #936639 #A68A64 #C2C5AA
+#463F3A #8A817C #BCB8B1 #F4F3EE #E0AFA0
+#03071E #370617 #6A040F #9D0208 #DC2F02 #F48C06 #FFBA08
+#590D22 #800F2F #A4133C #FF4D6D #FF8FA3 #FFCCD5
+#220901 #621708 #941B0C #BC3908 #F6AA1C
+```

package/dist/skills/compose-video/palettes/nature-earth.md

@@ -0,0 +1,14 @@
+# Nature / Earth
+
+Sustainability, outdoor, organic, wellness content.
+
+```
+#606C38 #283618 #FEFAE0 #DDA15E #BC6C25
+#DAD7CD #A3B18A #588157 #3A5A40 #344E41
+#386641 #6A994E #A7C957 #F2E8CF #BC4749
+#CAD2C5 #84A98C #52796F #354F52 #2F3E46
+#F0EAD2 #DDE5B6 #ADC178 #A98467 #6C584C
+#132A13 #31572C #4F772D #90A955 #ECF39E
+#6B9080 #A4C3B2 #CCE3DE #EAF4F4 #F6FFF8
+#233D4D #FE7F2D #FCCA46 #A1C181 #619B8A
+```

package/dist/skills/compose-video/palettes/neon-electric.md

@@ -0,0 +1,14 @@
+# Neon / Electric
+
+Gaming, tech, nightlife, Gen Z content.
+
+```
+#F72585 #B5179E #7209B7 #560BAD #3A0CA3
+#70D6FF #FF70A6 #FF9770 #FFD670 #E9FF70
+#7400B8 #6930C3 #5E60CE #5390D9 #48BFE3
+#0B132B #1C2541 #3A506B #5BC0BE #6FFFE9
+#540D6E #EE4266 #FFD23F #3BCEAC #0EAD69
+#2D00F7 #6A00F4 #8900F2 #A100F2 #F20089
+#FF6D00 #FF7900 #FF8500 #FF9100 #240046
+#BBFBFF #8DD8FF #4E71FF #5409DA
+```

package/dist/skills/compose-video/palettes/pastel-soft.md

@@ -0,0 +1,14 @@
+# Pastel / Soft
+
+Fashion, beauty, lifestyle, wellness content.
+
+```
+#CDB4DB #FFC8DD #FFAFCC #BDE0FE #A2D2FF
+#CCD5AE #E9EDC9 #FEFAE0 #FAEDCD #D4A373
+#FFD6FF #E7C6FF #C8B6FF #B8C0FF #BBD0FF
+#FFA69E #FAF3DD #B8F2E6 #AED9E0 #5E6472
+#EDAFB8 #F7E1D7 #DEDBD2 #B0C4B1 #4A5759
+#555B6E #89B0AE #BEE3DB #FAF9F9 #FFD6BA
+#006D77 #83C5BE #EDF6F9 #FFDDD2 #E29578
+#0081A7 #00AFB9 #FDFCDC #FED9B7 #F07167
+```

package/dist/skills/compose-video/palettes/warm-editorial.md

@@ -0,0 +1,14 @@
+# Warm / Editorial
+
+Storytelling, documentaries, case studies, narrative content.
+
+```
+#264653 #2A9D8F #E9C46A #F4A261 #E76F51
+#335C67 #FFF3B0 #E09F3E #9E2A2B #540B0E
+#F4F1DE #E07A5F #3D405B #81B29A #F2CC8F
+#F6BD60 #F7EDE2 #F5CAC3 #84A59D #F28482
+#003049 #D62828 #F77F00 #FCBF49 #EAE2B7
+#588B8B #FFFFFF #FFD5C2 #F28F3B #C8553D
+#283D3B #197278 #EDDDD4 #C44536 #772E25
+#0D3B66 #FAF0CA #F4D35E #EE964B #F95738
+```