Instituto +Brasal redesign — complete documentation of the process

redesign-instituto/
├── stack-a-gsap/          # no reference
├── stack-b-motion/        # no reference
├── stack-c-system/        # no reference
├── stack-d-ref-tokens/    # with reference
├── stack-e-ref-visual/    # with reference
└── stack-f-ref-system/    # with reference
    ├── images/            # logo, hero, favicon, SDGs, logos...
    ├── DESIGN.md
    ├── referencia/        # in the D/E/F stacks alone
    │   ├── images/        # screenshots of the reference site
    │   └── videos/        # navigation recordings of the reference
    └── (the Next.js project)

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 (Cinematic)

## Context
We are redesigning the site https://www.brasal.com.br/instituto/ in Next.js. In this phase, the HOME PAGE ONLY.
The CONTENT is immutable: the same texts, the same menu, the same sections as the current site. What changes is 100% the design.
The key point of the new design is MOTION: scroll-driven movement, text effects and image effects at production level.

## Technical stack
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Animation engine: GSAP + ScrollTrigger + SplitText. Use ONE engine alone, no Motion/Framer Motion. Install through npm install gsap and follow the patterns of the installed skills (useGSAP in React, trigger cleanup, matchMedia).
- Before coding: read the PRODUCT.md and the DESIGN.md generated by /impeccable init and evolve the DESIGN.md with the motion tokens (durations, easings, parallax distances, stagger rules, scrub configs) you will use with GSAP/ScrollTrigger.

## Step 0 — Inventory and assets (mandatory before any code)
1. Go to https://www.brasal.com.br/instituto/ and extract the REAL content of the home page (verbatim texts, section order, menu items with URLs).
2. Download the current site's assets into the ./images/ folder: the logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), the institutional image, the images of the 3 eixos, the SDG image (4-ods.jpg), the covers of the 5 reports, and ALL the logos of supported institutions and partners (brand-*.png and Logo-*.jpg). Generate a favicon from the logo.
3. If you need new images (hero, textures), use real photography from a free bank (Unsplash/Pexels) coherent with social impact in the DF. No AI-generated image with an AI look.

