Redesign Instituto +Brasal — Documentação completa do processo

redesign-instituto/
├── stack-a-gsap/          # sem referência
├── stack-b-motion/        # sem referência
├── stack-c-system/        # sem referência
├── stack-d-ref-tokens/    # com referência
├── stack-e-ref-visual/    # com referência
└── stack-f-ref-system/    # com referência
    ├── images/            # logo, hero, favicon, ODS, logos...
    ├── DESIGN.md
    ├── referencia/        # só nas stacks D/E/F
    │   ├── images/        # screenshots do site referência
    │   └── videos/        # gravações de navegação da referência
    └── (projeto Next.js)

npx skills add vercel-labs/agent-skills

npx skills add vercel-labs/agent-skills
npx skills add greensock/gsap-skills
npx impeccable install

# REDESIGN — INSTITUTO +BRASAL (HOME) — STACK A: GSAP (Cinemática)

## Contexto
Vamos redesenhar o site https://www.brasal.com.br/instituto/ em Next.js. Nesta fase, SOMENTE a home.
O CONTEÚDO é imutável: mesmos textos, mesmo menu, mesmas seções do site atual. O que muda é 100% o design.
O ponto-chave do novo design é MOTION: movimento dirigido pelo scroll, efeitos de texto e efeitos de imagem em nível de produção.

## Stack técnica
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Engine de animação: GSAP + ScrollTrigger + SplitText. Use UMA engine só, nada de Motion/Framer Motion. Instale via npm install gsap e siga os padrões das skills instaladas (useGSAP no React, cleanup de triggers, matchMedia).
- Antes de codar: leia o PRODUCT.md e o DESIGN.md gerados pelo /impeccable init e evolua o DESIGN.md com os tokens de motion (durações, easings, distâncias de parallax, regras de stagger, configs de scrub) que você vai usar com GSAP/ScrollTrigger.

## Passo 0 — Inventário e assets (obrigatório antes de qualquer código)
1. Acesse https://www.brasal.com.br/instituto/ e extraia o conteúdo REAL da home (textos verbatim, ordem das seções, itens de menu com URLs).
2. Baixe para a pasta ./images/ os assets do site atual: logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), imagem institucional, imagens dos 3 eixos, imagem das ODS (4-ods.jpg), capas dos 5 relatórios, e TODOS os logos de instituições apoiadas e parceiros (brand-*.png e Logo-*.jpg). Gere favicon a partir do logo.
3. Se precisar de imagens novas (hero, texturas), use fotografia real de banco livre (Unsplash/Pexels) coerente com impacto social no DF. Nada de imagem gerada por IA com cara de IA.

