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
4

en todo el repo

Actividad
42

0–100, la ruta de este skill

Actualizado
hace 3 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.

    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 3 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 3 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 3 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 3 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 3 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 3 meses
    documentos

    Skills relacionados

    Úsalo cuando la implementación esté completa, todos los tests pasen, y necesites decidir cómo integrar el trabajo.

    Costo de contexto al activarse
    1.9k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 12 días
    herramientas desarrollo

    Úsalo al empezar trabajo de feature que necesita aislamiento del workspace actual, o antes de ejecutar planes de implementación: asegura un workspace aislado vía herramientas nativas o fallback a git worktree.

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

    Úsala al crear nuevas skills, editar skills existentes o verificar que funcionan antes de desplegarlas.

    Costo de contexto al activarse
    6.6k tok
    Tamaño del paquete
    7 archivos
    Última actualización
    hace 12 días
    herramientas desarrollo