P5js skill

O que ela faz

A skill faz o Claude criar peças visuais em p5.js, uma biblioteca de desenho por código que roda no navegador. Cada projeto é um arquivo HTML só, sem instalar nada: arte generativa, partículas, campos de fluxo, tipografia animada, cena 3D, efeito com shader, visual que reage ao som e gráfico interativo.

Antes do código, o Claude define o conceito: clima, paleta de 3 a 7 cores, formas e ritmo do movimento. A regra é fugir de exemplo de tutorial: nada de fundo branco liso nem cor crua, e sempre um detalhe que você não pediu. A semente fixa faz a mesma configuração gerar a mesma imagem.

A peça já vem com atalhos: S salva PNG, G grava GIF. Pra vídeo MP4 ou imagem em 4K, a skill traz scripts que capturam quadro a quadro com Puppeteer e juntam com ffmpeg. Tem também um visualizador pronto com troca de semente, controles deslizantes e botão de baixar.

Nas palavras de quem fez

Quando usar

• Criar um fundo animado pra um site ou landing page
• Gerar arte em série pra post, capa ou estampa
• Fazer um vídeo curto de motion com tipografia animada
• Montar um gráfico interativo fora do padrão
• Produzir um visual que reage à música pra vídeo ou live

Depois de instalar, é só pedir assim

• Faz uma arte generativa com partículas em laranja e azul-escuro, 1080x1080, que eu salvo em PNG
• Cria um fundo animado de campo de fluxo pro topo do meu site, leve e em tela cheia
• Faz uma animação de 10 segundos com a palavra LANÇAMENTO se desmanchando em partículas e exporta em MP4

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykAlerta

Perguntas