Institutional Site Builder

Skill especializada em criar sites institucionais de alta qualidade a partir de materiais

de referência do cliente. O workflow é projetado para extrair o máximo dos materiais fornecidos

(logos, identidade visual, apresentações, PDFs) e transformá-los em um site React profissional

com animações, responsividade e performance otimizada.

Stack Tecnológico

O projeto SEMPRE usa:

• Vite (v6+) como bundler
• React 19 + TypeScript
• Tailwind CSS 4 via @tailwindcss/vite
• Framer Motion para animações
• Lucide React para ícones

Dependências opcionais (instalar conforme necessidade):

• three + @types/three — backgrounds 3D animados (DottedSurface, shader backgrounds)
• react-use-measure — para o InfiniteSlider (logo cloud, marquee)

Workflow em 6 Fases

Fase 1: Exploração e Inventário de Materiais

Antes de escrever qualquer código, explore TUDO que o usuário forneceu. Esta fase é crítica

porque os materiais definem o tom, as cores, o conteúdo e as imagens do site.

Organize os materiais em categorias mentais:

Checklist de exploração:

1. ls -la recursivo em toda a pasta do usuário
2. Ler TODAS as imagens com o Read tool (logos, identidade visual, slides-chave)
3. Ler PDFs/PPTs para extrair conteúdo textual
4. Identificar paleta de cores exata (hex codes)
5. Mapear quais imagens servem para quais seções
6. Anotar dados de contato, nomes de produtos, taglines

Fase 2: Planejamento do Site

Após inventariar, pergunte ao usuário usando AskUserQuestion:

1. Idioma — PT-BR, EN, ou bilíngue?
2. Seções — Completo (Hero, Problema, Solução, Features, Benefícios, Clientes, CTA, Contato, Footer) ou simplificado?
3. Estilo visual — Dark premium, Light/clean, ou Híbrido?
4. Contato — Formulário + WhatsApp, apenas links, ou formulário completo?

A maioria dos sites institucionais B2B segue esta ordem de seções (ajustar conforme necessidade):

1. Navbar (fixa, com blur no scroll)
2. Hero (proposta de valor + CTA)
3. Contexto/Problema (por que o produto existe)
4. Solução (o que o produto faz)
5. Pipeline/Processo (como funciona, passo a passo)
6. Funcionalidades (feature cards com imagens)
7. Detalhes técnicos (IoT, integrações, etc.)
8. Benefícios (cards por categoria)
9. Canais de Entrega (integrações multicanal)
10. Clientes (logo cloud com social proof) ← antes do CTA
11. CTA Final (frase de impacto + botão)
12. Contato (formulário + dados)
13. Footer (links, logo, copyright)
14. WhatsApp Flutuante

Fase 3: Setup do Projeto

npm create vite@latest <nome-site> -- --template react-ts
cd <nome-site>
npm install
npm install -D tailwindcss @tailwindcss/vite --legacy-peer-deps
npm install framer-motion lucide-react

Configurar vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Adicionar conforme libs pesadas são usadas
          'framer-motion': ['framer-motion'],
        },
      },
    },
  },
})

Configurar src/index.css com a paleta do cliente:

@import "tailwindcss";

@theme {
  /* Cores extraídas da identidade visual do cliente */
  --color-primary-900: #XXXXXX;
  --color-primary-800: #XXXXXX;
  /* ... mapear toda a paleta ... */
  --color-accent: #XXXXXX;
  --font-sans: 'Inter', system-ui, sans-serif;
}

Configurar index.html:

• lang correto (pt-BR ou en)
• Meta description com o produto
• Google Fonts com defer (NÃO render-blocking):

```html

```

Copiar assets:

• Criar public/images/ e copiar todas as imagens do produto
• Criar public/images/clientes/ se houver logos de clientes
• Copiar logos (preferir variante horizontal para navbar)

Fase 4: Construção do Site

Construir o site inteiro em um único App.tsx (para sites de até ~800 linhas).

Para sites maiores, criar componentes em src/components/.

Padrões obrigatórios em TODAS as imagens:

<img src="..." alt="Descrição" width={N} height={N} loading="lazy" />

Componentes utilitários a incluir:

• useInView() — Intersection Observer para animações de entrada
• Section — wrapper que anima opacity+translateY no scroll
• TextCycle — texto que alterna entre palavras com animação slideUp

Para cada seção, consultar references/components.md que contém templates

prontos adaptados para o stack (sem dependências de shadcn, Next.js, ou cn()).

Fase 5: Otimização de Performance (OBRIGATÓRIA)

Esta fase é executada ANTES de entregar o site ao usuário.

5.1 Imagens — Converter para WebP:

from PIL import Image
import glob, os
for f in glob.glob("public/images/*.png") + glob.glob("public/images/*.jpg"):
    if os.path.getsize(f) > 100_000:
        img = Image.open(f)
        if img.width > 1200:
            ratio = 1200 / img.width
            img = img.resize((1200, int(img.height * ratio)), Image.LANCZOS)
        img.save(f.rsplit('.', 1)[0] + '.webp', 'WEBP', quality=80)

Atualizar todas as referências no código para .webp.

5.2 Fontes — Eliminar render-blocking:

Usar o pattern media="print" onload="this.media='all'" no index.html.

5.3 JavaScript — Code splitting:

• Libs pesadas (Three.js) em lazy import + Suspense
• manualChunks no vite.config.ts
• O bundle JS principal deve ficar abaixo de 300KB

5.4 Acessibilidade mínima:

• role="main" no container principal
• alt em todas as imagens
• width e height explícitos em todas as
• Headings em ordem sequencial (h1 → h2 → h3)
• Contraste suficiente entre texto e fundo

5.5 SEO básico: