theus-cli-linux-arm64 0.2.84

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

@@ -0,0 +1,130 @@
+---
+name: images
+description: Incrustar imágenes en Remotion con el componente <Img>
+metadata:
+  tags: imagenes, img, staticFile, png, jpg, svg, webp
+---
+
+# Usar imágenes en Remotion
+
+## El componente `<Img>`
+
+Usa siempre el componente `<Img>` de `remotion` para mostrar imágenes:
+
+```tsx
+import { Img, staticFile } from "remotion";
+
+export const MyComposition = () => {
+  return <Img src={staticFile("photo.png")} />;
+};
+```
+
+## Restricciones importantes
+
+**DEBES usar el componente `<Img>` de `remotion`.** No uses:
+
+- Elementos HTML nativos `<img>`
+- El componente `<Image>` de Next.js
+- CSS `background-image`
+
+El componente `<Img>` garantiza que las imágenes estén completamente cargadas antes de renderizar, evitando parpadeos y fotogramas en blanco durante la exportación del video.
+
+## Imágenes locales con staticFile()
+
+Coloca las imágenes en la carpeta `public/` y usa `staticFile()` para referenciarlas:
+
+```
+my-video/
+├─ public/
+│  ├─ logo.png
+│  ├─ avatar.jpg
+│  └─ icon.svg
+├─ src/
+├─ package.json
+```
+
+```tsx
+import { Img, staticFile } from "remotion";
+
+<Img src={staticFile("logo.png")} />
+```
+
+## Imágenes remotas
+
+Las URL remotas pueden usarse directamente sin `staticFile()`:
+
+```tsx
+<Img src="https://example.com/image.png" />
+```
+
+Asegúrate de que las imágenes remotas tengan CORS habilitado.
+
+Para GIF animados, usa el componente `<Gif>` de `@remotion/gif`.
+
+## Tamaño y posición
+
+Usa la prop `style` para controlar el tamaño y la posición:
+
+```tsx
+<Img
+  src={staticFile("photo.png")}
+  style={{
+    width: 500,
+    height: 300,
+    position: "absolute",
+    top: 100,
+    left: 50,
+    objectFit: "cover",
+  }}
+/>
+```
+
+## Rutas de imagen dinámicas
+
+Usa template literals para referencias de archivo dinámicas:
+
+```tsx
+import { Img, staticFile, useCurrentFrame } from "remotion";
+
+const frame = useCurrentFrame();
+
+// Secuencia de imágenes
+<Img src={staticFile(`frames/frame${frame}.png`)} />
+
+// Selección según props
+<Img src={staticFile(`avatars/${props.userId}.png`)} />
+
+// Imágenes condicionales
+<Img src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)} />
+```
+
+Este patrón es útil para:
+
+- Secuencias de imágenes (animaciones fotograma a fotograma)
+- Avatares o imágenes de perfil por usuario
+- Iconos según el tema
+- Gráficos dependientes del estado
+
+## Obtener las dimensiones de una imagen
+
+Usa `getImageDimensions()` para obtener las dimensiones de una imagen:
+
+```tsx
+import { getImageDimensions, staticFile } from "remotion";
+
+const { width, height } = await getImageDimensions(staticFile("photo.png"));
+```
+
+Es útil para calcular relaciones de aspecto o dimensionar composiciones:
+
+```tsx
+import { getImageDimensions, staticFile, CalculateMetadataFunction } from "remotion";
+
+const calculateMetadata: CalculateMetadataFunction = async () => {
+  const { width, height } = await getImageDimensions(staticFile("photo.png"));
+  return {
+    width,
+    height,
+  };
+};
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/import-srt-captions.md

@@ -0,0 +1,67 @@
+---
+name: import-srt-captions
+description: Importar archivos de subtítulos .srt en Remotion con @remotion/captions
+metadata:
+  tags: captions, subtitulos, srt, importar, parsear
+---
+
+# Importar subtítulos .srt en Remotion
+
+Si ya tienes un archivo de subtítulos `.srt`, puedes importarlo en Remotion con `parseSrt()` del paquete `@remotion/captions`.
+
+## Requisitos previos
+
+Primero debe estar instalado el paquete @remotion/captions.
+Si no lo está, usa el siguiente comando:
+
+```bash
+npx remotion add @remotion/captions # Si el proyecto usa npm
+bunx remotion add @remotion/captions # Si el proyecto usa bun
+yarn remotion add @remotion/captions # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/captions # Si el proyecto usa pnpm
+```
+
+## Leer un archivo .srt
+
+Usa `staticFile()` para referenciar un archivo `.srt` en tu carpeta `public`, luego descárgalo y parséalo:
+
+```tsx
+import {useState, useEffect, useCallback} from 'react';
+import {AbsoluteFill, staticFile, useDelayRender} from 'remotion';
+import {parseSrt} from '@remotion/captions';
+import type {Caption} from '@remotion/captions';
+
+export const MyComponent: React.FC = () => {
+  const [captions, setCaptions] = useState<Caption[] | null>(null);
+  const {delayRender, continueRender, cancelRender} = useDelayRender();
+  const [handle] = useState(() => delayRender());
+
+  const fetchCaptions = useCallback(async () => {
+    try {
+      const response = await fetch(staticFile('subtitles.srt'));
+      const text = await response.text();
+      const {captions: parsed} = parseSrt({input: text});
+      setCaptions(parsed);
+      continueRender(handle);
+    } catch (e) {
+      cancelRender(e);
+    }
+  }, [continueRender, cancelRender, handle]);
+
+  useEffect(() => {
+    fetchCaptions();
+  }, [fetchCaptions]);
+
+  if (!captions) {
+    return null;
+  }
+
+  return <AbsoluteFill>{/* Usa los subtítulos aquí */}</AbsoluteFill>;
+};
+```
+
+Las URL remotas también funcionan: puedes hacer `fetch()` de un archivo remoto por URL en lugar de usar `staticFile()`.
+
+## Usar los subtítulos importados
+
+Una vez parseados, los subtítulos quedan en el formato `Caption` y pueden usarse con todas las utilidades de `@remotion/captions`.

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

@@ -0,0 +1,67 @@
+---
+name: lottie
+description: Incrustar animaciones Lottie en Remotion.
+metadata:
+  category: Animacion
+---
+
+# Usar animaciones Lottie en Remotion
+
+## Requisitos previos
+
+Primero debe estar instalado el paquete @remotion/lottie.
+Si no lo está, usa el siguiente comando:
+
+```bash
+npx remotion add @remotion/lottie # Si el proyecto usa npm
+bunx remotion add @remotion/lottie # Si el proyecto usa bun
+yarn remotion add @remotion/lottie # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/lottie # Si el proyecto usa pnpm
+```
+
+## Mostrar un archivo Lottie
+
+Para importar una animación Lottie:
+
+- Descarga el asset Lottie
+- Envuelve el proceso de carga en `delayRender()` y `continueRender()`
+- Guarda los datos de la animación en un estado
+- Renderiza la animación con el componente `Lottie` del paquete `@remotion/lottie`
+
+```tsx
+import {Lottie, LottieAnimationData} from '@remotion/lottie';
+import {useEffect, useState} from 'react';
+import {cancelRender, continueRender, delayRender} from 'remotion';
+
+export const MyAnimation = () => {
+  const [handle] = useState(() => delayRender('Cargando animación Lottie'));
+
+  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);
+
+  useEffect(() => {
+    fetch('https://assets4.lottiefiles.com/packages/lf20_zyquagfl.json')
+      .then((data) => data.json())
+      .then((json) => {
+        setAnimationData(json);
+        continueRender(handle);
+      })
+      .catch((err) => {
+        cancelRender(err);
+      });
+  }, [handle]);
+
+  if (!animationData) {
+    return null;
+  }
+
+  return <Lottie animationData={animationData} />;
+};
+```
+
+## Estilos y animación
+
+Lottie admite la prop `style` para aplicar estilos y animaciones:
+
+```tsx
+return <Lottie animationData={animationData} style={{width: 400, height: 400}} />;
+```

package/vendor/theus-arsenal/skills/creacion-video-remotion/rules/measuring-dom-nodes.md

@@ -0,0 +1,34 @@
+---
+name: measuring-dom-nodes
+description: Medir dimensiones de elementos del DOM en Remotion
+metadata:
+  tags: medir, layout, dimensiones, getBoundingClientRect, escala
+---
+
+# Medir nodos del DOM en Remotion
+
+Remotion aplica una transformación `scale()` al contenedor del video, lo que afecta a los valores de `getBoundingClientRect()`. Usa `useCurrentScale()` para obtener mediciones correctas.
+
+## Medir las dimensiones de un elemento
+
+```tsx
+import { useCurrentScale } from "remotion";
+import { useRef, useEffect, useState } from "react";
+
+export const MyComponent = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const scale = useCurrentScale();
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setDimensions({
+      width: rect.width / scale,
+      height: rect.height / scale,
+    });
+  }, [scale]);
+
+  return <div ref={ref}>Contenido a medir</div>;
+};
+```

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

@@ -0,0 +1,143 @@
+---
+name: measuring-text
+description: Medir texto, ajustarlo a contenedores y comprobar desbordamiento
+metadata:
+  tags: medir, texto, layout, dimensiones, fitText, fillTextBox
+---
+
+# Medir texto en Remotion
+
+## Requisitos previos
+
+Instala @remotion/layout-utils si no está ya instalado:
+
+```bash
+npx remotion add @remotion/layout-utils # Si el proyecto usa npm
+bunx remotion add @remotion/layout-utils # Si el proyecto usa bun
+yarn remotion add @remotion/layout-utils # Si el proyecto usa yarn
+pnpm exec remotion add @remotion/layout-utils # Si el proyecto usa pnpm
+```
+
+## Medir las dimensiones de un texto
+
+Usa `measureText()` para calcular el ancho y el alto de un texto:
+
+```tsx
+import { measureText } from "@remotion/layout-utils";
+
+const { width, height } = measureText({
+  text: "Hola mundo",
+  fontFamily: "Arial",
+  fontSize: 32,
+  fontWeight: "bold",
+});
+```
+
+Los resultados se almacenan en caché: las llamadas duplicadas devuelven el resultado cacheado.
+
+## Ajustar texto a un ancho
+
+Usa `fitText()` para encontrar el tamaño de fuente óptimo para un contenedor:
+
+```tsx
+import { fitText } from "@remotion/layout-utils";
+
+const { fontSize } = fitText({
+  text: "Hola mundo",
+  withinWidth: 600,
+  fontFamily: "Inter",
+  fontWeight: "bold",
+});
+
+return (
+  <div
+    style={{
+      fontSize: Math.min(fontSize, 80), // Limitar a 80px
+      fontFamily: "Inter",
+      fontWeight: "bold",
+    }}
+  >
+    Hola mundo
+  </div>
+);
+```
+
+## Comprobar desbordamiento de texto
+
+Usa `fillTextBox()` para comprobar si el texto excede una caja:
+
+```tsx
+import { fillTextBox } from "@remotion/layout-utils";
+
+const box = fillTextBox({ maxBoxWidth: 400, maxLines: 3 });
+
+const words = ["Hola", "mundo", "esto", "es", "una", "prueba"];
+for (const word of words) {
+  const { exceedsBox } = box.add({
+    text: word + " ",
+    fontFamily: "Arial",
+    fontSize: 24,
+  });
+  if (exceedsBox) {
+    // El texto desbordaría; actúa en consecuencia
+    break;
+  }
+}
+```
+
+## Buenas prácticas
+
+**Carga primero las fuentes:** llama a las funciones de medición solo cuando las fuentes ya estén cargadas.
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Inter";
+
+const { fontFamily, waitUntilDone } = loadFont("normal", {
+  weights: ["400"],
+  subsets: ["latin"],
+});
+
+waitUntilDone().then(() => {
+  // Ahora es seguro medir
+  const { width } = measureText({
+    text: "Hola",
+    fontFamily,
+    fontSize: 32,
+  });
+})
+```
+
+**Usa validateFontIsLoaded:** detecta pronto problemas de carga de fuentes:
+
+```tsx
+measureText({
+  text: "Hola",
+  fontFamily: "MyCustomFont",
+  fontSize: 32,
+  validateFontIsLoaded: true, // Lanza un error si la fuente no está cargada
+});
+```
+
+**Iguala las propiedades de fuente:** usa las mismas propiedades para medir y para renderizar:
+
+```tsx
+const fontStyle = {
+  fontFamily: "Inter",
+  fontSize: 32,
+  fontWeight: "bold" as const,
+  letterSpacing: "0.5px",
+};
+
+const { width } = measureText({
+  text: "Hola",
+  ...fontStyle,
+});
+
+return <div style={fontStyle}>Hola</div>;
+```
+
+**Evita padding y border:** usa `outline` en lugar de `border` para evitar diferencias de layout:
+
+```tsx
+<div style={{ outline: "2px solid red" }}>Texto</div>
+```

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

