Skills Agentes

Remotion Html In Canvas

Úsala al crear o modificar videos de Remotion con efectos HTML-en-canvas: el componente HtmlInCanvas, postprocesado Canvas 2D/WebGL/WebGPU, transiciones personalizadas y renderizado con @remotion/web-renderer.

Estrellas
6

en todo el repo

Actividad
42

0–100, la ruta de este skill

Actualizado
hace 5 meses

último commit aquí

Commits
0

últimos 90 días

Contexto
868 tok

59 tok en reposo

Paquete
2 archivos

4 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add rbrown101010/rileys-skills --skill remotion-html-in-canvas --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Dibuja composiciones React/HTML en vivo dentro de un canvas de Remotion para postprocesado
  • Aplica efectos como desenfoque, distorsión, ampliación, tratamiento vintage o glitch
  • Soporta shaders WebGL y WebGPU mediante el componente `<HtmlInCanvas>`
  • Gestiona el renderizado vía CLI de Remotion, Studio, Lambda, Vercel o server-side

Úsalo cuando

  • Crear o modificar videos de Remotion que necesiten efectos HTML-en-canvas
  • Aplicar postprocesado Canvas 2D, WebGL o WebGPU sobre una composición de Remotion
  • Construir transiciones personalizadas con `@remotion/web-renderer`

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • “Añade un efecto de desenfoque con canvas a esta composición de Remotion”
    • “Crea una transición con shader WebGL en Remotion”
    • “Usa HtmlInCanvas para un efecto glitch en este video”

    Archivos

    2 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Antes de instalar

    Necesita Remotion 4.0.455 o superior, y para previsualizar en Studio, Chrome Canary 149+ con el flag `chrome://flags/#canvas-draw-element` activado.

    Detalles

    Licencia
    No especificada
    Recursos incluidos
    Incluye scripts o referencias
    Código fuente
    Ver SKILL.md

    Más de rbrown101010/rileys-skills

    Este repo incluye 31 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack rileys-skills entero y su comando de instalación

    Encuentra oportunidades de patrocinio, promoción pagada y colaboraciones de marca en el Gmail de Riley; investiga cada marca, deduplica y prioriza los leads, y los exporta como tabla, documento u hoja de cálculo.

    Costo de contexto al activarse
    1.6k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 5 meses
    marketing

    Usa la API GraphQL de Buffer para consultar cuentas, organizaciones, canales, colas, publicaciones y límites diarios, y para crear Ideas, borradores, posts en cola o programados en Buffer.

    Costo de contexto al activarse
    1.1k tok
    Tamaño del paquete
    4 archivos
    Última actualización
    hace 5 meses
    redes sociales

    Compila, firma e instala apps iOS en dispositivos reales usando el servicio de firma de Vibecode. Para compilar desde el código fuente, firmar, instalar en un iPhone, registrar un dispositivo o configurar Apple Developer.

    Costo de contexto al activarse
    3.9k tok
    Tamaño del paquete
    19 archivos
    Última actualización
    hace 5 meses
    herramientas desarrollo

    Permite ver la pantalla del usuario y varias horas de historial. Debe usarse para resolver ambigüedad en una petición, o si el usuario pregunta sobre Chronicle o qué se ve en su pantalla.

    Costo de contexto al activarse
    1.5k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 5 meses
    productividad

    Para leer, crear o editar documentos `.docx`, sobre todo cuando importa la fidelidad del formato o el layout; usa `python-docx` junto con `scripts/render_docx.py` para revisiones visuales.

    Costo de contexto al activarse
    747 tok
    Tamaño del paquete
    6 archivos
    Última actualización
    hace 5 meses
    documentos

    Crea diagramas animados SVG a GIF para Google Docs: flowcharts, diagramas de proceso, líneas de tiempo, árboles de decisión y mapas de contexto listos para insertar en un Doc nativo.

    Costo de contexto al activarse
    867 tok
    Tamaño del paquete
    4 archivos
    Última actualización
    hace 5 meses
    documentos

    Skills relacionados

    Se usa cuando el usuario pide generar, crear o imaginar videos. Admite prompts estructurados e imagen de referencia opcional para guiar la generación.

    Costo de contexto al activarse
    1.3k tok
    Tamaño del paquete
    2 archivos
    Última actualización
    hace 4 meses
    video

    Genera vídeos con IA desde texto usando varias pasarelas — HeyGen, fal.ai, Kling y Gemini — con soporte de imagen a vídeo y comparación entre VEO, Kling, Sora, Runway, Seedance y MiniMax.

    Costo de contexto al activarse
    3k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 2 meses
    video

    Genera o edita imágenes y vídeos por la pasarela Atlas Cloud: Seedance 2.5/2.0, Gemini Omni Flash, MiniMax H3, Seedream 5.0, GPT Image 2 y Nano Banana 2 con una sola ATLASCLOUD_API_KEY.

    Costo de contexto al activarse
    1.2k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    video