Communitygithub.com

Taste (Estilo Visual)

Uma camada de direção criativa (estilo) para videoclipes e edições curtas na família visual angelcore / cloud-trance / hyperpop. Destila o vocabulário estético de um gênero nomeado, um sistema de mood + cor + luz e uma gramática de edição sincronizada com a batida, e encadeia as habilidades de vídeo da ECC.

O que é Taste (Estilo Visual)?

Esta habilidade implementa uma camada de 'estilo' (taste) para videoclipes e edições curtas, focada na família estética angelcore, cloud-trance e hyperpop, inspirada em referências como Bladee (era 'Silver Surfer') e um extenso acervo de gêneros visuais. Diferente de tutoriais genéricos que ensinam apenas a gerar quadros, o skill define o que os quadros devem mostrar, em que ordem e com que ritmo, para que o resultado final seja coeso e intencional. Ela fornece um sistema completo de mood (paleta de cores, texturas, tipos de movimento), uma gramática de edição (cortes precisos na batida, transições específicas, inserts macro) e um pipeline detalhado que integra outras habilidades da ECC, como `video-editing` e `remotion-video-creation`. O usuário ou agente de IA deve ativar este skill sempre que o objetivo for criar um vídeo com forte direção estética, evitando o aspecto genérico e sem alma de muitas gerações de IA. A habilidade é opinativa por design, oferecendo um ponto de vista claro em vez de um menu de opções, e inclui presets de prompt para a ferramenta `fal-ai-media`, fórmulas de corte com FFmpeg e um esqueleto de composição no Remotion. O princípio fundamental é que o estilo deve ser decidido antes da primeira geração, não no final, garantindo coerência visual e economia de esforço.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/affaan-m/ECC/tree/main/skills/taste

Perguntar na sua IA favorita

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

Prévia

Do README da skill

Documentação

O que Taste (Estilo Visual) faz?

A maioria dos conselhos sobre vídeo com IA para em como renderizar quadros. Esta habilidade é a camada acima disso: qual deve ser a aparência dos quadros, em que ordem, cortados em qual ritmo, para que o resultado pareça uma coisa intencional em vez de uma pilha de gerações.

Ela codifica um gosto específico — a família angelcore / cloud-trance / hyperpop (o trance etéreo da era "Silver Surfer" do Bladee misturado com angelcore pesado) — destilado de um corpus de Reels salvos e uma turnê por uma biblioteca de ~70 gêneros visuais. É propositalmente opinativa. Gosto é um ponto de vista, não um menu.

O arquivo complementar references/genre-taxonomy.md contém o catálogo completo de gêneros nomeados. Este arquivo é a camada acionável: humor, gramática, pipeline e um plano de tomadas mapeado para a batida.

Quando Ativar

  • Criando um videoclipe, lyric video, fancam ou visualizer.
  • Fazendo uma edição / reel curta onde a sensação importa mais do que a informação.
  • Orientando a geração de b-roll por IA (fal.ai, Veo, Kling, etc.) e os prompts precisam de uma direção coerente, em vez de vibes avulsas.
  • Montando um moodboard ou escolhendo um gênero visual antes de qualquer renderização.
  • O usuário diz "estilo", "faz parecer com X", "dá uma direção", "angelcore", "cloud trance", "edição hyperpop", "Bladee", "dreamcore", ou nomeia uma referência salva.
  • A edição atual funciona, mas parece plana, genérica, IA-porcaria, ou estilisticamente incoerente.

Esta habilidade fica acima de video-editing (a mecânica) e remotion-video-creation (o renderizador). Use estas para o como. Use esta para o o quê e por quê.

Tese Central

  1. O estilo é a última camada, e deve ser decidido primeiro. video-editing corretamente diz que o estilo é a passada humana final. A armadilha: se você só decide o estilo no final, cada geração e corte anteriores foram um chute. Escolha a direção antes do primeiro prompt, depois deixe que ela restrinja tudo.
  2. Coerência supera novidade. Um visual executado em 30 tomadas é melhor que 30 visuais. Um gênero nomeado (abaixo) é uma restrição que compra coerência de graça.
  3. Corte para a música, não para a filmagem. Num videoclipe, a linha do tempo é a forma de onda. Cada corte seco cai numa batida ou num transiente. A matemática dos quadros está na seção de pipeline.
  4. Gere seletivamente, edite impiedosamente. A IA faz b-roll que não existe; ela não faz estilo. Você ainda joga fora 80%.

O Vocabulário Estético (destilado)

