theus-cli 0.2.82 → 0.2.84

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

@@ -1,104 +0,0 @@
----
-name: calculate-metadata
-description: Definir dinámicamente duración, dimensiones y props de la composición
-metadata:
-  tags: calculateMetadata, duracion, dimensiones, props, dinamico
----
-
-# Uso de calculateMetadata
-
-Usa `calculateMetadata` en una `<Composition>` para definir dinámicamente la duración, las dimensiones y transformar las props antes de renderizar.
-
-```tsx
-<Composition id="MyComp" component={MyComponent} durationInFrames={300} fps={30} width={1920} height={1080} defaultProps={{videoSrc: 'https://remotion.media/video.mp4'}} calculateMetadata={calculateMetadata} />
-```
-
-## Definir la duración según un video
-
-Usa una función auxiliar `getMediaMetadata()` construida con Mediabunny (ver [get-video-duration.md](get-video-duration.md) y [get-video-dimensions.md](get-video-dimensions.md)) para obtener la duración del video:
-
-```tsx
-import {CalculateMetadataFunction} from 'remotion';
-import {getMediaMetadata} from '../get-media-metadata';
-
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds} = await getMediaMetadata(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-  };
-};
-```
-
-## Igualar las dimensiones de un video
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const {durationInSeconds, dimensions} = await getMediaMetadata(props.videoSrc);
-
-  return {
-    durationInFrames: Math.ceil(durationInSeconds * 30),
-    width: dimensions?.width ?? 1920,
-    height: dimensions?.height ?? 1080,
-  };
-};
-```
-
-## Definir la duración según varios videos
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  const metadataPromises = props.videos.map((video) => getMediaMetadata(video.src));
-  const allMetadata = await Promise.all(metadataPromises);
-
-  const totalDuration = allMetadata.reduce((sum, meta) => sum + meta.durationInSeconds, 0);
-
-  return {
-    durationInFrames: Math.ceil(totalDuration * 30),
-  };
-};
-```
-
-## Definir un outName por defecto
-
-Define el nombre del archivo de salida por defecto en función de las props:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props}) => {
-  return {
-    defaultOutName: `video-${props.id}.mp4`,
-  };
-};
-```
-
-## Transformar props
-
-Obtén datos o transforma las props antes de renderizar:
-
-```tsx
-const calculateMetadata: CalculateMetadataFunction<Props> = async ({props, abortSignal}) => {
-  const response = await fetch(props.dataUrl, {signal: abortSignal});
-  const data = await response.json();
-
-  return {
-    props: {
-      ...props,
-      fetchedData: data,
-    },
-  };
-};
-```
-
-El `abortSignal` cancela las peticiones obsoletas cuando las props cambian en el Studio.
-
-## Valor de retorno
-
-Todos los campos son opcionales. Los valores devueltos sobrescriben las props de `<Composition>`:
-
-- `durationInFrames`: número de fotogramas
-- `width`: ancho de la composición en píxeles
-- `height`: alto de la composición en píxeles
-- `fps`: fotogramas por segundo
-- `props`: props transformadas que se pasan al componente
-- `defaultOutName`: nombre de archivo de salida por defecto
-- `defaultCodec`: códec por defecto para el renderizado

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

@@ -1,75 +0,0 @@
----
-name: can-decode
-description: Comprobar si el navegador puede decodificar un video usando Mediabunny
-metadata:
-  tags: decodificar, validacion, video, audio, compatibilidad, navegador
----
-
-# Comprobar si un video se puede decodificar
-
-Usa Mediabunny para comprobar si el navegador puede decodificar un video antes de intentar reproducirlo.
-
-## La función `canDecode()`
-
-Esta función puede copiarse y pegarse en cualquier proyecto.
-
-```tsx
-import { Input, ALL_FORMATS, UrlSource } from "mediabunny";
-
-export const canDecode = async (src: string) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new UrlSource(src, {
-      getRetryDelay: () => null,
-    }),
-  });
-
-  try {
-    await input.getFormat();
-  } catch {
-    return false;
-  }
-
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (videoTrack && !(await videoTrack.canDecode())) {
-    return false;
-  }
-
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (audioTrack && !(await audioTrack.canDecode())) {
-    return false;
-  }
-
-  return true;
-};
-```
-
-## Uso
-
-```tsx
-const src = "https://remotion.media/video.mp4";
-const isDecodable = await canDecode(src);
-
-if (isDecodable) {
-  console.log("El video se puede decodificar");
-} else {
-  console.log("Este navegador no puede decodificar el video");
-}
-```
-
-## Uso con Blob
-
-Para subidas de archivos o arrastrar y soltar, usa `BlobSource`:
-
-```tsx
-import { Input, ALL_FORMATS, BlobSource } from "mediabunny";
-
-export const canDecodeBlob = async (blob: Blob) => {
-  const input = new Input({
-    formats: ALL_FORMATS,
-    source: new BlobSource(blob),
-  });
-
-  // Misma lógica de validación que arriba
-};
-```

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

@@ -1,58 +0,0 @@
----
-name: charts
-description: Patrones de gráficas y visualización de datos para Remotion. Úsalo al crear gráficas de barras, de pastel, histogramas, barras de progreso o cualquier animación basada en datos.
-metadata:
-  tags: graficas, datos, visualizacion, barras, pastel
----
-
-# Gráficas en Remotion
-
-Puedes crear gráficas de barras en Remotion con código React normal: HTML y SVG están permitidos, así como D3.js.
-
-## Ninguna animación fuera de `useCurrentFrame()`
-
-Desactiva todas las animaciones de librerías de terceros.
-Provocan parpadeos durante el renderizado.
-En su lugar, dirige todas las animaciones desde `useCurrentFrame()`.
-
-## Animaciones de gráficas de barras
-
-Consulta el [ejemplo de gráfica de barras](assets/charts-bar-chart.tsx) para una implementación básica.
-
-### Barras escalonadas
-
-Puedes animar la altura de las barras y escalonarlas así:
-
-```tsx
-const STAGGER_DELAY = 5;
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const bars = data.map((item, i) => {
-  const delay = i * STAGGER_DELAY;
-  const height = spring({
-    frame,
-    fps,
-    delay,
-    config: {damping: 200},
-  });
-  return <div style={{height: height * item.value}} />;
-});
-```
-
-## Animación de gráfica de pastel
-
-Anima los segmentos usando stroke-dashoffset, empezando desde las 12 en punto.
-
-```tsx
-const frame = useCurrentFrame();
-const {fps} = useVideoConfig();
-
-const progress = interpolate(frame, [0, 100], [0, 1]);
-
-const circumference = 2 * Math.PI * radius;
-const segmentLength = (value / total) * circumference;
-const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
-
-<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
-```

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

@@ -1,146 +0,0 @@
----
-name: compositions
-description: Definir composiciones, stills, carpetas, props por defecto y metadatos dinámicos
-metadata:
-  tags: composicion, still, carpeta, props, metadatos
----
-
-Una `<Composition>` define el componente, ancho, alto, fps y duración de un video renderizable.
-
-Normalmente se coloca en el archivo `src/Root.tsx`.
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-    />
-  );
-};
-```
-
-## Props por defecto
-
-Pasa `defaultProps` para dar valores iniciales a tu componente.
-Los valores deben ser serializables a JSON (`Date`, `Map`, `Set` y `staticFile()` están soportados).
-
-```tsx
-import { Composition } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100}
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{
-        title: "Hola mundo",
-        color: "#ff0000",
-      } satisfies MyCompositionProps}
-    />
-  );
-};
-```
-
-Usa declaraciones `type` para las props en lugar de `interface` para garantizar la seguridad de tipos de `defaultProps`.
-
-## Carpetas
-
-Usa `<Folder>` para organizar las composiciones en la barra lateral.
-Los nombres de carpeta solo pueden contener letras, números y guiones.
-
-```tsx
-import { Composition, Folder } from "remotion";
-
-export const RemotionRoot = () => {
-  return (
-    <>
-      <Folder name="Marketing">
-        <Composition id="Promo" /* ... */ />
-        <Composition id="Ad" /* ... */ />
-      </Folder>
-      <Folder name="Social">
-        <Folder name="Instagram">
-          <Composition id="Story" /* ... */ />
-          <Composition id="Reel" /* ... */ />
-        </Folder>
-      </Folder>
-    </>
-  );
-};
-```
-
-## Stills
-
-Usa `<Still>` para imágenes de un solo fotograma. No requiere `durationInFrames` ni `fps`.
-
-```tsx
-import { Still } from "remotion";
-import { Thumbnail } from "./Thumbnail";
-
-export const RemotionRoot = () => {
-  return (
-    <Still
-      id="Thumbnail"
-      component={Thumbnail}
-      width={1280}
-      height={720}
-    />
-  );
-};
-```
-
-## Calcular metadatos
-
-Usa `calculateMetadata` para hacer que las dimensiones, la duración o las props sean dinámicas según los datos.
-
-```tsx
-import { Composition, CalculateMetadataFunction } from "remotion";
-import { MyComposition, MyCompositionProps } from "./MyComposition";
-
-const calculateMetadata: CalculateMetadataFunction<MyCompositionProps> = async ({
-  props,
-  abortSignal,
-}) => {
-  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
-    signal: abortSignal,
-  }).then((res) => res.json());
-
-  return {
-    durationInFrames: Math.ceil(data.duration * 30),
-    props: {
-      ...props,
-      videoUrl: data.url,
-    },
-  };
-};
-
-export const RemotionRoot = () => {
-  return (
-    <Composition
-      id="MyComposition"
-      component={MyComposition}
-      durationInFrames={100} // Valor provisional, se sobrescribirá
-      fps={30}
-      width={1080}
-      height={1080}
-      defaultProps={{ videoId: "abc123" }}
-      calculateMetadata={calculateMetadata}
-    />
-  );
-};
-```
-
-La función puede devolver `props`, `durationInFrames`, `width`, `height`, `fps` y valores por defecto relacionados con el códec. Se ejecuta una sola vez antes de que empiece el renderizado.

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