@@ -0,0 +1,106 @@
+---
+name: sequencing
+description: Patrones de secuenciación en Remotion - retrasar, recortar y limitar la duración de elementos
+metadata:
+  tags: sequence, series, timing, retraso, recorte
+---
+
+Usa `<Sequence>` para retrasar el momento en que un elemento aparece en la línea de tiempo.
+
+```tsx
+import { Sequence } from "remotion";
+
+const {fps} = useVideoConfig();
+
+<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
+  <Title />
+</Sequence>
+<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
+  <Subtitle />
+</Sequence>
+```
+
+Por defecto, esto envuelve el componente en un elemento de relleno absoluto (absolute fill).
+Si los elementos no deben envolverse, usa la prop `layout`:
+
+```tsx
+<Sequence layout="none">
+  <Title />
+</Sequence>
+```
+
+## Premontaje
+
+Carga el componente en la línea de tiempo antes de que se reproduzca realmente.
+¡Premonta siempre cualquier `<Sequence>`!
+
+```tsx
+<Sequence premountFor={1 * fps}>
+  <Title />
+</Sequence>
+```
+
+## Series
+
+Usa `<Series>` cuando los elementos deban reproducirse uno tras otro sin solaparse.
+
+```tsx
+import {Series} from 'remotion';
+
+<Series>
+  <Series.Sequence durationInFrames={45}>
+    <Intro />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={60}>
+    <MainContent />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={30}>
+    <Outro />
+  </Series.Sequence>
+</Series>;
+```
+
+Igual que con `<Sequence>`, los elementos de `<Series.Sequence>` se envuelven por defecto en un elemento de relleno absoluto, salvo que la prop `layout` sea `none`.
+
+### Series con solapamientos
+
+Usa un offset negativo para secuencias solapadas:
+
+```tsx
+<Series>
+  <Series.Sequence durationInFrames={60}>
+    <SceneA />
+  </Series.Sequence>
+  <Series.Sequence offset={-15} durationInFrames={60}>
+    {/* Empieza 15 fotogramas antes de que termine SceneA */}
+    <SceneB />
+  </Series.Sequence>
+</Series>
+```
+
+## Referencias de fotograma dentro de secuencias
+
+Dentro de una Sequence, `useCurrentFrame()` devuelve el fotograma local (empezando en 0):
+
+```tsx
+<Sequence from={60} durationInFrames={30}>
+  <MyComponent />
+  {/* Dentro de MyComponent, useCurrentFrame() devuelve 0-29, no 60-89 */}
+</Sequence>
+```
+
+## Secuencias anidadas
+
+Las secuencias pueden anidarse para timings complejos:
+
+```tsx
+<Sequence from={0} durationInFrames={120}>
+  <Background />
+  <Sequence from={15} durationInFrames={90} layout="none">
+    <Title />
+  </Sequence>
+  <Sequence from={45} durationInFrames={60} layout="none">
+    <Subtitle />
+  </Sequence>
+</Sequence>
+```

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

