theus-cli 0.2.83 → 0.2.85

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

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

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

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

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

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

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

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

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