## Estrutura da home (ordem fixa, conteúdo idêntico ao site atual)
1. Header: logo + menu completo (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [Brasal Refrigerantes, Incorporações, Veículos, Combustíveis, Energia, Corretora, SIA Park Hotel] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato). Links apontando para as URLs atuais.
2. Hero / banner do Edital 2026 — Programa Vamos Juntos, com o texto atual ("O Instituto +Brasal lança o Edital do Programa Vamos Juntos...") e CTA "Confira o Edital 2026 / Clique aqui".
3. Seção "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" com o parágrafo institucional atual + CTAs "Mais sobre o Instituto" e "Conheça o Programa".
4. Seção de VÍDEO: incorporar https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (lazy load, facade com thumbnail + play, sem custo de LCP).
5. EIXOS DE ATUAÇÃO: 3 cards com os textos atuais (+EDUCAÇÃO / +Fortalecimento institucional de OSC's / Voluntariado Empresarial) e links "Saiba+".
6. Números de impacto ("Desde a sua criação, geramos uma rede de impacto de"): Doamos +181.100 itens · Beneficiamos 434.100 pessoas · Instituições apoiadas + de 480 projetos · Regiões administrativas no DF, GO e MG. ATENÇÃO: a home atual tem dois blocos de contadores com valores divergentes (65.100/269.100 vs 181.100/434.100); use os valores visíveis na versão desktop atual e me avise da divergência no final.
7. TRANSPARÊNCIA: os 5 relatórios de atividades com links para os PDFs atuais.
8. ODS DA ONU: texto atual + as 4 ODS com suas descrições.
9. INSTITUIÇÕES APOIADAS e PARCEIROS QUE SOMAM: grades/marquee com os logos baixados.
10. MAPA: antes do footer, embed do Google Maps do endereço "SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011" (iframe https://www.google.com/maps?q=...&output=embed, lazy load).
11. Footer: conteúdo atual (Institucional Brasal, telefone (61)3462-8077, endereço completo, institutomaisbrasal@brasal.com.br, horário Seg–Sex 08:00–18:00, redes sociais, menu repetido, copyright).

## Requisitos de motion (o coração do projeto)
- Scroll: hero com scrub/parallax via ScrollTrigger, seções com pinning ou revelação coreografada em timeline, transições entre seções sem cortes secos.
- Texto: títulos com reveal por SplitText (palavras/linhas com stagger e mask), parágrafos com fade+rise sutil.
- Imagens: zoom lento (scale 1.0→1.08) atrelado ao scroll (scrub), clip-path reveals, parallax em camadas com velocidades diferentes.
- Contadores: count-up (gsap com snap) disparado ao entrar no viewport.
- Logos de parceiros: marquee infinito pausável no hover, ou grid com stagger.
- Micro-interações: hover states com física real em botões, cards e itens de menu.
- OBRIGATÓRIO: respeitar prefers-reduced-motion via gsap.matchMedia (versão estática digna), animar apenas transform/opacity, cleanup correto de todos os ScrollTriggers, nada de layout thrashing, 60fps no mobile.

## Anti-"cara de IA" (crítico)
- Proibido: gradiente roxo/azul genérico, glassmorphism gratuito, emojis na UI, Inter como display font, cards idênticos em grid 3x3 com sombras iguais, hero centralizado com pill badge.
- A identidade parte das cores reais da marca Instituto +Brasal (extraia do logo e do site atual) com uma direção tipográfica própria e intencional, seguindo o DESIGN.md.

## Entrega e validação
- Projeto rodando com `npm run dev`, home completa e responsiva (mobile-first).
- DESIGN.md evoluído na raiz. Pasta ./images/ organizada.
- Ao final: me entregue a lista de todos os ScrollTriggers criados (seção → efeito) e o aviso da divergência dos contadores.
- Não invente conteúdo. Se algum texto do site atual estiver inacessível, me pergunte antes.

1. /impeccable critique
   (aplicar TODAS as correções apontadas antes de seguir)

2. /impeccable polish

3. /impeccable bolder
   (opcional: só se o resultado ficou tímido para um site motion-first)

4. "Rode um passe de performance nas animações GSAP: verifique cleanup de
   todos os ScrollTriggers (kill/revert no unmount), uso de gsap.matchMedia
   para mobile e prefers-reduced-motion, will-change apenas onde necessário,
   e confirme que nada anima propriedade de layout. Corrija o que encontrar."

npx impeccable detect

npx skills add vercel-labs/agent-skills
npx motion-ai
npx skills add 199-biotechnologies/motion-dev-animations-skill
npx skills@latest add emilkowalski/skills
npx skills add Leonxlnx/taste-skill

# REDESIGN — INSTITUTO +BRASAL (HOME) — STACK B: MOTION.DEV (Craft & Física)

## Contexto
Vamos redesenhar o site https://www.brasal.com.br/instituto/ em Next.js. Nesta fase, SOMENTE a home.
O CONTEÚDO é imutável: mesmos textos, mesmo menu, mesmas seções do site atual. O que muda é 100% o design.
O ponto-chave do novo design é MOTION: movimento dirigido pelo scroll, efeitos de texto e efeitos de imagem em nível de produção.

## Stack técnica
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Engine de animação: Motion (motion.dev). Use UMA engine só, nada de GSAP. Instale via npm install motion e use os padrões das skills instaladas (scroll, springs, parallax, FLIP, stagger).
- Configuração do Taste Skill para este projeto: DESIGN_VARIANCE alto, MOTION alto, DENSITY média. O site é motion-first, mas institucional: movimento expressivo com legibilidade preservada.
- Antes de codar: use as skills instaladas para definir a direção de design e gere o arquivo DESIGN.md na raiz desta pasta (paleta, tipografia, espaçamento, tokens de motion com durações/easings/configs de spring, regras do que NÃO fazer).

## Passo 0 — Inventário e assets (obrigatório antes de qualquer código)
1. Acesse https://www.brasal.com.br/instituto/ e extraia o conteúdo REAL da home (textos verbatim, ordem das seções, itens de menu com URLs).
2. Baixe para a pasta ./images/ os assets do site atual: logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), imagem institucional, imagens dos 3 eixos, imagem das ODS (4-ods.jpg), capas dos 5 relatórios, e TODOS os logos de instituições apoiadas e parceiros (brand-*.png e Logo-*.jpg). Gere favicon a partir do logo.
3. Se precisar de imagens novas (hero, texturas), use fotografia real de banco livre (Unsplash/Pexels) coerente com impacto social no DF. Nada de imagem gerada por IA com cara de IA.

## Estrutura da home (ordem fixa, conteúdo idêntico ao site atual)
1. Header: logo + menu completo (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [Brasal Refrigerantes, Incorporações, Veículos, Combustíveis, Energia, Corretora, SIA Park Hotel] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato). Links apontando para as URLs atuais.
2. Hero / banner do Edital 2026 — Programa Vamos Juntos, com o texto atual ("O Instituto +Brasal lança o Edital do Programa Vamos Juntos...") e CTA "Confira o Edital 2026 / Clique aqui".
3. Seção "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" com o parágrafo institucional atual + CTAs "Mais sobre o Instituto" e "Conheça o Programa".
4. Seção de VÍDEO: incorporar https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (lazy load, facade com thumbnail + play, sem custo de LCP).
5. EIXOS DE ATUAÇÃO: 3 cards com os textos atuais (+EDUCAÇÃO / +Fortalecimento institucional de OSC's / Voluntariado Empresarial) e links "Saiba+".
6. Números de impacto ("Desde a sua criação, geramos uma rede de impacto de"): Doamos +181.100 itens · Beneficiamos 434.100 pessoas · Instituições apoiadas + de 480 projetos · Regiões administrativas no DF, GO e MG. ATENÇÃO: a home atual tem dois blocos de contadores com valores divergentes (65.100/269.100 vs 181.100/434.100); use os valores visíveis na versão desktop atual e me avise da divergência no final.
7. TRANSPARÊNCIA: os 5 relatórios de atividades com links para os PDFs atuais.
8. ODS DA ONU: texto atual + as 4 ODS com suas descrições.
9. INSTITUIÇÕES APOIADAS e PARCEIROS QUE SOMAM: grades/marquee com os logos baixados.
10. MAPA: antes do footer, embed do Google Maps do endereço "SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011" (iframe https://www.google.com/maps?q=...&output=embed, lazy load).
11. Footer: conteúdo atual (Institucional Brasal, telefone (61)3462-8077, endereço completo, institutomaisbrasal@brasal.com.br, horário Seg–Sex 08:00–18:00, redes sociais, menu repetido, copyright).

## Requisitos de motion (o coração do projeto)
- Scroll: hero com scrub/parallax via useScroll + useTransform, seções com revelação coreografada (whileInView com stagger), transições entre seções sem cortes secos.
- Texto: títulos com reveal por split (palavras/linhas com stagger e mask), parágrafos com fade+rise sutil.
- Imagens: zoom lento (scale 1.0→1.08) atrelado ao scroll, clip-path reveals, parallax em camadas com velocidades diferentes.
- Contadores: count-up com spring disparado ao entrar no viewport.
- Logos de parceiros: marquee infinito pausável no hover, ou grid com stagger.
- Micro-interações: hover states com física real de spring em botões, cards e itens de menu (nada de transition linear de CSS).
- OBRIGATÓRIO: respeitar prefers-reduced-motion (versão estática digna), animar apenas transform/opacity, nada de layout thrashing, 60fps no mobile.

## Anti-"cara de IA" (crítico)
- Proibido: gradiente roxo/azul genérico, glassmorphism gratuito, emojis na UI, Inter como display font, cards idênticos em grid 3x3 com sombras iguais, hero centralizado com pill badge.
- A identidade parte das cores reais da marca Instituto +Brasal (extraia do logo e do site atual) com uma direção tipográfica própria e intencional, documentada no DESIGN.md.

## Entrega e validação
- Projeto rodando com `npm run dev`, home completa e responsiva (mobile-first).
- DESIGN.md preenchido na raiz. Pasta ./images/ organizada.
- Ao final: rode a auditoria de animações da skill de review instalada (easing, duração, física dos springs, coreografia, comportamento no scroll) + o checklist anti-slop do Taste Skill, e me entregue o resultado com a lista do que você corrigiu.
- Não invente conteúdo. Se algum texto do site atual estiver inacessível, me pergunte antes.

1. "Revise todas as animações da home usando a skill de review de animações:
   audite easing, duração, física dos springs, coreografia de entrada e
   comportamento no scroll. Liste os problemas por severidade e corrija."

2. "Aplique o checklist anti-slop do Taste Skill na home inteira e corrija
   o que estiver genérico ou com cara de template."

3. "Rode um passe final de micro-interações: hover de botões, cards, itens
   de menu e links, tudo com springs, nada de transition linear de CSS."

npx skills add vercel-labs/agent-skills
npx skills add nextlevelbuilder/ui-ux-pro-max-skill
npx skills add kylezantos/design-motion-principles
npx skills add LottieFiles/motion-design-skill

Use a skill UI/UX Pro Max para gerar o design system completo de um redesign institucional.

Contexto do produto:
- Site: Instituto +Brasal (https://www.brasal.com.br/instituto/), instituto de investimento social privado do grupo Brasal, atuando no DF com educação, fortalecimento de OSCs e voluntariado empresarial.
- Público: OSCs, escolas públicas, parceiros corporativos, colaboradores voluntários e sociedade civil do DF.
- Personalidade desejada: humano, sério e confiável, com energia e modernidade. Impacto social real, sem estética de ONG datada e sem cara de template de IA.
- Restrição de marca: a paleta deve partir das cores reais do logo do Instituto +Brasal (baixe e analise: https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png). Você define os complementos, neutros e acentos.
- O site será motion-first: muito movimento no scroll, em textos e imagens. O sistema precisa prever isso (tipografia display que aguenta split/reveal, imagens com espaço para zoom, contraste que sobrevive a overlays).

Entregue no arquivo DESIGN.md na raiz desta pasta:
1. Estilo escolhido (e por que ele, e não os 2 finalistas descartados)
2. Paleta completa com tokens (hex + uso de cada cor)
3. Font pairing (display + texto) com escala tipográfica
4. Espaçamento, grid e raios
5. Tokens de motion: durações, easings, distâncias de stagger, regras de quando animar e quando não
6. Regras do que NÃO fazer neste projeto (anti-padrões, anti-"cara de IA")

Não escreva código de componentes ainda. Só o sistema.

# REDESIGN — INSTITUTO +BRASAL (HOME) — STACK C: DESIGN SYSTEM + REACT BITS

## Contexto
Vamos redesenhar o site https://www.brasal.com.br/instituto/ em Next.js. Nesta fase, SOMENTE a home.
O CONTEÚDO é imutável: mesmos textos, mesmo menu, mesmas seções do site atual. O que muda é 100% o design.
O ponto-chave do novo design é MOTION: movimento dirigido pelo scroll, efeitos de texto e efeitos de imagem em nível de produção.

## Stack técnica
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Engine de animação: Motion (motion.dev) + componentes do React Bits (https://reactbits.dev). Regras: (1) prefira componentes do React Bits baseados em Motion; (2) se o componente ideal depender de GSAP, procure alternativa equivalente ou implemente do zero com Motion; (3) no código autoral, use SOMENTE Motion, nunca duas engines no mesmo componente.
- Componentes do React Bits entram via npx shadcn add @react-bits/[Componente]. Candidatos por seção: CountUp (números de impacto), componentes de text animation para os títulos (variantes Motion), LogoWall/marquee (parceiros), e efeitos de background/imagem onde o DESIGN.md permitir. Todo componente adicionado deve ser customizado para os tokens do DESIGN.md (cores, fontes, durações), nada entra com aparência default.
- Antes de codar: leia o DESIGN.md já gerado na raiz (via UI/UX Pro Max) e siga ele à risca. Se algum requisito abaixo conflitar com o DESIGN.md, me pergunte antes de decidir. Use a skill de princípios de motion no modo Create para planejar a coreografia seção a seção antes de implementar.

## Passo 0 — Inventário e assets (obrigatório antes de qualquer código)
1. Acesse https://www.brasal.com.br/instituto/ e extraia o conteúdo REAL da home (textos verbatim, ordem das seções, itens de menu com URLs).
2. Baixe para a pasta ./images/ os assets do site atual: logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), imagem institucional, imagens dos 3 eixos, imagem das ODS (4-ods.jpg), capas dos 5 relatórios, e TODOS os logos de instituições apoiadas e parceiros (brand-*.png e Logo-*.jpg). Gere favicon a partir do logo.
3. Se precisar de imagens novas (hero, texturas), use fotografia real de banco livre (Unsplash/Pexels) coerente com impacto social no DF. Nada de imagem gerada por IA com cara de IA.

## Estrutura da home (ordem fixa, conteúdo idêntico ao site atual)
1. Header: logo + menu completo (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [Brasal Refrigerantes, Incorporações, Veículos, Combustíveis, Energia, Corretora, SIA Park Hotel] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato). Links apontando para as URLs atuais.
2. Hero / banner do Edital 2026 — Programa Vamos Juntos, com o texto atual ("O Instituto +Brasal lança o Edital do Programa Vamos Juntos...") e CTA "Confira o Edital 2026 / Clique aqui".
3. Seção "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" com o parágrafo institucional atual + CTAs "Mais sobre o Instituto" e "Conheça o Programa".
4. Seção de VÍDEO: incorporar https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (lazy load, facade com thumbnail + play, sem custo de LCP).
5. EIXOS DE ATUAÇÃO: 3 cards com os textos atuais (+EDUCAÇÃO / +Fortalecimento institucional de OSC's / Voluntariado Empresarial) e links "Saiba+".
6. Números de impacto ("Desde a sua criação, geramos uma rede de impacto de"): Doamos +181.100 itens · Beneficiamos 434.100 pessoas · Instituições apoiadas + de 480 projetos · Regiões administrativas no DF, GO e MG. ATENÇÃO: a home atual tem dois blocos de contadores com valores divergentes (65.100/269.100 vs 181.100/434.100); use os valores visíveis na versão desktop atual e me avise da divergência no final.
7. TRANSPARÊNCIA: os 5 relatórios de atividades com links para os PDFs atuais.
8. ODS DA ONU: texto atual + as 4 ODS com suas descrições.
9. INSTITUIÇÕES APOIADAS e PARCEIROS QUE SOMAM: grades/marquee com os logos baixados.
10. MAPA: antes do footer, embed do Google Maps do endereço "SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011" (iframe https://www.google.com/maps?q=...&output=embed, lazy load).
11. Footer: conteúdo atual (Institucional Brasal, telefone (61)3462-8077, endereço completo, institutomaisbrasal@brasal.com.br, horário Seg–Sex 08:00–18:00, redes sociais, menu repetido, copyright).

## Requisitos de motion (o coração do projeto)
- Scroll: hero com parallax, seções com revelação coreografada ao entrar no viewport, transições entre seções sem cortes secos.
- Texto: títulos com reveal por split (palavras/linhas com stagger e mask), parágrafos com fade+rise sutil.
- Imagens: zoom lento (scale 1.0→1.08) atrelado ao scroll, clip-path reveals, parallax em camadas.
- Contadores: CountUp disparado ao entrar no viewport.
- Logos de parceiros: marquee infinito pausável no hover, ou grid com stagger.
- Micro-interações: hover states com física real em botões, cards e itens de menu.
- Coerência: a coreografia inteira deve seguir os 12 princípios da skill de motion design e os tokens de motion do DESIGN.md. Movimento com propósito, nada de efeito por efeito.
- OBRIGATÓRIO: respeitar prefers-reduced-motion (versão estática digna), animar apenas transform/opacity, nada de layout thrashing, 60fps no mobile.

## Anti-"cara de IA" (crítico)
- Proibido: gradiente roxo/azul genérico, glassmorphism gratuito, emojis na UI, Inter como display font, cards idênticos em grid 3x3 com sombras iguais, hero centralizado com pill badge.
- Risco específico desta stack: componente de biblioteca com aparência default entrega cara de template na hora. TODO componente do React Bits precisa sair irreconhecível em relação à demo do site deles: cores, fontes, timing e comportamento adaptados ao DESIGN.md.

## Entrega e validação
- Projeto rodando com `npm run dev`, home completa e responsiva (mobile-first).
- Pasta ./images/ organizada. DESIGN.md atualizado se algo evoluiu durante o build.
- Liste ao final quais componentes do React Bits foram usados, em qual seção, e o que foi customizado em cada um.
- Não invente conteúdo. Se algum texto do site atual estiver inacessível, me pergunte antes.

1. "Rode a auditoria da skill de princípios de motion (modo Audit) na home
   inteira, com as 3 lentes. Gere o relatório, liste os problemas por
   severidade e corrija todos os de severidade alta e média."

2. "Passe anti-template: compare cada componente do React Bits usado com a
   demo original em reactbits.dev. Onde ainda estiver reconhecível como
   default, customize mais fundo (timing, cores, comportamento)."

3. "Verifique coerência de coreografia: todas as seções devem parecer da
   mesma família de movimento (mesmos easings e ritmos do DESIGN.md).
   Corrija qualquer seção que destoe."

npx skills add vercel-labs/agent-skills
npx skills add greensock/gsap-skills
npx impeccable install

# Pré-passo obrigatório: gerar o DESIGN.md a partir da referência
npx dembrandt {URL_REFERENCIA} --design-md
# mover o DESIGN.md gerado para a raiz da pasta da stack

# Opcional: 11 tools MCP para consultar tokens durante o build
claude mcp add dembrandt

# REDESIGN COM REFERÊNCIA — INSTITUTO +BRASAL (HOME) — STACK D: ENGENHARIA REVERSA DE TOKENS

## Referência de design
- URL do site referência: {URL_REFERENCIA}
- Screenshots da referência: ./referencia/images/ (analise TODAS antes de codar)
- Vídeos de navegação da referência: ./referencia/videos/ (estude o comportamento do scroll: o que ancora, o que desliza, velocidades, easings, como o texto entra, como as imagens reagem)

## Como usar a referência (regra de ouro)
A referência define LINGUAGEM DE DESIGN E MOTION: densidade, ritmo do scroll, tipografia como elemento gráfico, tratamento de imagem, coreografia.
Ela NÃO define conteúdo nem identidade: o site é do Instituto +Brasal, com as cores da marca (extraia do logo) e todo o conteúdo do site atual. O resultado deve parecer "da mesma escola de design" da referência, nunca um clone.
ESPECÍFICO DESTA STACK: o DESIGN.md na raiz foi gerado pelo Dembrandt a partir da referência. Antes de codar: (1) adapte a paleta para as cores da marca Instituto +Brasal mantendo a lógica de contraste da referência; (2) evolua os tokens de motion do DESIGN.md com o que você observar nos vídeos (durações, easings, distâncias de scrub/parallax, regras de stagger).

## Contexto e conteúdo
Redesign de https://www.brasal.com.br/instituto/ em Next.js 15 (App Router) + TypeScript + Tailwind. SOMENTE a home nesta fase.
Conteúdo 100% idêntico ao site atual: mesmos textos, menu e seções. Só o design muda.
Engine de animação: GSAP + ScrollTrigger + SplitText. Use UMA engine só, nada de Motion/Framer Motion. Siga os padrões das skills instaladas (useGSAP, cleanup de triggers, matchMedia).

## Passo 0 — Inventário e assets
1. Extraia o conteúdo real da home atual (textos verbatim, menu completo com URLs, ordem das seções).
2. Baixe os assets atuais para ./images/: logo (wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), imagens dos eixos, ODS (4-ods.jpg), capas dos 5 relatórios, todos os logos de parceiros e instituições (brand-*.png, Logo-*.jpg). Gere o favicon a partir do logo.
3. Imagens novas apenas de fotografia real (Unsplash/Pexels), tratadas conforme a linguagem da referência (duotone, grain, crop, o que a referência usar).

## Estrutura da home (ordem fixa)
1. Header com o menu completo atual (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [as 7 empresas Brasal] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato), links para as URLs atuais.
2. Hero do Edital 2026 — Programa Vamos Juntos (texto e CTA atuais).
3. "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" (parágrafo atual + 2 CTAs).
4. Vídeo: https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (facade lazy com thumbnail + play).
5. EIXOS DE ATUAÇÃO (3 cards, textos atuais, "Saiba+").
6. Números de impacto: Doamos +181.100 itens · Beneficiamos 434.100 pessoas · +480 projetos · regiões no DF/GO/MG, com count-up. (A home atual tem dois blocos divergentes de números; use os da versão desktop e me reporte a divergência.)
7. TRANSPARÊNCIA (5 relatórios, links para os PDFs atuais).
8. ODS DA ONU (texto e as 4 ODS atuais).
9. INSTITUIÇÕES APOIADAS + PARCEIROS QUE SOMAM (logos baixados).
10. MAPA antes do footer: iframe Google Maps (q="SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011", output=embed, lazy).
11. Footer com todo o conteúdo atual (contatos, endereço, horário, redes, menu, copyright).

## Motion (ponto-chave)
Replique a GRAMÁTICA de movimento observada nos vídeos da referência: mapeie cada padrão (pin, scrub, parallax, split de texto, zoom de imagem, transições) e implemente o equivalente com GSAP/ScrollTrigger. Requisitos mínimos: scroll coreografado nas 11 seções, reveals de texto por SplitText com stagger, zoom/clip-path nas imagens, count-up nos números, marquee nos logos, micro-interações. prefers-reduced-motion via gsap.matchMedia obrigatório, apenas transform/opacity, cleanup de todos os ScrollTriggers, 60fps mobile.

## Anti-"cara de IA"
Nada de gradientes genéricos, emojis, glassmorphism gratuito ou template previsível. A referência existe justamente para dar uma direção com assinatura. Documente no DESIGN.md as decisões e as regras do que não fazer.

## Entrega e validação
- `npm run dev` funcionando, home completa e responsiva.
- DESIGN.md adaptado na raiz + ./images/ organizada.
- Ao final: (1) lista de todos os ScrollTriggers criados (seção → efeito), (2) tabela comparando padrão da referência → como foi implementado → onde você divergiu de propósito e por quê.
- Não invente conteúdo. Dúvida sobre texto = me pergunte.

1. /impeccable critique
   (aplicar as correções)

2. "Compare a home lado a lado com os vídeos e screenshots da referência:
   a gramática de motion está equivalente (ritmo, easings, coreografia)?
   Liste onde a home ficou mais fraca que a referência e corrija."

3. /impeccable polish

4. "Passe de performance GSAP: cleanup de ScrollTriggers, gsap.matchMedia
   para mobile e reduced-motion, will-change só onde necessário, 60fps."

npx skills add vercel-labs/agent-skills
npx skills add Leonxlnx/taste-skill
npx motion-ai
npx skills add 199-biotechnologies/motion-dev-animations-skill
npx skills@latest add emilkowalski/skills

# REDESIGN COM REFERÊNCIA — INSTITUTO +BRASAL (HOME) — STACK E: REPLICAÇÃO VISUAL

## Referência de design
- URL do site referência: {URL_REFERENCIA}
- Screenshots da referência: ./referencia/images/ (analise TODAS antes de codar)
- Vídeos de navegação da referência: ./referencia/videos/ (estude o comportamento do scroll: o que ancora, o que desliza, velocidades, easings, como o texto entra, como as imagens reagem)

## Como usar a referência (regra de ouro)
A referência define LINGUAGEM DE DESIGN E MOTION: densidade, ritmo do scroll, tipografia como elemento gráfico, tratamento de imagem, coreografia.
Ela NÃO define conteúdo nem identidade: o site é do Instituto +Brasal, com as cores da marca (extraia do logo) e todo o conteúdo do site atual. O resultado deve parecer "da mesma escola de design" da referência, nunca um clone.
ESPECÍFICO DESTA STACK: use o image-to-code da Taste Skill nos screenshots da referência para derivar os componentes ESTRUTURAIS (hero, seções, cards, ritmo de layout) e depois substitua conteúdo e identidade pelos do Instituto (cores da marca, tipografia própria coerente com a referência, textos originais do site atual). Diais do Taste: DESIGN_VARIANCE alto, MOTION alto, DENSITY conforme a referência.

## Contexto e conteúdo
Redesign de https://www.brasal.com.br/instituto/ em Next.js 15 (App Router) + TypeScript + Tailwind. SOMENTE a home nesta fase.
Conteúdo 100% idêntico ao site atual: mesmos textos, menu e seções. Só o design muda.
Engine de animação: Motion (motion.dev). Use UMA engine só, nada de GSAP. Padrões das skills instaladas: useScroll + useTransform, springs, whileInView, FLIP.
Gere o DESIGN.md na raiz documentando o sistema derivado da referência (paleta adaptada à marca, tipografia, espaçamento, tokens de motion com configs de spring, regras do que NÃO fazer).

## Passo 0 — Inventário e assets
1. Extraia o conteúdo real da home atual (textos verbatim, menu completo com URLs, ordem das seções).
2. Baixe os assets atuais para ./images/: logo (wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), imagens dos eixos, ODS (4-ods.jpg), capas dos 5 relatórios, todos os logos de parceiros e instituições (brand-*.png, Logo-*.jpg). Gere o favicon a partir do logo.
3. Imagens novas apenas de fotografia real (Unsplash/Pexels), tratadas conforme a linguagem da referência (duotone, grain, crop, o que a referência usar).

## Estrutura da home (ordem fixa)
1. Header com o menu completo atual (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [as 7 empresas Brasal] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato), links para as URLs atuais.
2. Hero do Edital 2026 — Programa Vamos Juntos (texto e CTA atuais).
3. "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" (parágrafo atual + 2 CTAs).
4. Vídeo: https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (facade lazy com thumbnail + play).
5. EIXOS DE ATUAÇÃO (3 cards, textos atuais, "Saiba+").
6. Números de impacto: Doamos +181.100 itens · Beneficiamos 434.100 pessoas · +480 projetos · regiões no DF/GO/MG, com count-up. (A home atual tem dois blocos divergentes de números; use os da versão desktop e me reporte a divergência.)
7. TRANSPARÊNCIA (5 relatórios, links para os PDFs atuais).
8. ODS DA ONU (texto e as 4 ODS atuais).
9. INSTITUIÇÕES APOIADAS + PARCEIROS QUE SOMAM (logos baixados).
10. MAPA antes do footer: iframe Google Maps (q="SIA Trecho 1 Lote 630 a 780, Bloco 5, Edifício Praça Capital, Sala 318, Brasília - DF, 71200-011", output=embed, lazy).
11. Footer com todo o conteúdo atual (contatos, endereço, horário, redes, menu, copyright).

## Motion (ponto-chave)
Replique a GRAMÁTICA de movimento observada nos vídeos da referência: mapeie cada padrão (pin, scrub, parallax, split de texto, zoom de imagem, transições) e implemente o equivalente com Motion. Requisitos mínimos: scroll coreografado nas 11 seções (useScroll + useTransform), reveals de texto por split com stagger, zoom/clip-path nas imagens, count-up com spring, marquee nos logos, micro-interações com física de spring. prefers-reduced-motion obrigatório, apenas transform/opacity, 60fps mobile.

## Anti-"cara de IA" e anti-clone
Nada de gradientes genéricos, emojis, glassmorphism gratuito ou template previsível. E o inverso também: o resultado não pode ser identificável como cópia da referência. Se um componente sair visualmente idêntico ao original, diferencie (tipografia, proporções, tratamento de imagem) mantendo a mesma escola de design. Documente no DESIGN.md.

## Entrega e validação
- `npm run dev` funcionando, home completa e responsiva.
- DESIGN.md na raiz + ./images/ organizada.
- Ao final: (1) auditoria de animações da skill de review (easing, duração, física, coreografia vs. os vídeos da referência), (2) tabela comparando padrão da referência → como foi implementado → onde você divergiu de propósito e por quê.
- Não invente conteúdo. Dúvida sobre texto = me pergunte.

1. "Revise todas as animações comparando com os vídeos da referência:
   easing, duração, física dos springs e coreografia estão à altura?
   Liste os problemas por severidade e corrija."

2. "Verificação anti-clone: liste todos os elementos que ficaram
   visualmente idênticos à referência e diferencie cada um mantendo a
   mesma escola de design (identidade Brasal)."

3. "Aplique o checklist anti-slop do Taste Skill na home inteira e
   corrija o que estiver genérico."

npx skills add vercel-labs/agent-skills
npx skills add nextlevelbuilder/ui-ux-pro-max-skill
npx skills add kylezantos/design-motion-principles
npx skills add LottieFiles/motion-design-skill
# React Bits entra no build via npx shadcn add @react-bits/[Componente]

Use a skill UI/UX Pro Max para gerar o design system de um redesign institucional INSPIRADO em uma referência.

Passo 1 — Estude a referência:
- URL: {URL_REFERENCIA}
- Screenshots: ./referencia/images/ (todas)
- Vídeos de navegação: ./referencia/videos/
Extraia PRINCÍPIOS, não pixels: lógica de densidade e espaçamento, papel da tipografia, tratamento de imagem, paleta funcional (como as cores são usadas, não quais são), ritmo e gramática do motion no scroll.

Passo 2 — Contexto do produto:
- Site: Instituto +Brasal (https://www.brasal.com.br/instituto/), instituto de investimento social privado do grupo Brasal (educação, fortalecimento de OSCs, voluntariado empresarial no DF).
- Personalidade: humano, sério e confiável, com energia e modernidade. Sem estética de ONG datada, sem cara de template de IA.
- Restrição de marca: a paleta parte das cores reais do logo (baixe e analise: https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), aplicadas com a LÓGICA de uso de cor da referência.
- O site será motion-first, com a gramática de movimento da referência.

Entregue no DESIGN.md na raiz:
1. Princípios extraídos da referência (lista explícita: o que veio de lá e por quê)
2. Estilo escolhido e finalistas descartados
3. Paleta com tokens (hex + uso), tipografia com escala, espaçamento/grid/raios
4. Tokens de motion: durações, easings, stagger, regras de quando animar
5. Regras do que NÃO fazer (anti-padrões, anti-"cara de IA", anti-clone da referência)

Não escreva código de componentes ainda. Só o sistema.

1. "Rode a auditoria da skill de princípios de motion (modo Audit) na home,
   com as 3 lentes. Corrija os problemas de severidade alta e média."

2. "Passe anti-template: compare cada componente do React Bits com a demo
   original em reactbits.dev e customize o que ainda estiver reconhecível."

3. "Rastreabilidade da referência: para cada princípio listado no DESIGN.md
   como vindo da referência, aponte onde ele aparece na home. Princípio sem
   aplicação = implementar ou remover do DESIGN.md."