Tailwind skill

O que ela faz

O HyperFrames, da HeyGen, transforma composições em HTML em vídeo. Quem cria o projeto com hyperframes init --tailwind ganha o Tailwind v4.2 rodando no navegador. A skill evita que o Claude escreva do jeito da versão 3, com tailwind.config.js e diretivas @tailwind, que ali não funcionam.

Cores, fontes e utilitários próprios vão num bloco de estilo com @theme e @utility. As classes são escritas completas no HTML, nunca montadas por código na hora, porque o Tailwind só gera o que enxerga antes da captura. O movimento fica com o GSAP; o Tailwind cuida do layout e do visual.

Pra vídeo, a skill pede medidas fixas, animação de preferência em transform e opacidade, nada de hover ou rolagem e borda com cor explícita. No fim roda lint, validate e inspect e renderiza uma prova curta em MP4. Tem ainda uma lista rápida pra quando o estilo some no render.

Nas palavras de quem fez

Quando usar

• Começar um vídeo novo no HyperFrames usando classes do Tailwind
• Descobrir por que o estilo aparece na prévia e some no MP4
• Passar uma composição do jeito do Tailwind 3 pro da versão 4
• Definir as cores e fontes da marca nos vídeos de um cliente

Depois de instalar, é só pedir assim

• Cria uma composição do HyperFrames com Tailwind: título grande, subtítulo e as cores da minha marca definidas no @theme
• O render está saindo sem estilo no primeiro quadro, confere o projeto com o checklist do Tailwind e corrige
• Passa as cores e fontes desse tailwind.config.js pro @theme dentro da composição

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
• SnykPassou

Perguntas