theus-cli-darwin-x64 0.2.84

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/extract-frames.md

@@ -0,0 +1,229 @@
+---
+name: extract-frames
+description: Extraer fotogramas de videos en marcas de tiempo específicas usando Mediabunny
+metadata:
+  tags: fotogramas, extraer, video, miniatura, filmstrip, canvas
+---
+
+# Extraer fotogramas de videos
+
+Usa Mediabunny para extraer fotogramas de videos en marcas de tiempo específicas. Es útil para generar miniaturas, tiras de fotogramas (filmstrips) o procesar fotogramas individuales.
+
+## La función `extractFrames()`
+
+Esta función puede copiarse y pegarse en cualquier proyecto.
+
+```tsx
+import {
+  ALL_FORMATS,
+  Input,
+  UrlSource,
+  VideoSample,
+  VideoSampleSink,
+} from "mediabunny";
+
+type Options = {
+  track: { width: number; height: number };
+  container: string;
+  durationInSeconds: number | null;
+};
+
+export type ExtractFramesTimestampsInSecondsFn = (
+  options: Options
+) => Promise<number[]> | number[];
+
+export type ExtractFramesProps = {
+  src: string;
+  timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
+  onVideoSample: (sample: VideoSample) => void;
+  signal?: AbortSignal;
+};
+
+export async function extractFrames({
+  src,
+  timestampsInSeconds,
+  onVideoSample,
+  signal,
+}: ExtractFramesProps): Promise<void> {
+  using input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src),
+  });
+
+  const [durationInSeconds, format, videoTrack] = await Promise.all([
+    input.computeDuration(),
+    input.getFormat(),
+    input.getPrimaryVideoTrack(),
+  ]);
+
+  if (!videoTrack) {
+    throw new Error("No se encontró pista de video en la entrada");
+  }
+
+  if (signal?.aborted) {
+    throw new Error("Abortado");
+  }
+
+  const timestamps =
+    typeof timestampsInSeconds === "function"
+      ? await timestampsInSeconds({
+          track: {
+            width: videoTrack.displayWidth,
+            height: videoTrack.displayHeight,
+          },
+          container: format.name,
+          durationInSeconds,
+        })
+      : timestampsInSeconds;
+
+  if (timestamps.length === 0) {
+    return;
+  }
+
+  if (signal?.aborted) {
+    throw new Error("Abortado");
+  }
+
+  const sink = new VideoSampleSink(videoTrack);
+
+  for await (using videoSample of sink.samplesAtTimestamps(timestamps)) {
+    if (signal?.aborted) {
+      break;
+    }
+
+    if (!videoSample) {
+      continue;
+    }
+
+    onVideoSample(videoSample);
+  }
+}
+```
+
+## Uso básico
+
+Extrae fotogramas en marcas de tiempo específicas:
+
+```tsx
+await extractFrames({
+  src: "https://remotion.media/video.mp4",
+  timestampsInSeconds: [0, 1, 2, 3, 4],
+  onVideoSample: (sample) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = sample.displayWidth;
+    canvas.height = sample.displayHeight;
+    const ctx = canvas.getContext("2d");
+    sample.draw(ctx!, 0, 0);
+  },
+});
+```
+
+## Crear un filmstrip
+
+Usa una función callback para calcular dinámicamente las marcas de tiempo a partir de los metadatos del video:
+
+```tsx
+const canvasWidth = 500;
+const canvasHeight = 80;
+const fromSeconds = 0;
+const toSeconds = 10;
+
+await extractFrames({
+  src: "https://remotion.media/video.mp4",
+  timestampsInSeconds: async ({ track, durationInSeconds }) => {
+    const aspectRatio = track.width / track.height;
+    const amountOfFramesFit = Math.ceil(
+      canvasWidth / (canvasHeight * aspectRatio)
+    );
+    const segmentDuration = toSeconds - fromSeconds;
+    const timestamps: number[] = [];
+
+    for (let i = 0; i < amountOfFramesFit; i++) {
+      timestamps.push(
+        fromSeconds + (segmentDuration / amountOfFramesFit) * (i + 0.5)
+      );
+    }
+
+    return timestamps;
+  },
+  onVideoSample: (sample) => {
+    console.log(`Fotograma en ${sample.timestamp}s`);
+
+    const canvas = document.createElement("canvas");
+    canvas.width = sample.displayWidth;
+    canvas.height = sample.displayHeight;
+    const ctx = canvas.getContext("2d");
+    sample.draw(ctx!, 0, 0);
+  },
+});
+```
+
+## Cancelación con AbortSignal
+
+Cancela la extracción de fotogramas tras un tiempo límite:
+
+```tsx
+const controller = new AbortController();
+
+setTimeout(() => controller.abort(), 5000);
+
+try {
+  await extractFrames({
+    src: "https://remotion.media/video.mp4",
+    timestampsInSeconds: [0, 1, 2, 3, 4],
+    onVideoSample: (sample) => {
+      using frame = sample;
+      const canvas = document.createElement("canvas");
+      canvas.width = frame.displayWidth;
+      canvas.height = frame.displayHeight;
+      const ctx = canvas.getContext("2d");
+      frame.draw(ctx!, 0, 0);
+    },
+    signal: controller.signal,
+  });
+
+  console.log("¡Extracción de fotogramas completada!");
+} catch (error) {
+  console.error("La extracción de fotogramas fue abortada o falló:", error);
+}
+```
+
+## Tiempo límite con Promise.race
+
+```tsx
+const controller = new AbortController();
+
+const timeoutPromise = new Promise<never>((_, reject) => {
+  const timeoutId = setTimeout(() => {
+    controller.abort();
+    reject(new Error("La extracción de fotogramas superó el límite de 10 segundos"));
+  }, 10000);
+
+  controller.signal.addEventListener("abort", () => clearTimeout(timeoutId), {
+    once: true,
+  });
+});
+
+try {
+  await Promise.race([
+    extractFrames({
+      src: "https://remotion.media/video.mp4",
+      timestampsInSeconds: [0, 1, 2, 3, 4],
+      onVideoSample: (sample) => {
+        using frame = sample;
+        const canvas = document.createElement("canvas");
+        canvas.width = frame.displayWidth;
+        canvas.height = frame.displayHeight;
+        const ctx = canvas.getContext("2d");
+        frame.draw(ctx!, 0, 0);
+      },
+      signal: controller.signal,
+    }),
+    timeoutPromise,
+  ]);
+
+  console.log("¡Extracción de fotogramas completada!");
+} catch (error) {
+  console.error("La extracción de fotogramas fue abortada o falló:", error);
+}
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/fonts.md

@@ -0,0 +1,152 @@
+---
+name: fonts
+description: Cargar Google Fonts y fuentes locales en Remotion
+metadata:
+  tags: fuentes, google-fonts, tipografia, texto
+---
+
+# Usar fuentes en Remotion
+
+## Google Fonts con @remotion/google-fonts
+
+La forma recomendada de usar Google Fonts. Es segura en tipos y bloquea automáticamente el renderizado hasta que la fuente está lista.
+
+### Requisitos previos
+
+Primero debe estar instalado el paquete @remotion/google-fonts.
+Si no lo está, usa el siguiente comando:
+
+```bash
+npx remotion add @remotion/google-fonts # Si el proyecto usa npm
+bunx remotion add @remotion/google-fonts # Si el proyecto usa bun
+yarn remotion add @remotion/google-fonts # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/google-fonts # Si el proyecto usa pnpm
+```
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Lobster";
+
+const { fontFamily } = loadFont();
+
+export const MyComposition = () => {
+  return <div style={{ fontFamily }}>Hola mundo</div>;
+};
+```
+
+Preferiblemente, especifica solo los pesos y subconjuntos necesarios para reducir el tamaño del archivo:
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Roboto";
+
+const { fontFamily } = loadFont("normal", {
+  weights: ["400", "700"],
+  subsets: ["latin"],
+});
+```
+
+### Esperar a que cargue la fuente
+
+Usa `waitUntilDone()` si necesitas saber cuándo está lista la fuente:
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Lobster";
+
+const { fontFamily, waitUntilDone } = loadFont();
+
+await waitUntilDone();
+```
+
+## Fuentes locales con @remotion/fonts
+
+Para archivos de fuente locales, usa el paquete `@remotion/fonts`.
+
+### Requisitos previos
+
+Primero instala @remotion/fonts:
+
+```bash
+npx remotion add @remotion/fonts # Si el proyecto usa npm
+bunx remotion add @remotion/fonts # Si el proyecto usa bun
+yarn remotion add @remotion/fonts # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/fonts # Si el proyecto usa pnpm
+```
+
+### Cargar una fuente local
+
+Coloca el archivo de fuente en la carpeta `public/` y usa `loadFont()`:
+
+```tsx
+import { loadFont } from "@remotion/fonts";
+import { staticFile } from "remotion";
+
+await loadFont({
+  family: "MyFont",
+  url: staticFile("MyFont-Regular.woff2"),
+});
+
+export const MyComposition = () => {
+  return <div style={{ fontFamily: "MyFont" }}>Hola mundo</div>;
+};
+```
+
+### Cargar varios pesos
+
+Carga cada peso por separado con el mismo nombre de familia:
+
+```tsx
+import { loadFont } from "@remotion/fonts";
+import { staticFile } from "remotion";
+
+await Promise.all([
+  loadFont({
+    family: "Inter",
+    url: staticFile("Inter-Regular.woff2"),
+    weight: "400",
+  }),
+  loadFont({
+    family: "Inter",
+    url: staticFile("Inter-Bold.woff2"),
+    weight: "700",
+  }),
+]);
+```
+
+### Opciones disponibles
+
+```tsx
+loadFont({
+  family: "MyFont", // Obligatorio: nombre a usar en CSS
+  url: staticFile("font.woff2"), // Obligatorio: URL del archivo de fuente
+  format: "woff2", // Opcional: se detecta por la extensión
+  weight: "400", // Opcional: peso de la fuente
+  style: "normal", // Opcional: normal o italic
+  display: "block", // Opcional: comportamiento de font-display
+});
+```
+
+## Uso en componentes
+
+Llama a `loadFont()` en el nivel superior de tu componente o en un archivo aparte que se importe temprano:
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Montserrat";
+
+const { fontFamily } = loadFont("normal", {
+  weights: ["400", "700"],
+  subsets: ["latin"],
+});
+
+export const Title: React.FC<{ text: string }> = ({ text }) => {
+  return (
+    <h1
+      style={{
+        fontFamily,
+        fontSize: 80,
+        fontWeight: "bold",
+      }}
+    >
+      {text}
+    </h1>
+  );
+};
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/get-audio-duration.md