@@ -0,0 +1,11 @@
+---
+name: tailwind
+description: Uso de TailwindCSS en Remotion.
+metadata:
+---
+
+Puedes (y deberías) usar TailwindCSS en Remotion si el proyecto tiene TailwindCSS instalado.
+
+No uses clases `transition-*` ni `animate-*`: anima siempre con el hook `useCurrentFrame()`.
+
+Tailwind debe instalarse y habilitarse primero en el proyecto de Remotion — consulta <https://www.remotion.dev/docs/tailwind> para ver las instrucciones.

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

@@ -0,0 +1,20 @@
+---
+name: text-animations
+description: Patrones de tipografía y animación de texto para Remotion.
+metadata:
+  tags: tipografia, texto, maquina-de-escribir, resaltador
+---
+
+## Animaciones de texto
+
+A partir de `useCurrentFrame()`, ve recortando la cadena carácter a carácter para crear un efecto de máquina de escribir.
+
+## Efecto máquina de escribir
+
+Consulta [Máquina de escribir](assets/text-animations-typewriter.tsx) para un ejemplo avanzado con cursor parpadeante y una pausa tras la primera frase.
+
+Usa siempre el recorte de cadenas (`slice`) para los efectos de máquina de escribir. Nunca uses opacidad por carácter.
+
+## Resaltado de palabras
+
+Consulta [Resaltado de palabra](assets/text-animations-word-highlight.tsx) para un ejemplo de cómo se anima el resaltado de una palabra, como con un resaltador.