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:

CategoriaO que procurarComo usarIdentidade VisualPaleta de cores (hex), tipografia, guidelinesDefine @theme no CSS, cores de accent, gradientesLogosVariantes claro/escuro, horizontal/vertical, SVG/PNGNavbar (horizontal, claro), Footer (horizontal, claro), Favicon (ícone escuro)Imagens de ProdutoScreenshots, mockups, fotos operacionaisFeature cards, hero background, timeline, scroll mediaApresentaçõesPPTs, PDFs com slidesEXTRAIR textos, headlines, bullet points, estrutura de seçõesComponentes UIArquivos .txt com código React de referênciaAdaptar para o projeto (remover deps de shadcn, Next.js)Dados de ContatoE-mails, telefones, redes sociais, endereçosFooter, seção contato, WhatsApp flutuanteLogos de ClientesLogos de empresas parceiras/clientesSeção de social proof com InfiniteSlider

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):

text

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#

bash

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:

typescript

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:

css

@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

  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />
  <link href="..." rel="stylesheet" media="print" onload="this.media='all'" />
  
  

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:

tsx

<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:

python

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 <img>
• Headings em ordem sequencial (h1 → h2 → h3)
• Contraste suficiente entre texto e fundo

5.5 SEO básico:

• <title> descritivo
• <meta name="description"> com o produto
• lang correto no <html>

Fase 6: Entrega#

1. Fazer npm run build e verificar que compila sem erros
2. Copiar o projeto completo para a pasta do usuário
3. Apresentar link computer:///path/to/project
4. Instruir: cd nome-site && npm install && npm run dev

Referências#

• references/components.md — Catálogo completo dos 23 componentes com tabela por categoria, cheat sheet de adaptação Next.js→Vite, e templates inline prontos
• references/components/ — Os 23 arquivos .txt originais com código TSX completo, demo e dependências de cada componente
• references/patterns.md — Padrões de CSS, animações, glass morphism, gradients, otimização de imagens

Componentes Disponíveis (31 — 23 originais + 8 do 21st.dev)#

Heroes: Glassmorphism Trust Hero, 3D Hero (Spline), Scroll Expand Media Backgrounds: Animated Shader (GLSL Aurora), Flow Field (Canvas 2D), Dotted Surface (Three.js) Navigation: Tubelight Navbar, Limelight Nav (dark mode) Cards: Glowing Effect Border, Bauhaus Card, Bento Grid Content: Timeline (scroll-based), Vertical Tabs, DB/API Diagram, Global Map, Logo Cloud (InfiniteSlider) Animations: Text Cycle, Loading Skeleton, Container Scroll 3D, Notification Alert Utility: Page 404, Footer, Password Confirmation

21st.dev Extras: Starfall Portfolio Landing, Parallax Feature Section, Metaball Hero, Rotating Prompts, Collapsible Header, Image Card, Spotlight, Accordion

Para usar qualquer componente, leia references/components.md para o catálogo e depois leia o .txt correspondente em references/components/ (originais) ou references/components/21st-dev/ (extras).

Para buscar mais componentes do 21st.dev, use a API: POST /api/prompts com {"prompt_type":"extended","demo_id":<ID>}. Ver instruções completas em references/components.md.

Organização de Pasta Esperada do Usuário#

Quando o usuário fornecer materiais, a skill espera (ou sugere) esta organização:

text

materiais-projeto/
├── logos/              ← Variantes do logo (claro, escuro, horizontal, vertical)
├── identidade-visual/  ← Paleta de cores, guidelines, tipografia
├── imagens/            ← Fotos, screenshots, mockups do produto
├── apresentacoes/      ← PPTs, PDFs com conteúdo do produto
├── clientes/           ← Logos de empresas clientes/parceiras
├── components/         ← Componentes UI de referência (.txt com código React)
└── copy/               ← Textos, taglines, descrições (se houver separado)

Se os materiais estiverem desorganizados, a skill navega e cataloga tudo mesmo assim. Mas se o usuário perguntar "como organizar?", sugira esta estrutura.