@@ -0,0 +1,58 @@
+---
+name: get-audio-duration
+description: Obtener la duración de un archivo de audio en segundos con Mediabunny
+metadata:
+  tags: duracion, audio, longitud, tiempo, segundos, mp3, wav
+---
+
+# Obtener la duración de un audio con Mediabunny
+
+Mediabunny puede extraer la duración de un archivo de audio. Funciona en navegador, Node.js y Bun.
+
+## Obtener la duración del audio
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getAudioDuration = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  const durationInSeconds = await input.computeDuration();
+  return durationInSeconds;
+};
+```
+
+## Uso
+
+```tsx
+const duration = await getAudioDuration("https://remotion.media/audio.mp3");
+console.log(duration); // p. ej. 180.5 (segundos)
+```
+
+## Uso con archivos locales
+
+Para archivos locales, usa `FileSource` en lugar de `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // Objeto File de un input o de arrastrar y soltar
+});
+
+const durationInSeconds = await input.computeDuration();
+```
+
+## Uso con staticFile en Remotion
+
+```tsx
+import { staticFile } from "remotion";
+
+const duration = await getAudioDuration(staticFile("audio.mp3"));
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/get-video-dimensions.md

@@ -0,0 +1,68 @@
+---
+name: get-video-dimensions
+description: Obtener el ancho y alto de un archivo de video con Mediabunny
+metadata:
+  tags: dimensiones, ancho, alto, resolucion, tamano, video
+---
+
+# Obtener las dimensiones de un video con Mediabunny
+
+Mediabunny puede extraer el ancho y el alto de un archivo de video. Funciona en navegador, Node.js y Bun.
+
+## Obtener las dimensiones del video
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getVideoDimensions = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  const videoTrack = await input.getPrimaryVideoTrack();
+  if (!videoTrack) {
+    throw new Error("No se encontró pista de video");
+  }
+
+  return {
+    width: videoTrack.displayWidth,
+    height: videoTrack.displayHeight,
+  };
+};
+```
+
+## Uso
+
+```tsx
+const dimensions = await getVideoDimensions("https://remotion.media/video.mp4");
+console.log(dimensions.width);  // p. ej. 1920
+console.log(dimensions.height); // p. ej. 1080
+```
+
+## Uso con archivos locales
+
+Para archivos locales, usa `FileSource` en lugar de `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // Objeto File de un input o de arrastrar y soltar
+});
+
+const videoTrack = await input.getPrimaryVideoTrack();
+const width = videoTrack.displayWidth;
+const height = videoTrack.displayHeight;
+```
+
+## Uso con staticFile en Remotion
+
+```tsx
+import { staticFile } from "remotion";
+
+const dimensions = await getVideoDimensions(staticFile("video.mp4"));
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/get-video-duration.md

