Builder Site institucional

Cria sites institucionais profissionais em React (Vite + TypeScript + Tailwind CSS 4) a partir de materiais de referência do cliente (logos, imagens, apresen...

Security Scan

The skill's files and instructions mostly match a React site-builder, but the runtime instructions ask the agent to broadly inspect user folders and reference external data-extraction techniques (e.g., intercepting fetch), which is scope-creep and worth caution.

Purpose & Capability

The name/description (institutional React site builder) aligns with the included component templates, patterns, and npm setup steps. The references contain many ready-made React/Tailwind components which are coherent with the stated purpose.

Instruction Scope

SKILL.md explicitly instructs the agent to run broad file-discovery and content-extraction steps (e.g., "ls -la recursivo em toda a pasta do usuário", "Ler TODAS as imagens", "Ler PDFs/PPTs para extrair conteúdo textual"). Reading provided project materials is reasonable, but the instruction as written is overbroad (could target entire user home) and may expose unrelated sensitive files. Additionally, references/components.md suggests using an API and even capturing demo_id by intercepting browser fetch — guidance that encourages network interception and unnecessary external calls. These are scope-creep compared with a minimal site-builder.

Install Mechanism

This is an instruction-only skill with no install spec and no bundled binaries — low install risk. The SKILL.md shows commands the agent might recommend/execute (npm create vite, npm install), which are appropriate for the described output and are not executed by the skill itself.

Credentials

The skill declares no required environment variables, no credentials, and no config paths. That matches its purpose and is proportionate.

Persistence & Privilege

always is false and the skill does not request persistent elevated privileges. It does instruct the agent to perform file reads and create project files when building a site (expected behavior), but there is no indication it will modify other skills or system-wide settings.

What to consider before installing

This skill appears to be a full-featured template library + instructions for building Vite/React/TS/Tailwind sites and is generally coherent — but there are a few things to watch for before installing or invoking it: - Scope your inputs: the SKILL.md asks the agent to list and read the user's entire folder recursively. Only give the skill a specific folder (the materials you want used) rather than granting it access to broad directories or your whole home directory. - Review extracted content: the skill will read images, PDFs and PPTs to extract text and assets. Verify there are no sensitive or private files in the supplied materials. - External calls and network interception: some reference files mention calling external APIs (e.g., 21st.dev) and even techniques like intercepting browser fetch to capture IDs. These are not necessary for basic site-building and increase privacy risk — confirm whether the agent will call external services and disable/approve them explicitly. - Check remote asset URLs: many component templates reference external image/icon URLs (raw GitHub, CDNs). If you need offline or private assets, host them locally instead of allowing the agent to fetch remote resources. - Ask for clarification: if you expect the skill to operate only on a provided project folder, require that from the agent explicitly. If the agent will run npm install or write files, make sure you understand where files will be written and that you approve those locations. If you want to proceed, provide a confined materials folder (only logos/images/PPTs meant for the site) and explicitly deny access to unrelated directories or secrets. If you are uncomfortable with broad file reads or external API calls, treat this skill as potentially unsafe until its runtime behavior is restricted.

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:

Categoria	O que procurar	Como usar
Identidade Visual	Paleta de cores (hex), tipografia, guidelines	Define @theme no CSS, cores de accent, gradientes
Logos	Variantes claro/escuro, horizontal/vertical, SVG/PNG	Navbar (horizontal, claro), Footer (horizontal, claro), Favicon (ícone escuro)
Imagens de Produto	Screenshots, mockups, fotos operacionais	Feature cards, hero background, timeline, scroll media
Apresentações	PPTs, PDFs com slides	EXTRAIR textos, headlines, bullet points, estrutura de seções
Componentes UI	Arquivos .txt com código React de referência	Adaptar para o projeto (remover deps de shadcn, Next.js)
Dados de Contato	E-mails, telefones, redes sociais, endereços	Footer, seção contato, WhatsApp flutuante
Logos de Clientes	Logos de empresas parceiras/clientes	Seçã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):

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

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

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

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.