theus-cli 0.2.82 → 0.2.84

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

@@ -1,229 +0,0 @@
----
-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

@@ -1,152 +0,0 @@
----
-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

@@ -1,58 +0,0 @@
----
-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

@@ -1,68 +0,0 @@
----
-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

@@ -1,58 +0,0 @@
----
-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

@@ -1,138 +0,0 @@
----
-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.