@@ -0,0 +1,58 @@
+---
+name: get-video-duration
+description: Obtener la duración de un archivo de video en segundos con Mediabunny
+metadata:
+  tags: duracion, video, longitud, tiempo, segundos
+---
+
+# Obtener la duración de un video con Mediabunny
+
+Mediabunny puede extraer la duración de un archivo de video. Funciona en navegador, Node.js y Bun.
+
+## Obtener la duración del video
+
+```tsx
+import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
+
+export const getVideoDuration = async (src: string) => {
+  const input = new Input({
+    formats: ALL_FORMATS,
+    source: new UrlSource(src, {
+      getRetryDelay: () => null,
+    }),
+  });
+
+  const durationInSeconds = await input.computeDuration();
+  return durationInSeconds;
+};
+```
+
+## Uso
+
+```tsx
+const duration = await getVideoDuration("https://remotion.media/video.mp4");
+console.log(duration); // p. ej. 10.5 (segundos)
+```
+
+## Uso con archivos locales
+
+Para archivos locales, usa `FileSource` en lugar de `UrlSource`:
+
+```tsx
+import { Input, ALL_FORMATS, FileSource } from "mediabunny";
+
+const input = new Input({
+  formats: ALL_FORMATS,
+  source: new FileSource(file), // Objeto File de un input o de arrastrar y soltar
+});
+
+const durationInSeconds = await input.computeDuration();
+```
+
+## Uso con staticFile en Remotion
+
+```tsx
+import { staticFile } from "remotion";
+
+const duration = await getVideoDuration(staticFile("video.mp4"));
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/gifs.md

@@ -0,0 +1,138 @@
+---
+name: gif
+description: Mostrar GIF, APNG, AVIF y WebP en Remotion
+metadata:
+  tags: gif, animacion, imagenes, animado, apng, avif, webp
+---
+
+# Usar imágenes animadas en Remotion
+
+## Uso básico
+
+Usa `<AnimatedImage>` para mostrar una imagen GIF, APNG, AVIF o WebP sincronizada con la línea de tiempo de Remotion:
+
+```tsx
+import {AnimatedImage, staticFile} from 'remotion';
+
+export const MyComposition = () => {
+  return <AnimatedImage src={staticFile('animation.gif')} width={500} height={500} />;
+};
+```
+
+Las URL remotas también funcionan (deben tener CORS habilitado):
+
+```tsx
+<AnimatedImage src="https://example.com/animation.gif" width={500} height={500} />
+```
+
+## Tamaño y ajuste
+
+Controla cómo la imagen llena su contenedor con la prop `fit`:
+
+```tsx
+// Estirar para llenar (por defecto)
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
+
+// Mantener la relación de aspecto, caber dentro del contenedor
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
+
+// Llenar el contenedor, recortando si es necesario
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
+```
+
+## Velocidad de reproducción
+
+Usa `playbackRate` para controlar la velocidad de la animación:
+
+```tsx
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* Velocidad 2x */}
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Media velocidad */}
+```
+
+## Comportamiento de bucle
+
+Controla qué ocurre cuando la animación termina:
+
+```tsx
+// Bucle indefinido (por defecto)
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
+
+// Reproducir una vez y mostrar el último fotograma
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
+
+// Reproducir una vez y luego limpiar el canvas
+<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
+```
+
+## Estilos
+
+Usa la prop `style` para CSS adicional (usa las props `width` y `height` para el tamaño):
+
+```tsx
+<AnimatedImage
+  src={staticFile('animation.gif')}
+  width={500}
+  height={500}
+  style={{
+    borderRadius: 20,
+    position: 'absolute',
+    top: 100,
+    left: 50,
+  }}
+/>
+```
+
+## Obtener la duración de un GIF
+
+Usa `getGifDurationInSeconds()` de `@remotion/gif` para obtener la duración de un GIF.
+
+```bash
+npx remotion add @remotion/gif # Si el proyecto usa npm
+bunx remotion add @remotion/gif # Si el proyecto usa bun
+yarn remotion add @remotion/gif # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/gif # Si el proyecto usa pnpm
+```
+
+```tsx
+import {getGifDurationInSeconds} from '@remotion/gif';
+import {staticFile} from 'remotion';
+
+const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
+console.log(duration); // p. ej. 2.5
+```
+
+Es útil para ajustar la duración de la composición a la del GIF:
+
+```tsx
+import {getGifDurationInSeconds} from '@remotion/gif';
+import {staticFile, CalculateMetadataFunction} from 'remotion';
+
+const calculateMetadata: CalculateMetadataFunction = async () => {
+  const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
+  return {
+    durationInFrames: Math.ceil(duration * 30),
+  };
+};
+```
+
+## Alternativa
+
+Si `<AnimatedImage>` no funciona (solo tiene soporte en Chrome y Firefox), puedes usar `<Gif>` de `@remotion/gif`.
+
+```bash
+npx remotion add @remotion/gif # Si el proyecto usa npm
+bunx remotion add @remotion/gif # Si el proyecto usa bun
+yarn remotion add @remotion/gif # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/gif # Si el proyecto usa pnpm
+```
+
+```tsx
+import {Gif} from '@remotion/gif';
+import {staticFile} from 'remotion';
+
+export const MyComposition = () => {
+  return <Gif src={staticFile('animation.gif')} width={500} height={500} />;
+};
+```
+
+El componente `<Gif>` tiene las mismas props que `<AnimatedImage>` pero solo admite archivos GIF.