takomi 2.1.45 → 2.5.4

package/assets/.agent/skills/hyperframes-creative/palettes/bold-energetic.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/clean-corporate.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/dark-premium.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/jewel-rich.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/monochrome.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/nature-earth.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/neon-electric.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/pastel-soft.md

@@ -1,14 +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
-```
+# 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/assets/.agent/skills/hyperframes-creative/palettes/warm-editorial.md

@@ -1,14 +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
-```
+# 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
+```

package/assets/.agent/skills/hyperframes-creative/references/audio-reactive.md

@@ -1,76 +1,76 @@
-# Audio-Reactive Animation
-
-Drive visuals from music, voice, or sound. Any GSAP-animatable property can respond to pre-extracted audio data.
-
-## Audio Data Format
-
-```js
-var AUDIO_DATA = {
-  fps: 30,
-  totalFrames: 900,
-  frames: [{ bands: [0.82, 0.45, 0.31, ...] }, ...]
-};
-```
-
-- `frames[i].bands[]` — frequency band amplitudes, 0-1. Index 0 = bass, higher = treble.
-- Each band normalized independently across the full track.
-
-## Mapping Audio to Visuals
-
-| Audio signal           | Visual property                   | Effect                     |
-| ---------------------- | --------------------------------- | -------------------------- |
-| Bass (bands[0])        | `scale`                           | Pulse on beat              |
-| Treble (bands[12-14])  | `textShadow`, `boxShadow`         | Glow intensity             |
-| Overall amplitude      | `opacity`, `y`, `backgroundColor` | Breathe, lift, color shift |
-| Mid-range (bands[4-8]) | `borderRadius`, `width`           | Shape morphing             |
-
-Any GSAP-tweenable property works — `clipPath`, `filter`, SVG attributes, CSS custom properties.
-
-## Content, Not Medium
-
-Audio provides **timing and intensity**. The visual vocabulary comes from the narrative.
-
-**Never add:** equalizer bars, spectrum analyzers, waveform displays, musical notes clip art, generic particle systems, rainbow color cycling, strobing white on beats, abstract pulsing orbs.
-
-**Instead:** Let content guide the visual and audio drive its behavior. Bass makes warmth _swell_. Treble sharpens _contrast_. The visual choice comes from "what does this piece feel like?"
-
-## Sampling Pattern
-
-Audio reactivity requires per-frame sampling via a `for` loop with `tl.call()`, not a single tween:
-
-```js
-// ✅ Correct — sample every frame
-for (var f = 0; f < AUDIO_DATA.totalFrames; f++) {
-  tl.call(
-    (function (frame) {
-      return function () {
-        draw(frame);
-      };
-    })(AUDIO_DATA.frames[f]),
-    [],
-    f / AUDIO_DATA.fps,
-  );
-}
-
-// ❌ Wrong — single tween, doesn't react to audio
-gsap.to(".el", { scale: 1.2, duration: totalDuration });
-```
-
-Without per-frame sampling, the composition doesn't actually react to audio.
-
-## textShadow Gotcha
-
-`textShadow` on a parent container with semi-transparent children (e.g., inactive caption words at `rgba(255,255,255,0.3)`) renders a visible glow rectangle behind all children. Fix: apply `scale` to the container for beat pulse, but apply `textShadow` to individual active words only.
-
-## Guidelines
-
-- **Subtlety for text** — 3-6% scale variation, soft glow. Heavy pulsing makes text unreadable.
-- **Go bigger on non-text** — backgrounds and shapes can handle 10-30% swings.
-- **Match the energy** — corporate = subtle; music video = dramatic.
-- **Deterministic** — pre-extracted data, no Web Audio API, no runtime analysis.
-
-## Constraints
-
-- All audio data must be pre-extracted (use `extract-audio-data.py` from this skill's `scripts/`)
-- No `Math.random()` or `Date.now()`
-- Audio reactivity runs on the same GSAP timeline as everything else
+# Audio-Reactive Animation
+
+Drive visuals from music, voice, or sound. Any GSAP-animatable property can respond to pre-extracted audio data.
+
+## Audio Data Format
+
+```js
+var AUDIO_DATA = {
+  fps: 30,
+  totalFrames: 900,
+  frames: [{ bands: [0.82, 0.45, 0.31, ...] }, ...]
+};
+```
+
+- `frames[i].bands[]` — frequency band amplitudes, 0-1. Index 0 = bass, higher = treble.
+- Each band normalized independently across the full track.
+
+## Mapping Audio to Visuals
+
+| Audio signal           | Visual property                   | Effect                     |
+| ---------------------- | --------------------------------- | -------------------------- |
+| Bass (bands[0])        | `scale`                           | Pulse on beat              |
+| Treble (bands[12-14])  | `textShadow`, `boxShadow`         | Glow intensity             |
+| Overall amplitude      | `opacity`, `y`, `backgroundColor` | Breathe, lift, color shift |
+| Mid-range (bands[4-8]) | `borderRadius`, `width`           | Shape morphing             |
+
+Any GSAP-tweenable property works — `clipPath`, `filter`, SVG attributes, CSS custom properties.
+
+## Content, Not Medium
+
+Audio provides **timing and intensity**. The visual vocabulary comes from the narrative.
+
+**Never add:** equalizer bars, spectrum analyzers, waveform displays, musical notes clip art, generic particle systems, rainbow color cycling, strobing white on beats, abstract pulsing orbs.
+
+**Instead:** Let content guide the visual and audio drive its behavior. Bass makes warmth _swell_. Treble sharpens _contrast_. The visual choice comes from "what does this piece feel like?"
+
+## Sampling Pattern
+
+Audio reactivity requires per-frame sampling via a `for` loop with `tl.call()`, not a single tween:
+
+```js
+// ✅ Correct — sample every frame
+for (var f = 0; f < AUDIO_DATA.totalFrames; f++) {
+  tl.call(
+    (function (frame) {
+      return function () {
+        draw(frame);
+      };
+    })(AUDIO_DATA.frames[f]),
+    [],
+    f / AUDIO_DATA.fps,
+  );
+}
+
+// ❌ Wrong — single tween, doesn't react to audio
+gsap.to(".el", { scale: 1.2, duration: totalDuration });
+```
+
+Without per-frame sampling, the composition doesn't actually react to audio.
+
+## textShadow Gotcha
+
+`textShadow` on a parent container with semi-transparent children (e.g., inactive caption words at `rgba(255,255,255,0.3)`) renders a visible glow rectangle behind all children. Fix: apply `scale` to the container for beat pulse, but apply `textShadow` to individual active words only.
+
+## Guidelines
+
+- **Subtlety for text** — 3-6% scale variation, soft glow. Heavy pulsing makes text unreadable.
+- **Go bigger on non-text** — backgrounds and shapes can handle 10-30% swings.
+- **Match the energy** — corporate = subtle; music video = dramatic.
+- **Deterministic** — pre-extracted data, no Web Audio API, no runtime analysis.
+
+## Constraints
+
+- All audio data must be pre-extracted (use `extract-audio-data.py` from this skill's `scripts/`)
+- No `Math.random()` or `Date.now()`
+- Audio reactivity runs on the same GSAP timeline as everything else