FC

felpborges/criador-de-carrosseis-simples

Browser automation
22 stars Quality 44 Trend 31

Versão simples da skill do Claude Code pra criar carrosséis do Instagram em código puro: gramática do @growithalex em três camadas, copy, capa, crítica e carrossel vivo.

Overview

do criador de carrosséis. É a mesma skill sem dois seletores: não tem ajuste de fidelidade (sem referência, o visual é o padrão-base; com referência, a referência manda no visual inteiro, sempre) e não tem escolha de estilo de música no carrossel vivo (uma só, a editorial). A versão completa, com os dois seletores, roda dentro do Design OS. Skill do Claude Code pra criar carrosséis do Instagram de nível de diretor de arte, do tema à entrega: estratégia, estrutura narrativa em seis posições, copy slide a slide com legenda e CTA, capa em cinco passos, design em código puro (um HTML por slide, texto de verdade, PNG 1080x1350), crítica com notas até ficar bom e, opcionalmente, a versão viva (cada slide em MP4 em loop). A gramática vem do estudo de 19 carrosséis e 17 reels do @growithalex (Alex, Creative Strategist) mais dois vídeos dele, organizada em três camadas: Depois é só pedir um carrossel no Claude Code (ou chamar /criador-de-carrosseis-simples).

README

criador-de-carrosseis-simples

Versão simples do criador de carrosséis. É a mesma skill sem dois seletores: não tem ajuste de fidelidade (sem referência, o visual é o padrão-base; com referência, a referência manda no visual inteiro, sempre) e não tem escolha de estilo de música no carrossel vivo (uma só, a editorial). A versão completa, com os dois seletores, roda dentro do Design OS.

Skill do Claude Code pra criar carrosséis do Instagram de nível de diretor de arte, do tema à entrega: estratégia, estrutura narrativa em seis posições, copy slide a slide com legenda e CTA, capa em cinco passos, design em código puro (um HTML por slide, texto de verdade, PNG 1080x1350), crítica com notas até ficar bom e, opcionalmente, a versão viva (cada slide em MP4 em loop).

A gramática vem do estudo de 19 carrosséis e 17 reels do @growithalex (Alex, Creative Strategist) mais dois vídeos dele, organizada em três camadas:

Camada O que é Peso
Invariantes O que faz qualquer carrossel funcionar: as seis perguntas das posições, uma ideia por frase, capa legível em miniatura, CTA como continuação. Sempre.
Padrão-base O default visual e de copy: serifa display gigante, grotesk de apoio, um acento, linho e tecido com textura, fórmulas de capa, slide 2, regra, virada, CTA e legenda. Ponto de partida.
Variações Quando sair do padrão (arquétipo, tom, marca, formato) e como derivar uma fórmula nova a partir do mecanismo. Só com motivo escrito no BRIEF.

Instalar

git clone https://github.com/Felpborges/criador-de-carrosseis-simples.git ~/.claude/skills/criador-de-carrosseis-simples

Depois é só pedir um carrossel no Claude Code (ou chamar /criador-de-carrosseis-simples).

Dependências

  • Node com Playwright (o scripts/novo-projeto.py liga o node_modules de um projeto que já tenha o Playwright; ajuste PLAYWRIGHT_DIR se precisar) e o Chrome sem janela do Playwright.
  • Python 3 com Pillow (folha de contato e teste de miniatura).
  • ffmpeg (só pro carrossel vivo).
  • Fontes: Geist, Geist Mono e DM Serif Display (todas OFL) vêm junto em assets/fonts/.
  • Pro carrossel vivo: Python com numpy, scipy e Pillow; opencv-python só pro fundo-limpo.py.
  • Higgsfield (opcional) pra gerar a imagem da capa.

O que não está no repositório

O acervo de referência (assets/exemplos/, os slides do @growithalex indexados por posição e fundo) é material com direitos autorais de terceiros e não é redistribuído aqui. A skill funciona sem ele; com ele, o passo de design compara cada slide com exemplos da mesma posição. Se você tiver o acervo local, basta colocá-lo em assets/exemplos/todos/ com um indice.md (veja references/07-exemplos.md).

Estrutura

SKILL.md                 briefing (prompt simples → inferir, perguntar só o essencial), fluxo em 9 passos, regras
references/01..10        invariantes · padrão-base · copy · variações · capa e cenas · crítica · exemplos · carrossel vivo · referência dada · atlas de fontes
assets/engine/           kit.js (motor: função pura de t, linho, texto pela base, fit) · anim.js (easing, molas que zeram, peso, parallax)
                         · kit.css (tokens aprovados + anatomia + dispositivos) · dispositivos/ (mesma-capa, layout-slide) · templates de slide
assets/templates/        MARCA.md · BRIEF.md · STORYBOARD.md · guia-de-estilo-exemplo.md · STORYBOARD-exemplo.md
assets/fonts/            Geist · Geist Mono · DM Serif Display (OFL)
assets/acervo/           os carrosséis aprovados do autor, indexados por posição e fundo
assets/exemplos/aprovado o carrossel de referência (folha, cenas, testes) que define "pronto"
scripts/                 novo-projeto.py · render.mjs (stills, cues, frames, video) · folha.py (--lado) · folha-batidas.py · musica.py · baixar-ig.py (post, carrossel ou reel do Instagram → refs/, com os cookies do Chrome logado)
                         periciar.py (mede uma referência) · comparar-pericia.py · fontes.py (Google Fonts, Fontshare) · ocr.swift
                         · testes-vivo.py · fundo-limpo.py · preview.py · vivo.sh · acervo.mjs
evals/                   quatro casos de teste

Carrossel vivo

Depois do estático aprovado: storyboard na grade de 120 BPM, seek(t) em cada slide com os acertos declarados, e zsh scripts/vivo.sh faz o resto: beats → música sintetizada em numpy (uma só, a editorial: nesta versão não há escolha de estilo) (-14 LUFS, loop circular) → MP4 por slide (quadros direto no ffmpeg) → folhas por batida → testes (quadro 0 = PNG com diferença zero, último quadro = quadro 0, som na emenda) → preview.

Rota: código puro. Sem HyperFrames, sem Remotion, sem Canva.

Referência dada

Sem referência a skill entrega o padrão-base. Com referência (post, capturas, vídeo), a referência manda no visual inteiro: scripts/baixar-ig.py URL --nome x baixa o post do Instagram (precisa de python3 -m pip install --user gallery-dl e do Chrome logado no Instagram); scripts/periciar.py mede paleta, texto (tamanhos, níveis, alinhamento, margem, entrelinha), preenchimento, área e luz das imagens, textura, formas e anatomia fixa, com as medidas desenhadas por cima dos quadros e recortes das maiores linhas pra identificar a fonte (references/10-atlas-de-fontes.md); scripts/fontes.py baixa a equivalente livre; src/kit/marca.css e fontes.css ligam tudo no motor sem reescrever o kit; scripts/comparar-pericia.py mede os nossos PNGs contra ela e diz onde olhar; folha.py --lado refs/frames põe os dois lado a lado. O protocolo das doze dimensões está em references/09-referencia.md, e um guia real de uma referência de outro estilo em assets/templates/guia-de-estilo-exemplo-referencia-diferente.md.

View the full README on GitHub

Recommended Tools

Try a different keyword or remove a filter.

Install

npx skillfish add felpborges/criador-de-carrosseis-simples
New to MCP? Start with the mcpskill.org guide →