## Home page structure (a fixed order, content identical to the current site)
1. Header: logo + the complete menu (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 pointing at the current URLs.
2. Hero / the Edital 2026 — Programa Vamos Juntos banner, with the current text ("O Instituto +Brasal lança o Edital do Programa Vamos Juntos...") and the CTA "Confira o Edital 2026 / Clique aqui".
3. The "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" section with the current institutional paragraph + the CTAs "Mais sobre o Instituto" and "Conheça o Programa".
4. VIDEO section: embed https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (lazy load, a facade with a thumbnail + play, with no LCP cost).
5. EIXOS DE ATUAÇÃO: 3 cards with the current texts (+EDUCAÇÃO / +Fortalecimento institucional de OSC's / Voluntariado Empresarial) and "Saiba+" links.
6. Impact numbers ("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. ATTENTION: the current home page carries two counter blocks with divergent values (65.100/269.100 vs 181.100/434.100); use the values visible in the current desktop version and flag the divergence to me at the end.
7. TRANSPARÊNCIA: the 5 activity reports with links to the current PDFs.
8. THE UN SDGs: the current text + the 4 SDGs with their descriptions.
9. INSTITUIÇÕES APOIADAS and PARCEIROS QUE SOMAM: grids/marquee with the downloaded logos.
10. MAP: before the footer, a Google Maps embed of the address "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: the current content (Institucional Brasal, phone (61)3462-8077, the full address, institutomaisbrasal@brasal.com.br, hours Seg–Sex 08:00–18:00, social networks, the menu repeated, copyright).

## Motion requirements (the heart of the project)
- Scroll: a hero with scrub/parallax through ScrollTrigger, sections with pinning or a choreographed reveal in a timeline, transitions between sections with no hard cuts.
- Text: titles with a SplitText reveal (words/lines with stagger and a mask), paragraphs with a subtle fade+rise.
- Images: a slow zoom (scale 1.0→1.08) tied to the scroll (scrub), clip-path reveals, layered parallax at different speeds.
- Counters: a count-up (gsap with snap) fired on entering the viewport.
- Partner logos: an infinite marquee pausable on hover, or a grid with stagger.
- Micro-interactions: hover states with real physics on buttons, cards and menu items.
- MANDATORY: respect prefers-reduced-motion through gsap.matchMedia (a dignified static version), animate transform/opacity alone, clean up every ScrollTrigger correctly, no layout thrashing, 60fps on mobile.

## Anti-"AI look" (critical)
- Forbidden: the generic purple/blue gradient, gratuitous glassmorphism, emojis in the UI, Inter as the display font, identical cards in a 3x3 grid with identical shadows, a centered hero with a pill badge.
- The identity starts from the real brand colors of Instituto +Brasal (extract them from the logo and the current site) with a typographic direction of its own and with intent, following the DESIGN.md.

## Delivery and validation
- The project running with `npm run dev`, the home page complete and responsive (mobile-first).
- The DESIGN.md evolved at the root. The ./images/ folder organized.
- At the end: hand me the list of every ScrollTrigger created (section → effect) and the notice about the counter divergence.
- Invent no content. If any text on the current site turns out inaccessible, ask me first.

1. /impeccable critique
   (apply EVERY correction it points out before moving on)

2. /impeccable polish

3. /impeccable bolder
   (optional: only if the result came out timid for a motion-first site)

4. "Run a performance pass on the GSAP animations: check the cleanup of
   every ScrollTrigger (kill/revert on unmount), the use of gsap.matchMedia
   for mobile and prefers-reduced-motion, will-change where needed alone,
   and confirm that nothing animates a layout property. Fix what you find."

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 & Physics)

## Context
We are redesigning the site https://www.brasal.com.br/instituto/ in Next.js. In this phase, the HOME PAGE ONLY.
The CONTENT is immutable: the same texts, the same menu, the same sections as the current site. What changes is 100% the design.
The key point of the new design is MOTION: scroll-driven movement, text effects and image effects at production level.

## Technical stack
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Animation engine: Motion (motion.dev). Use ONE engine alone, no GSAP. Install through npm install motion and use the patterns of the installed skills (scroll, springs, parallax, FLIP, stagger).
- Taste Skill configuration for this project: DESIGN_VARIANCE high, MOTION high, DENSITY medium. The site is motion-first but institutional: expressive movement with legibility preserved.
- Before coding: use the installed skills to define the design direction and generate the DESIGN.md file at the root of this folder (palette, typography, spacing, motion tokens with durations/easings/spring configs, rules for what NOT to do).

## Step 0 — Inventory and assets (mandatory before any code)
1. Go to https://www.brasal.com.br/instituto/ and extract the REAL content of the home page (verbatim texts, section order, menu items with URLs).
2. Download the current site's assets into the ./images/ folder: the logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), the institutional image, the images of the 3 eixos, the SDG image (4-ods.jpg), the covers of the 5 reports, and ALL the logos of supported institutions and partners (brand-*.png and Logo-*.jpg). Generate a favicon from the logo.
3. If you need new images (hero, textures), use real photography from a free bank (Unsplash/Pexels) coherent with social impact in the DF. No AI-generated image with an AI look.

## Home page structure (a fixed order, content identical to the current site)
1. Header: logo + the complete menu (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 pointing at the current URLs.
2. Hero / the Edital 2026 — Programa Vamos Juntos banner, with the current text ("O Instituto +Brasal lança o Edital do Programa Vamos Juntos...") and the CTA "Confira o Edital 2026 / Clique aqui".
3. The "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" section with the current institutional paragraph + the CTAs "Mais sobre o Instituto" and "Conheça o Programa".
4. VIDEO section: embed https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (lazy load, a facade with a thumbnail + play, with no LCP cost).
5. EIXOS DE ATUAÇÃO: 3 cards with the current texts (+EDUCAÇÃO / +Fortalecimento institucional de OSC's / Voluntariado Empresarial) and "Saiba+" links.
6. Impact numbers ("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. ATTENTION: the current home page carries two counter blocks with divergent values (65.100/269.100 vs 181.100/434.100); use the values visible in the current desktop version and flag the divergence to me at the end.
7. TRANSPARÊNCIA: the 5 activity reports with links to the current PDFs.
8. THE UN SDGs: the current text + the 4 SDGs with their descriptions.
9. INSTITUIÇÕES APOIADAS and PARCEIROS QUE SOMAM: grids/marquee with the downloaded logos.
10. MAP: before the footer, a Google Maps embed of the address "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: the current content (Institucional Brasal, phone (61)3462-8077, the full address, institutomaisbrasal@brasal.com.br, hours Seg–Sex 08:00–18:00, social networks, the menu repeated, copyright).

## Motion requirements (the heart of the project)
- Scroll: a hero with scrub/parallax through useScroll + useTransform, sections with a choreographed reveal (whileInView with stagger), transitions between sections with no hard cuts.
- Text: titles with a split reveal (words/lines with stagger and a mask), paragraphs with a subtle fade+rise.
- Images: a slow zoom (scale 1.0→1.08) tied to the scroll, clip-path reveals, layered parallax at different speeds.
- Counters: a count-up with a spring fired on entering the viewport.
- Partner logos: an infinite marquee pausable on hover, or a grid with stagger.
- Micro-interactions: hover states with real spring physics on buttons, cards and menu items (no linear CSS transition).
- MANDATORY: respect prefers-reduced-motion (a dignified static version), animate transform/opacity alone, no layout thrashing, 60fps on mobile.

## Anti-"AI look" (critical)
- Forbidden: the generic purple/blue gradient, gratuitous glassmorphism, emojis in the UI, Inter as the display font, identical cards in a 3x3 grid with identical shadows, a centered hero with a pill badge.
- The identity starts from the real brand colors of Instituto +Brasal (extract them from the logo and the current site) with a typographic direction of its own and with intent, documented in the DESIGN.md.

## Delivery and validation
- The project running with `npm run dev`, the home page complete and responsive (mobile-first).
- The DESIGN.md filled in at the root. The ./images/ folder organized.
- At the end: run the animation audit of the installed review skill (easing, duration, spring physics, choreography, scroll behavior) + the Taste Skill anti-slop checklist, and hand me the result with the list of what you fixed.
- Invent no content. If any text on the current site turns out inaccessible, ask me first.

1. "Review every animation on the home page using the animation review skill:
   audit easing, duration, spring physics, entrance choreography and
   scroll behavior. List the problems by severity and fix them."

2. "Apply the Taste Skill anti-slop checklist to the whole home page and fix
   whatever looks generic or template-like."

3. "Run a final pass on micro-interactions: button, card, menu item
   and link hovers, all of them with springs, no linear CSS transition."

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 the UI/UX Pro Max skill to generate the complete design system of an institutional redesign.

Product context:
- Site: Instituto +Brasal (https://www.brasal.com.br/instituto/), a private social investment institute of the Brasal group, working in the DF on education, strengthening CSOs and corporate volunteering.
- Audience: CSOs, public schools, corporate partners, volunteer employees and civil society in the DF.
- The personality wanted: human, serious and trustworthy, with energy and modernity. Real social impact, with no dated NGO aesthetic and no AI-template look.
- Brand constraint: the palette has to start from the real colors of the Instituto +Brasal logo (download and analyze it: https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png). You define the complements, neutrals and accents.
- The site will be motion-first: plenty of movement on scroll, in texts and images. The system has to allow for that (a display typeface that survives split/reveal, images with room to zoom, contrast that survives overlays).

Deliver in a DESIGN.md file at the root of this folder:
1. The style chosen (and why that one rather than the 2 discarded finalists)
2. The complete palette with tokens (hex + the use of each color)
3. Font pairing (display + text) with a typographic scale
4. Spacing, grid and radii
5. Motion tokens: durations, easings, stagger distances, rules for when to animate and when to skip it
6. Rules for what NOT to do on this project (anti-patterns, anti-"AI look")

Write no component code yet. The system alone.

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

## Context
We are redesigning the site https://www.brasal.com.br/instituto/ in Next.js. In this phase, the HOME PAGE ONLY.
The CONTENT is immutable: the same texts, the same menu, the same sections as the current site. What changes is 100% the design.
The key point of the new design is MOTION: scroll-driven movement, text effects and image effects at production level.

## Technical stack
- Next.js 15 (App Router) + TypeScript + Tailwind CSS
- Animation engine: Motion (motion.dev) + React Bits components (https://reactbits.dev). Rules: (1) prefer React Bits components based on Motion; (2) if the ideal component depends on GSAP, look for an equivalent alternative or implement it from scratch with Motion; (3) in your own code, use ONLY Motion, and two engines in the same component in no case.
- React Bits components enter through npx shadcn add @react-bits/[Component]. Candidates per section: CountUp (the impact numbers), text animation components for the titles (Motion variants), LogoWall/marquee (partners), and background/image effects where the DESIGN.md allows. Every component added has to be customized to the DESIGN.md tokens (colors, fonts, durations); nothing enters with its default appearance.
- Before coding: read the DESIGN.md already generated at the root (through UI/UX Pro Max) and follow it to the letter. If any requirement below conflicts with the DESIGN.md, ask me before deciding. Use the motion principles skill in Create mode to plan the choreography section by section before implementing.

## Step 0 — Inventory and assets (mandatory before any code)
1. Go to https://www.brasal.com.br/instituto/ and extract the REAL content of the home page (verbatim texts, section order, menu items with URLs).
2. Download the current site's assets into the ./images/ folder: the logo (https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), the institutional image, the images of the 3 eixos, the SDG image (4-ods.jpg), the covers of the 5 reports, and ALL the logos of supported institutions and partners (brand-*.png and Logo-*.jpg). Generate a favicon from the logo.
3. If you need new images (hero, textures), use real photography from a free bank (Unsplash/Pexels) coherent with social impact in the DF. No AI-generated image with an AI look.

## Home page structure (a fixed order, content identical to the current site)
1. Header: logo + the complete menu (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 pointing at the current URLs.
2. Hero / the Edital 2026 — Programa Vamos Juntos banner, with the current text ("O Instituto +Brasal lança o Edital do Programa Vamos Juntos...") and the CTA "Confira o Edital 2026 / Clique aqui".
3. The "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" section with the current institutional paragraph + the CTAs "Mais sobre o Instituto" and "Conheça o Programa".
4. VIDEO section: embed https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (lazy load, a facade with a thumbnail + play, with no LCP cost).
5. EIXOS DE ATUAÇÃO: 3 cards with the current texts (+EDUCAÇÃO / +Fortalecimento institucional de OSC's / Voluntariado Empresarial) and "Saiba+" links.
6. Impact numbers ("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. ATTENTION: the current home page carries two counter blocks with divergent values (65.100/269.100 vs 181.100/434.100); use the values visible in the current desktop version and flag the divergence to me at the end.
7. TRANSPARÊNCIA: the 5 activity reports with links to the current PDFs.
8. THE UN SDGs: the current text + the 4 SDGs with their descriptions.
9. INSTITUIÇÕES APOIADAS and PARCEIROS QUE SOMAM: grids/marquee with the downloaded logos.
10. MAP: before the footer, a Google Maps embed of the address "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: the current content (Institucional Brasal, phone (61)3462-8077, the full address, institutomaisbrasal@brasal.com.br, hours Seg–Sex 08:00–18:00, social networks, the menu repeated, copyright).

## Motion requirements (the heart of the project)
- Scroll: a hero with parallax, sections with a choreographed reveal on entering the viewport, transitions between sections with no hard cuts.
- Text: titles with a split reveal (words/lines with stagger and a mask), paragraphs with a subtle fade+rise.
- Images: a slow zoom (scale 1.0→1.08) tied to the scroll, clip-path reveals, layered parallax.
- Counters: a CountUp fired on entering the viewport.
- Partner logos: an infinite marquee pausable on hover, or a grid with stagger.
- Micro-interactions: hover states with real physics on buttons, cards and menu items.
- Coherence: the whole choreography has to follow the 12 principles of the motion design skill and the motion tokens of the DESIGN.md. Movement with purpose, no effect for the sake of an effect.
- MANDATORY: respect prefers-reduced-motion (a dignified static version), animate transform/opacity alone, no layout thrashing, 60fps on mobile.

## Anti-"AI look" (critical)
- Forbidden: the generic purple/blue gradient, gratuitous glassmorphism, emojis in the UI, Inter as the display font, identical cards in a 3x3 grid with identical shadows, a centered hero with a pill badge.
- The specific risk of this stack: a library component with its default appearance delivers a template look on the spot. EVERY React Bits component has to come out unrecognizable against the demo on their site: colors, fonts, timing and behavior adapted to the DESIGN.md.

## Delivery and validation
- The project running with `npm run dev`, the home page complete and responsive (mobile-first).
- The ./images/ folder organized. The DESIGN.md updated if anything evolved during the build.
- List at the end which React Bits components you used, in which section, and what you customized in each one.
- Invent no content. If any text on the current site turns out inaccessible, ask me first.

1. "Run the audit of the motion principles skill (Audit mode) on the whole
   home page, with the 3 lenses. Generate the report, list the problems by
   severity and fix every high and medium one."

2. "Anti-template pass: compare each React Bits component used against the
   original demo on reactbits.dev. Where it still reads as
   default, customize it deeper (timing, colors, behavior)."

3. "Check choreography coherence: every section should look like it belongs to the
   same family of movement (the same easings and rhythms from the DESIGN.md).
   Fix any section that clashes."

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

# A mandatory pre-step: generate the DESIGN.md from the reference
npx dembrandt {URL_REFERENCIA} --design-md
# move the generated DESIGN.md to the root of the stack folder

# Optional: 11 MCP tools for querying tokens during the build
claude mcp add dembrandt

# REDESIGN WITH A REFERENCE — INSTITUTO +BRASAL (HOME) — STACK D: REVERSE ENGINEERING OF TOKENS

## Design reference
- URL of the reference site: {URL_REFERENCIA}
- Screenshots of the reference: ./referencia/images/ (analyze ALL of them before coding)
- Navigation videos of the reference: ./referencia/videos/ (study the scroll behavior: what anchors, what slides, speeds, easings, how the text enters, how the images react)

## How to use the reference (the golden rule)
The reference defines the DESIGN AND MOTION LANGUAGE: density, scroll rhythm, typography as a graphic element, image treatment, choreography.
It defines neither content nor identity: the site belongs to Instituto +Brasal, with the brand colors (extract them from the logo) and all the content of the current site. The result should look like it came "from the same school of design" as the reference, and like a clone in no case.
SPECIFIC TO THIS STACK: the DESIGN.md at the root was generated by Dembrandt from the reference. Before coding: (1) adapt the palette to the Instituto +Brasal brand colors while keeping the reference's contrast logic; (2) evolve the DESIGN.md motion tokens with what you observe in the videos (durations, easings, scrub/parallax distances, stagger rules).

## Context and content
A redesign of https://www.brasal.com.br/instituto/ in Next.js 15 (App Router) + TypeScript + Tailwind. The HOME PAGE ONLY in this phase.
Content 100% identical to the current site: the same texts, menu and sections. The design alone changes.
Animation engine: GSAP + ScrollTrigger + SplitText. Use ONE engine alone, no Motion/Framer Motion. Follow the patterns of the installed skills (useGSAP, trigger cleanup, matchMedia).

## Step 0 — Inventory and assets
1. Extract the real content of the current home page (verbatim texts, the complete menu with URLs, section order).
2. Download the current assets into ./images/: the logo (wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), the eixos images, the SDGs (4-ods.jpg), the covers of the 5 reports, every partner and institution logo (brand-*.png, Logo-*.jpg). Generate the favicon from the logo.
3. New images from real photography alone (Unsplash/Pexels), treated to match the reference's language (duotone, grain, crop, whatever the reference uses).

## Home page structure (a fixed order)
1. Header with the current complete menu (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [the 7 Brasal companies] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato), links to the current URLs.
2. The Edital 2026 — Programa Vamos Juntos hero (the current text and CTA).
3. "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" (the current paragraph + 2 CTAs).
4. Video: https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (a lazy facade with a thumbnail + play).
5. EIXOS DE ATUAÇÃO (3 cards, the current texts, "Saiba+").
6. Impact numbers: Doamos +181.100 itens · Beneficiamos 434.100 pessoas · +480 projetos · regions across DF/GO/MG, with a count-up. (The current home page carries two divergent number blocks; use the desktop version's and report the divergence to me.)
7. TRANSPARÊNCIA (5 reports, links to the current PDFs).
8. THE UN SDGs (the current text and the 4 SDGs).
9. INSTITUIÇÕES APOIADAS + PARCEIROS QUE SOMAM (the downloaded logos).
10. The MAP before the footer: a Google Maps iframe (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 with all the current content (contacts, address, hours, socials, menu, copyright).

## Motion (the key point)
Replicate the movement GRAMMAR observed in the reference videos: map each pattern (pin, scrub, parallax, text split, image zoom, transitions) and implement the equivalent with GSAP/ScrollTrigger. Minimum requirements: choreographed scroll across the 11 sections, text reveals through SplitText with stagger, zoom/clip-path on the images, a count-up on the numbers, a marquee on the logos, micro-interactions. prefers-reduced-motion through gsap.matchMedia is mandatory, transform/opacity alone, cleanup of every ScrollTrigger, 60fps mobile.

## Anti-"AI look"
No generic gradients, no emojis, no gratuitous glassmorphism and no predictable template. The reference exists precisely to give a direction with a signature. Document the decisions and the rules for what to avoid in the DESIGN.md.

## Delivery and validation
- `npm run dev` working, the home page complete and responsive.
- The DESIGN.md adapted at the root + ./images/ organized.
- At the end: (1) a list of every ScrollTrigger created (section → effect), (2) a table comparing the reference pattern → how you implemented it → where you diverged on purpose and why.
- Invent no content. A doubt about a text means asking me.

1. /impeccable critique
   (apply the corrections)

2. "Compare the home page side by side with the reference videos and screenshots:
   is the motion grammar equivalent (rhythm, easings, choreography)?
   List where the home page came out weaker than the reference and fix it."

3. /impeccable polish

4. "GSAP performance pass: ScrollTrigger cleanup, gsap.matchMedia
   for mobile and reduced-motion, will-change where needed alone, 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 WITH A REFERENCE — INSTITUTO +BRASAL (HOME) — STACK E: VISUAL REPLICATION

## Design reference
- URL of the reference site: {URL_REFERENCIA}
- Screenshots of the reference: ./referencia/images/ (analyze ALL of them before coding)
- Navigation videos of the reference: ./referencia/videos/ (study the scroll behavior: what anchors, what slides, speeds, easings, how the text enters, how the images react)

## How to use the reference (the golden rule)
The reference defines the DESIGN AND MOTION LANGUAGE: density, scroll rhythm, typography as a graphic element, image treatment, choreography.
It defines neither content nor identity: the site belongs to Instituto +Brasal, with the brand colors (extract them from the logo) and all the content of the current site. The result should look like it came "from the same school of design" as the reference, and like a clone in no case.
SPECIFIC TO THIS STACK: use the Taste Skill's image-to-code on the reference screenshots to derive the STRUCTURAL components (hero, sections, cards, layout rhythm) and then replace the content and identity with the Instituto's (brand colors, a typography of its own coherent with the reference, the original texts of the current site). Taste dials: DESIGN_VARIANCE high, MOTION high, DENSITY according to the reference.

## Context and content
A redesign of https://www.brasal.com.br/instituto/ in Next.js 15 (App Router) + TypeScript + Tailwind. The HOME PAGE ONLY in this phase.
Content 100% identical to the current site: the same texts, menu and sections. The design alone changes.
Animation engine: Motion (motion.dev). Use ONE engine alone, no GSAP. The patterns of the installed skills: useScroll + useTransform, springs, whileInView, FLIP.
Generate the DESIGN.md at the root documenting the system derived from the reference (a palette adapted to the brand, typography, spacing, motion tokens with spring configs, rules for what NOT to do).

## Step 0 — Inventory and assets
1. Extract the real content of the current home page (verbatim texts, the complete menu with URLs, section order).
2. Download the current assets into ./images/: the logo (wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), the eixos images, the SDGs (4-ods.jpg), the covers of the 5 reports, every partner and institution logo (brand-*.png, Logo-*.jpg). Generate the favicon from the logo.
3. New images from real photography alone (Unsplash/Pexels), treated to match the reference's language (duotone, grain, crop, whatever the reference uses).

## Home page structure (a fixed order)
1. Header with the current complete menu (Início · O Instituto [Quem Somos, História, Estrutura Organizacional] · Mantenedores [the 7 Brasal companies] · Transparência · Eixos de Atuação · Voluntariado Empresarial · Notícias · Contato), links to the current URLs.
2. The Edital 2026 — Programa Vamos Juntos hero (the current text and CTA).
3. "PRAZER, NÓS SOMOS O INSTITUTO +BRASAL" (the current paragraph + 2 CTAs).
4. Video: https://www.youtube.com/embed/vaxxETydDKQ?si=2hoc1F6Fcgi7c5Np (a lazy facade with a thumbnail + play).
5. EIXOS DE ATUAÇÃO (3 cards, the current texts, "Saiba+").
6. Impact numbers: Doamos +181.100 itens · Beneficiamos 434.100 pessoas · +480 projetos · regions across DF/GO/MG, with a count-up. (The current home page carries two divergent number blocks; use the desktop version's and report the divergence to me.)
7. TRANSPARÊNCIA (5 reports, links to the current PDFs).
8. THE UN SDGs (the current text and the 4 SDGs).
9. INSTITUIÇÕES APOIADAS + PARCEIROS QUE SOMAM (the downloaded logos).
10. The MAP before the footer: a Google Maps iframe (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 with all the current content (contacts, address, hours, socials, menu, copyright).

## Motion (the key point)
Replicate the movement GRAMMAR observed in the reference videos: map each pattern (pin, scrub, parallax, text split, image zoom, transitions) and implement the equivalent with Motion. Minimum requirements: choreographed scroll across the 11 sections (useScroll + useTransform), text reveals through a split with stagger, zoom/clip-path on the images, a count-up with a spring, a marquee on the logos, micro-interactions with spring physics. prefers-reduced-motion is mandatory, transform/opacity alone, 60fps mobile.

## Anti-"AI look" and anti-clone
No generic gradients, no emojis, no gratuitous glassmorphism and no predictable template. And the inverse too: the result cannot read as a copy of the reference. If a component comes out visually identical to the original, differentiate it (typography, proportions, image treatment) while keeping the same school of design. Document it in the DESIGN.md.

## Delivery and validation
- `npm run dev` working, the home page complete and responsive.
- The DESIGN.md at the root + ./images/ organized.
- At the end: (1) the animation audit of the review skill (easing, duration, physics, choreography against the reference videos), (2) a table comparing the reference pattern → how you implemented it → where you diverged on purpose and why.
- Invent no content. A doubt about a text means asking me.

1. "Review every animation against the reference videos:
   are easing, duration, spring physics and choreography up to the mark?
   List the problems by severity and fix them."

2. "Anti-clone check: list every element that came out
   visually identical to the reference and differentiate each one while keeping the
   same school of design (the Brasal identity)."

3. "Apply the Taste Skill anti-slop checklist to the whole home page and
   fix whatever looks generic."

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 enters at build time through npx shadcn add @react-bits/[Component]

Use the UI/UX Pro Max skill to generate the design system of an institutional redesign INSPIRED by a reference.

Step 1 — Study the reference:
- URL: {URL_REFERENCIA}
- Screenshots: ./referencia/images/ (all of them)
- Navigation videos: ./referencia/videos/
Extract PRINCIPLES rather than pixels: the logic of density and spacing, the role of typography, image treatment, the functional palette (how the colors get used rather than which ones they are), the rhythm and grammar of the motion on scroll.

Step 2 — Product context:
- Site: Instituto +Brasal (https://www.brasal.com.br/instituto/), a private social investment institute of the Brasal group (education, strengthening CSOs, corporate volunteering in the DF).
- Personality: human, serious and trustworthy, with energy and modernity. No dated NGO aesthetic, no AI-template look.
- Brand constraint: the palette starts from the real colors of the logo (download and analyze it: https://www.brasal.com.br/instituto/wp-content/uploads/2025/05/cropped-cropped-Logo-Instituto-Brasal_Colorida.png), applied with the reference's LOGIC of color use.
- The site will be motion-first, with the reference's grammar of movement.

Deliver in the DESIGN.md at the root:
1. The principles extracted from the reference (an explicit list: what came from there and why)
2. The style chosen and the discarded finalists
3. The palette with tokens (hex + use), typography with a scale, spacing/grid/radii
4. Motion tokens: durations, easings, stagger, rules for when to animate
5. Rules for what NOT to do (anti-patterns, anti-"AI look", anti-cloning the reference)

Write no component code yet. The system alone.

1. "Run the audit of the motion principles skill (Audit mode) on the home page,
   with the 3 lenses. Fix the high and medium severity problems."

2. "Anti-template pass: compare each React Bits component against the original
   demo on reactbits.dev and customize whatever still reads as recognizable."

3. "Reference traceability: for each principle listed in the DESIGN.md
   as coming from the reference, point out where it appears on the home page. A principle with no
   application means implementing it or removing it from the DESIGN.md."