O corpus de referência percorre uma grande biblioteca de gêneros visuais nomeados. A lista completa está em references/genre-taxonomy.md. O movimento útil não é memorizar 70 nomes — é perceber que um nome de gênero é um preset completo de prompt e correção de cor. Quando você escolhe um, herda sua paleta, textura, iluminação e assunto como uma unidade.

Os gêneros se agrupam em famílias. Escolha uma família principal e no máximo um acento:

FamíliaGêneros nelaLê-se como
Ethereal / divinoespiritualismo, folk glacial, faróis, zen core, conto de fadassem peso, sagrado, brilhante, suave
Hyperpop / Y2K-cibercyberdelia, acid house, acid nora, neo aggressano, new liquidbrilhante, cromado, neon, kawaii-ciber
Escuro / ocultodark academia, nostalgia de fumaça, core comunista, tech abstratoalto contraste, ameaçador, granulado
Retrô / gráficosurfistas retrô, art déco, pulp de aventura, publicidade clássica, colagem de revista, adesivos de para-choqueplano, gráfico, meio-tom, nostálgico
Orgânico / texturalcore de microbiologia, padrões de tecelagem, frutage retrô, cobertor aconchegante, punk wave do Pacíficotátil, macro, tecido, molhado
Sistêmico / dadosnúmeros, labirintos, teia de código, mapa de calor, pixel, 8-bitgradeado, generativo, esquemático

Para o projeto atual, a família principal é Ethereal / divino com um acento Hyperpop / Y2K-ciber — ou seja, luz sagrada e florescimento cristalino, pontuados por cromo e neon. Esse par é o briefing angelcore × cloud-trance.

O Sistema de Humor — angelcore × cloud-trance

Destilado diretamente dos reels de referência mais fortes. Esta é a correção concreta.

