Communitygithub.com

Remocn/remocn

Instale um componente remocn em um projeto Remotion e mostre como usá-lo: leia sua página de documentação, execute shadcn add e coloque-o em uma Sequência com a duração correta. Use quando o usuário nomear um componente remocn para adicionar ou pedir uma única animação, transição, fundo ou primitiva de UI em vez de um vídeo completo.

O que é remocn?

Esta habilidade permite adicionar componentes individuais do ecossistema remocn a um projeto Remotion existente. Ela automatiza todo o fluxo: desde a resolução do nome do componente (podendo sugerir opções a partir de descrições), leitura da documentação específica da página `.md`, preparação do projeto com registro de pacotes `@remocn`, instalação via `npx shadcn add`, até a geração de um trecho de uso dimensionado para o canvas dentro de uma `<Sequence durationInFrames>`. Para transições, posiciona automaticamente como `presentation` dentro de `TransitionSeries.Transition`, respeitando a duração indicada. Suporta verificação de tipo (`tsc --noEmit`) e geração de still ao final do movimento. É útil para desenvolvedores que já trabalham com Remotion e desejam reutilizar animações, transições ou primitivas de UI prontas, sem precisar implementar tudo manualmente. Funciona em ambientes Claude Code e similares que suportem execução de comandos e leitura de arquivos remotos.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Remocn/remocn/tree/HEAD/plugins/remocn/skills/add

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Adicionar um componente remocn

Solicitado: $ARGUMENTS

Carregue primeiro a habilidade remocn para as convenções de camada e Canvas e temporização.

  1. Resolva o nome. Se a solicitação for um nome exato de componente, use-o. Se for uma descrição ("um título glitchado", "um corte rápido"), faça uma lista de opções em https://remocn.dev/llms-components.txt e ofereça as duas ou três melhores, cada uma com sua linha Use for e duração. Aguarde a escolha.
  2. Leia sua página. Busque a URL do .md de documentação que o índice fornece para ele. Anote os props, o exemplo, Length e qualquer nota Avoid for. Se a nota de evitação corresponder ao que o usuário deseja, diga isso e sugira a substituição que ela nomeia.
  3. Prepare o projeto uma vez. Se components.json não tiver um registro @remocn, execute node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root> primeiro (fora do Claude Code: ../video/scripts/setup.mjs a partir da pasta desta habilidade). O resultado JSON indica quais arquivos ele escreveu; repasse qualquer warning.
  4. Instale. npx shadcn add @remocn/<nome>. Dependências são instaladas transitivamente; liste quais arquivos foram criados.
  5. Use-o. Mostre um trecho de uso baseado no exemplo da documentação, dimensionado para o canvas, dentro de uma <Sequence durationInFrames> de pelo menos seu Length mais tempo de espera. Transições vão para TransitionSeries.Transition como presentation com linearTiming/springTiming no seu Length. Se o usuário nomeou um local em seu código, coloque-o lá; caso contrário, pergunte onde deve ir.
  6. Verifique. npx tsc --noEmit, depois um still ao final de sua animação (npx remotion still <composition> out/<nome>.png --frame=<n>) e examine-o.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Habilidades Relacionadas