@@ -1,126 +0,0 @@
----
-name: display-captions
-description: Mostrar subtítulos en Remotion con páginas estilo TikTok y resaltado de palabras
-metadata:
-  tags: captions, subtitulos, mostrar, tiktok, resaltado
----
-
-# Mostrar subtítulos en Remotion
-
-Esta guía explica cómo mostrar subtítulos en Remotion, asumiendo que ya los tienes en el formato `Caption`.
-
-## 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
-```
-
-## Crear páginas
-
-Usa `createTikTokStyleCaptions()` para agrupar los subtítulos en páginas. La opción `combineTokensWithinMilliseconds` controla cuántas palabras aparecen a la vez:
-
-```tsx
-import {useMemo} from 'react';
-import {createTikTokStyleCaptions} from '@remotion/captions';
-import type {Caption} from '@remotion/captions';
-
-// Cada cuánto deben cambiar los subtítulos (en milisegundos)
-// Valores altos = más palabras por página
-// Valores bajos = menos palabras (más palabra a palabra)
-const SWITCH_CAPTIONS_EVERY_MS = 1200;
-
-const {pages} = useMemo(() => {
-  return createTikTokStyleCaptions({
-    captions,
-    combineTokensWithinMilliseconds: SWITCH_CAPTIONS_EVERY_MS,
-  });
-}, [captions]);
-```
-
-## Renderizar con Sequences
-
-Recorre las páginas y renderiza cada una en un `<Sequence>`. Calcula el fotograma de inicio y la duración a partir del timing de la página:
-
-```tsx
-import {Sequence, useVideoConfig, AbsoluteFill} from 'remotion';
-import type {TikTokPage} from '@remotion/captions';
-
-const CaptionedContent: React.FC = () => {
-  const {fps} = useVideoConfig();
-
-  return (
-    <AbsoluteFill>
-      {pages.map((page, index) => {
-        const nextPage = pages[index + 1] ?? null;
-        const startFrame = (page.startMs / 1000) * fps;
-        const endFrame = Math.min(
-          nextPage ? (nextPage.startMs / 1000) * fps : Infinity,
-          startFrame + (SWITCH_CAPTIONS_EVERY_MS / 1000) * fps,
-        );
-        const durationInFrames = endFrame - startFrame;
-
-        if (durationInFrames <= 0) {
-          return null;
-        }
-
-        return (
-          <Sequence
-            key={index}
-            from={startFrame}
-            durationInFrames={durationInFrames}
-          >
-            <CaptionPage page={page} />
-          </Sequence>
-        );
-      })}
-    </AbsoluteFill>
-  );
-};
-```
-
-## Resaltado de palabras
-
-Una página de subtítulos contiene `tokens` que puedes usar para resaltar la palabra que se está pronunciando:
-
-```tsx
-import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
-import type {TikTokPage} from '@remotion/captions';
-
-const HIGHLIGHT_COLOR = '#39E508';
-
-const CaptionPage: React.FC<{page: TikTokPage}> = ({page}) => {
-  const frame = useCurrentFrame();
-  const {fps} = useVideoConfig();
-
-  // Tiempo actual relativo al inicio de la secuencia
-  const currentTimeMs = (frame / fps) * 1000;
-  // Conviértelo a tiempo absoluto sumando el inicio de la página
-  const absoluteTimeMs = page.startMs + currentTimeMs;
-
-  return (
-    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
-      <div style={{fontSize: 80, fontWeight: 'bold', whiteSpace: 'pre'}}>
-        {page.tokens.map((token) => {
-          const isActive =
-            token.fromMs <= absoluteTimeMs && token.toMs > absoluteTimeMs;
-
-          return (
-            <span
-              key={token.fromMs}
-              style={{color: isActive ? HIGHLIGHT_COLOR : 'white'}}
-            >
-              {token.text}
-            </span>
-          );
-        })}
-      </div>
-    </AbsoluteFill>
-  );
-};
-```