Paleta

  • Base: vazio quase preto (#05060a) e branco osso (#f4f1ea). A maioria dos quadros é um ou outro.
  • Acento divino: ouro derretido / laranja brasa (#ffb24d → #ff7a18) — a única luz quente no escuro.
  • Acento cristalino: bokeh iridescente violeta→ciano→magenta (#8a6bff, #4fc3ff, #ff6ad5) — o florescimento hyperpop, usado em quadros claros.
  • Acento perigo (com moderação): um único vermelho brilhante (#ff2a2a) em monocromático — para apenas um ou dois cortes de choque.
  • Assunto hyperpop: cabelo rosa-doce / cromo / branco brilhante contra céu azul.

Regra: um acento por tomada. Ouro vive em quadros escuros; iridescência vive em quadros claros; nunca ambos na mesma tomada.

Luz e textura

  • Escuridão perfurada por uma única fonte quente (brasas, feixe divino). Alto contraste, pretos profundos.
  • Bokeh cristalino / cintilante, flares de lente, bloom, vazamentos de luz — celestiais, não sujos.
  • Grão de filme + aberração cromática sutil nos quadros escuros; brilho limpo nos quadros claros.
  • Detalhe macro em espaço negativo: um objeto herói centralizado no preto (chave, olho, engrenagem, pétala, água).
  • Assuntos: figuras aladas, nuvens, halos, anjos, estruturas cristalinas, retratos candy-cyber.

Movimento

  • Câmera lenta, flutuante, sem peso (deriva, push lento, órbita lenta) — nuvem trance.
  • Rajadas de velocidade apenas na batida principal. Caso contrário, tudo respira.
  • Partículas subindo (brasas, poeira, glitter) — movimento ascendente = ascensão.

A Gramática de Edição (destilada)

Das edições de referência, as técnicas que se repetem e definem o estilo:

  1. Cortes secos sincronizados com a batida. Sem dissolves no verso/drop. Corte no kick. O olho deve sentir o BPM.
  2. Inserts macro herói-no-preto. Um único objeto nítido centrado em espaço negro, segurado por 1–2 batidas, depois corte. Montagem rítmica destes = a assinatura cloud-trance.
  3. Revelação com bloom / explosão. Um bloom branco ou de brasa que explode o quadro num transiente, depois se resolve na próxima tomada. A transição "flash divino".
  4. Pop de cor em monocromático. Passe uma passagem em P&B, depois um único elemento colorido (olho vermelho, chama dourada, cabelo rosa) surge no tempo forte.
  5. Rampa de velocidade na queda. Faça uma rampa de velocidade de lento para rápido no último compasso antes da queda, corte seco no tempo forte.
  6. Destaque de palavra-chave na legenda (apenas para seções de fala/lyric). Tudo em maiúsculas, uma ou duas palavras destacadas na cor de acento, sincronizadas com o vocal. Use para lyric video, não para o visualizer puro.
  7. PiP de reação (apenas para vídeo de explicação/edição-comentário). Cabeça falante picture-in-picture sobre b-roll. Fora do escopo para o videoclipe em si; documentado porque o corpus o usa bastante.

Não-faça: transições crossfade em seções de andamento; mais de uma cor de acento por tomada; uma tomada segurada além de sua frase musical; UI cromada legível na tela (corte-a); proporções de tela misturadas numa mesma linha do tempo.

O Pipeline — misturando as habilidades de vídeo da ECC

Esta habilidade é o maestro. Cada habilidade da ECC é um instrumento. Não pule camadas.

0. TASTE (esta habilidade)      decida gênero + humor + gramática ANTES de qualquer render
1. ESTRUTURA (video-editing)     mapeie a música: timestamps para intro/verso/refrão/ponte/final
2. GERAR (fal-ai-media)          faça b-roll por presets de prompt de gênero; jogue fora 80%
3. CORTAR (video-editing/FFmpeg) corte na batida + reenquadre para 9:16; monte os selecionados na grade
4. COMPOR (remotion-video-creation) sobreposições, blooms, texto de letra, sequenciamento sincronizado com a batida
5. MOVIMENTO (motion-* skills)   curvas de easing, movimento de vazamento de luz/partículas, temporização de transição
6. ÁUDIO (fal-ai-media)          risers/impactos de transição para vender os cortes (a faixa em si está no Ableton)
7. POLIR                       corrija para a paleta acima, passeada final de ritmo, exporte
8. DISTRIBUIR (content-engine)   versões nativas da plataforma + legenda/capa
EtapaHabilidade ECC a carregarO que faz aqui
Estrutura e cortevideo-editingCorte/concatenação/reenquadramento com FFmpeg, EDL, detecção de cena/silêncio
Gerar b-rollfal-ai-mediaModelos de imagem/vídeo por preset de gênero
Compor e sobreporremotion-video-creation<Sequence>s sincronizadas com a batida, texto, blooms, máscaras
Temporização de movimentomotion-foundations, motion-patterns, motion-advancedEasing, molas, movimento de luz/partículas
Vídeo no servidorvideodbReenquadramento inteligente, indexação se a filmagem for grande
Distribuiçãocontent-engineCortes, capas, legendas por plataforma
Voz/letra VOvideo-editing (seção ElevenLabs)apenas se uma camada falada for necessária

Matemática da Batida (trave os cortes na música)

A faixa atual é 138 BPM, B menor. Constantes:

  • segundos_por_batida = 60 / 138 = 0,43478s
  • quadros_por_batida = fps × 0,43478 → 24fps: 10,43, 30fps: 13,04, 60fps: 26,09
  • 1 compasso (4 batidas) = 1,7391s → 30fps: 52,17 quadros
  • Frase de 8 compassos = 13,913s → o comprimento do loop da faixa

No Remotion, encaixe cada from={} numa batida:

const FPS = 30;
const BPM = 138;
const beat = (n: number) => Math.round(n * (60 / BPM) * FPS); // beat(n) → quadro
// corte nas batidas 0,4,8,... :  <Sequence from={beat(0)} durationInFrames={beat(4)}> ...

Plano de Tomadas Mapeado para a Batida (este videoclipe)

O arranjo da música (das próprias anotações do projeto) é Intro → Verso → Drop → Ponte → Drop → Final (~2:05). Mapeie o estilo para cada seção:

SeçãoInclinação de gênero/humorGramáticaIdeias de tomadas
IntroEthereal/divino, quase pretopush lento, sem cortesbrasa no vazio; um único feixe de ouro; poeira subindo
VersoEscuro + macro herói-no-pretocortes secos a cada 2 batidaschave, olho, engrenagem, gota d'água, pétala — montagem macro rítmica
DropBloom hyperpop + cristalinorampa de velocidade, corte no tempo forte, rápidofigura rosa-doce, cromo, bokeh iridescente, ascensão alada
PonteEspiritualismo, sem pesouma tomada longa segurada, pop de cornuvens + halo; acento vermelho único surge uma vez
Drop 2como Drop, intensificaradicione blooms de flash divino em transientesasas se abrem, explosão de glitter, vazamentos de luz no máximo
FinalFolk glacial, calmo friofade lento para pretoestrutura cristalina se dissolvendo; brasa se apaga

Presets de Prompt para fal.ai (por humor)

Use com fal-ai-media. Cada preset é o gênero renderizado para a paleta do projeto. Acrescente 9:16, vertical, cinematográfico, grão de filme, luz volumétrica, sem texto, sem marca d'água a todos.

  • Vazio divino: "uma única brasa dourada derretida subindo num vazio infinito quase preto, sombra profunda, uma fonte de luz quente, partículas de poeira sem peso, sagrado, alto contraste"
  • Herói macro: "macro extremo de uma chave antiga de latão / um olho humano / engrenagens entrelaçadas, centralizado em espaço negro puro, detalhe ultra nítido, luz de borda única"
  • Bloom cristalino: "bokeh cristalino iridescente violeta-ciano-magenta, refração de luz cintilante, flares de lente sonhadores, brilho celestial, foco suave, hyperpop angelcore"
  • Retrato candy-cyber: "figura de cabelo rosa-doce, detalhes cromados brilhantes, céu azul claro, Y2K hyperpop, brilho limpo, saturado, kawaii-ciber"
  • Ascensão alada: "uma figura alada subindo em nuvens, halo de luz, branco osso e ouro, raios divinos volumétricos, etéreo, iconografia religiosa, suave"
  • Final frio: "estrutura de gelo cristalino pálido se dissolvendo lentamente, folk glacial, azul frio e branco osso, minimalista, calmo, desvanecendo para preto"

Gere 6–10 por preset, mantenha 2–3. Para movimento, anime imagens estáticas com um modelo de imagem-para-vídeo ou gere clipes curtos diretamente; mantenha os movimentos de câmera lentos conforme as regras de Movimento.

Receitas FFmpeg (corte + reenquadramento)

# Reenquadrar qualquer clipe paisagem/bruto para 9:16 (corte central)
ffmpeg -i in.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" v.mp4

# Corte na batida de um clipe para exatamente N batidas a 138 BPM (ex.: 2 batidas = 0,8696s)
ffmpeg -i in.mp4 -t 0.8696 -c copy beat2.mp4

# Concatenar selecionados de batida na montagem do verso
for f in selects/*.mp4; do echo "file '$f'"; done > concat.txt
ffmpeg -f concat -safe 0 -i concat.txt -c copy verse.mp4

# Remover UI cromada / barra de status de uma referência gravada de tela (corte superior+inferior)
ffmpeg -i reel.mp4 -vf "crop=iw:ih-300:0:150" clean.mp4

Esqueleto de Composição no Remotion (sincronizado com a batida)

import { AbsoluteFill, Sequence, Video, Img, useCurrentFrame, interpolate } from "remotion";

const FPS = 30, BPM = 138;
const beat = (n: number) => Math.round(n * (60 / BPM) * FPS);

const Bloom: React.FC = () => {
  const f = useCurrentFrame();
  const o = interpolate(f, [0, 3, 12], [0, 1, 0], { extrapolateRight: "clamp" }); // flash divino num transiente
  return <AbsoluteFill style={{ background: "radial-gradient(#fff,#ffb24d)", opacity: o, mixBlendMode: "screen" }} />;
};

export const AngelcoreMV: React.FC = () => (
  <AbsoluteFill style={{ background: "#05060a" }}>
    {/* Verso: macro herói-no-preto, corte seco a cada 2 batidas */}
    <Sequence from={beat(0)} durationInFrames={beat(2)}><Video src="/selects/key.mp4" /></Sequence>
    <Sequence from={beat(2)} durationInFrames={beat(2)}><Video src="/selects/eye.mp4" /></Sequence>
    <Sequence from={beat(4)} durationInFrames={beat(2)}><Video src="/selects/gear.mp4" /></Sequence>
    {/* Drop: bloom cristalino + flash no tempo forte */}
    <Sequence from={beat(8)} durationInFrames={beat(16)}><Video src="/selects/crystalline.mp4" /></Sequence>
    <Sequence from={beat(8)} durationInFrames={beat(1)}><Bloom /></Sequence>
  </AbsoluteFill>
);

Renderize: npx remotion render src/index.ts AngelcoreMV out.mp4. Veja remotion-video-creation para configuração do projeto, vinculação da faixa de áudio e flags de renderização.

Princípios Chave

  1. Decida o gênero antes da primeira geração. Escolha uma família principal + um acento.
  2. Uma cor de acento por tomada. Ouro no escuro, iridescência no claro, vermelho uma vez.
  3. Cada corte seco cai numa batida. Use a matemática da batida; sem transições em seções de andamento.
  4. Macro herói-no-preto é o movimento característico. Domine-o; ele carrega a peça.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

accessibility

Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA. Use when building or auditing UI that must meet WCAG 2.2 Level AA, or when reviewing a change for keyboard, contrast, or screen-reader support.

affaan-m/content-engine

Create platform-native content systems for X, LinkedIn, TikTok, YouTube, newsletters, and repurposed multi-platform campaigns. Use when the user wants social posts, threads, scripts, content calendars, or one source asset adapted cleanly across platforms.

affaan-m/ECC

Multi-platform content distribution across X, LinkedIn, Threads, and Bluesky. Adapts content per platform using content-engine patterns. Never posts identical content cross-platform. Use when the user wants to distribute content across social platforms.

affaan-m/fal-ai-media

Unified media generation via fal.ai MCP — image, video, and audio. Covers text-to-image (Nano Banana), text/image-to-video (Seedance, Kling, Veo 3), text-to-speech (CSM-1B), and video-to-audio (ThinkSound). Use when the user wants to generate images, videos, or audio with AI.

affaan-m/manim-video

日本語翻訳:このファイルは manim-video 用の日本語翻訳が必要です

affaan-m/remotion-video-creation

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

affaan-m/video-editing

AI-assisted video editing workflows for cutting, structuring, and augmenting real footage. Covers the full pipeline from raw capture through FFmpeg, Remotion, ElevenLabs, fal.ai, and final polish in Descript or CapCut. Use when the user wants to edit video, cut footage, create vlogs, or build video content.

agent-architecture-audit

Full-stack diagnostic for agent and LLM applications. Audits the 12-layer agent stack for wrapper regression, memory pollution, tool discipline failures, hidden repair loops, and rendering corruption. Produces severity-ranked findings with code-first fixes. Essential for developers building agent applications, autonomous loops, or any LLM-powered feature. Use when an agent or LLM feature misbehaves and the failing layer is unknown, or before shipping an agent stack.

agent-eval

Head-to-head comparison of coding agents (Claude Code, Aider, Codex, etc.) on custom tasks with pass rate, cost, time, and consistency metrics. Use when choosing between coding agents, or when a change to an agent setup needs measured pass rate, cost, and time rather than an impression.

agent-harness-construction

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates. Use when defining or revising an agent

agentic-engineering

Operate as an agentic engineer using eval-first execution, decomposition, and cost-aware model routing. Use when planning or executing engineering work that agents will carry out end to end.

agentic-os

Build persistent multi-agent operating systems on Claude Code. Covers kernel architecture, specialist agents, slash commands, file-based memory, scheduled automation, and state management without external databases. Use when building a persistent multi-agent system on Claude Code with its own memory, commands, and scheduling.

agent-introspection-debugging

Structured self-debugging workflow for AI agent failures using capture, diagnosis, contained recovery, and introspection reports. Use when an agent run fails and you need a reproducible diagnosis instead of a retry.

agent-payment-x402

Add x402 payment execution to AI agents with per-task budgets, spending controls, and non-custodial wallets. Supports Base through agentwallet-sdk and X Layer through OKX Payments / OKX Agent Payments Protocol. Use when an agent must pay for something itself and needs per-task budgets, spending controls, and a non-custodial wallet.

agent-self-evaluation

Use after completing any non-trivial task. The agent self-rates its output on 5 axes — accuracy, completeness, clarity, actionability, conciseness — with concrete evidence per criterion. Produces a structured 1-5 scorecard with specific improvement suggestions.

agent-sort

Build an evidence-backed ECC install plan for a specific repo by sorting skills, commands, rules, hooks, and extras into DAILY vs LIBRARY buckets using parallel repo-aware review passes. Use when ECC should be trimmed to what a project actually needs instead of loading the full bundle.

ai-first-engineering

Engineering operating model for teams where AI agents generate a large share of implementation output. Use when setting team process, review gates, or ownership rules for a codebase largely written by agents.

ai-regression-testing

Regression testing strategies for AI-assisted development. Sandbox-mode API testing without database dependencies, automated bug-check workflows, and patterns to catch AI blind spots where the same model writes and reviews code. Use when adding regression coverage to AI-assisted code, or when the same model both wrote and reviewed a change.

android-clean-architecture

Clean Architecture patterns for Android and Kotlin Multiplatform projects — module structure, dependency rules, UseCases, Repositories, and data layer patterns. Use when structuring modules, layers, or data flow in an Android or KMP project.

angular-developer

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

Habilidades Relacionadas