wizz-method 1.3.2 → 1.4.1

package/src/skills-lib/premium-landing-ui-researcher/SKILL.md

@@ -5,2086 +5,55 @@ description: Pesquisar animações, componentes, referências visuais e padrões
 
 # Premium Landing UI Researcher
 
-<EXTREMELY-IMPORTANT>
-
-## Source-First Mandate (read this FIRST, every time)
-
-**Esta skill existe porque escrever shaders, animações, hovers e componentes do zero NÃO é o caminho.** O caminho é **curar componentes, animações e shaders maduros de bibliotecas profissionais** (21st.dev, v0, React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI, modelos lp do usuário) e **adaptar à marca**.
-
-Se você se pegar pensando "vou escrever um shader perlin do zero" ou "vou criar uma esfera de partículas no R3F na mão" ou "vou desenhar um SVG de carousel" — **PARE**. Isso é o anti-pattern que essa skill foi feita pra prevenir.
-
-### Anti-pattern (NUNCA fazer)
-
-- ❌ Escrever um shader GLSL custom sem antes ter inspecionado Ali Imam, paper.design refs, 21st.dev e o conteúdo do usuário em `/modelos lp/`
-- ❌ Reinventar text reveal / magnetic / scroll-driven animation sem antes ter inspecionado React Bits e os modelos do usuário
-- ❌ Criar hero 3D na mão sem antes ter buscado em 21st.dev via Magic MCP e gerado variações em v0
-- ❌ Criar carousel/slider sem antes ter verificado se Embla, shadcn/ui ou 21st.dev têm componente pronto compatível com o stack
-- ❌ Desenhar mockup SVG de produto inteiro sem antes ter pedido autorização pro usuário capturar screenshot real ou usar agent-browser no projeto live
-- ❌ "Fazer tudo na mão pra ir mais rápido" — isso quebra o propósito da skill
-
-### Required pattern (SEMPRE fazer)
-
-Antes de escrever qualquer linha de código de UI, executar o **Source-First Protocol** (definido abaixo). A regra absoluta é:
-
-> **Inspecione fontes reais → ofereça opções ao usuário → adapte à marca. Nunca recrie o que já existe maduro.**
-
-Se você não consegue ou não está autorizado a invocar uma fonte (MCP offline, sem permissão pra clone, sem rede), **declare isso explicitamente ao usuário** antes de cair pro fallback de criar do zero. O usuário deve poder dizer "ok, então vamos clonar Ali Imam agora" ou "tudo bem, faça na mão dessa vez". Nunca cair pro fallback silenciosamente.
-
-</EXTREMELY-IMPORTANT>
-
-## Core Goal
-
-Esta skill atua como um estrategista autônomo de landing pages premium, interfaces SaaS e experiências visuais avançadas.
-
-Ela deve conseguir analisar um projeto e entregar uma landing page, dashboard ou experiência digital de alto nível sem o usuário precisar enviar referências manuais toda vez.
-
-A skill deve:
-
-- analisar o negócio, produto, serviço ou oferta;
-- entender público-alvo, objetivo e nível de sofisticação necessário;
-- fazer poucas perguntas quando faltar contexto;
-- escolher o nível visual correto do projeto;
-- pesquisar componentes, animações e referências nas fontes configuradas;
-- usar 21st.dev diretamente via MCP/API quando disponível;
-- usar o catálogo público do v0.app (WebFetch) para descoberta de templates de referência;
-- usar repositórios autorizados como fonte de pesquisa;
-- clonar temporariamente repositórios autorizados apenas quando necessário e com permissão;
-- escolher scroll effects, 3D hero, WebGL, shaders, microinterações e componentes com base no tom da marca;
-- escrever copy completa, estratégica e orientada à conversão;
-- criar estrutura completa de landing page;
-- sugerir dashboard SaaS quando fizer sentido;
-- entregar plano de implementação;
-- aplicar princípios de gosto visual, motion, hierarquia, UX e conversão;
-- evitar resultados genéricos, artificiais ou com aparência de template barato.
-
-Use esta skill como um especialista sênior em design, front-end, copywriting, posicionamento e conversão.
-
-> Importante: nunca colocar chaves reais dentro da skill. Usar somente variáveis de ambiente para qualquer credencial.
-
-### Regra de autonomia
-
-A skill não depende do usuário para enviar referências toda vez.
-
-Se nenhuma referência for fornecida, a skill infere uma direção visual de alta qualidade usando: tipo de negócio, público-alvo, oferta, objetivo da página, tom de marca, ticket percebido, nível de complexidade, objetivo de conversão, necessidade ou não de 3D, necessidade ou não de dashboard SaaS, stack disponível e fontes internas configuradas na skill.
-
-A skill só deve pedir referências quando:
-
-- o gosto visual for altamente subjetivo;
-- o usuário pedir um estilo muito específico;
-- houver necessidade de copiar uma estética de marca existente;
-- o projeto exigir fidelidade visual a concorrentes ou benchmarks.
-
-## Project Intelligence Mode
-
-Antes de pesquisar componentes, animações, referências visuais ou gerar qualquer landing page, analisar o contexto do projeto.
-
-Se o usuário já forneceu informações suficientes (negócio, público, objetivo, nível visual, referências), seguir direto.
-
-Se faltarem dados importantes, fazer **no máximo 5 perguntas estratégicas**:
-
-1. Qual é o negócio, produto, serviço ou oferta?
-2. Quem é o público-alvo?
-3. Qual é o objetivo principal da página? (vender, captar lead, agendar reunião, WhatsApp, apresentar serviço, etc.)
-4. Qual nível visual o projeto deve ter: básico, intermediário, avançado ou 3D high-end?
-5. Existe alguma referência visual, concorrente, print, vídeo ou direção de marca?
-
-Se o usuário não responder tudo, continuar com hipóteses estratégicas coerentes. Não bloquear o trabalho por dados ausentes.
-
-Regra mestra: **perguntar, inferir, executar.** Não fazer perguntas demais. Não pedir reconfirmação de coisas já ditas. Não devolver brief para o usuário preencher.
-
-Quando o usuário pedir algo como "crie meu site", "melhore minha landing", "faça algo premium", "quero algo 3D", "quero algo outro nível", usar este modo automaticamente.
-
-## Motion & Interaction Complexity Ladder
-
-Sempre classificar o projeto em um destes níveis **antes** de recomendar componentes, animações, background, hover, scroll ou 3D. Cada nível tem seu próprio padrão de motion, interação e acabamento — e seu próprio **motion budget**.
-
-Os cinco níveis oficiais são:
-
-1. Basic Site
-2. Intermediate Site
-3. Advanced Site
-4. 3D High-End Site
-5. 3D High-End Site — modo Signature 3D Experience
-
-Os dois erros que essa escada existe para evitar:
-
-- **Basic Site sem vida**, parecendo página estática barata.
-- **Signature 3D Experience poluído**, com efeitos demais sem direção.
-
-A regra geral: toda landing precisa parecer viva, mas cada nível tem sua medida certa. Mais animação não significa melhor site — o melhor site usa motion como linguagem, não como decoração.
-
----
-
-### 1. Basic Site — Clean Motion
-
-Usar para:
-
-- landing simples;
-- serviço local;
-- página institucional;
-- validação rápida;
-- orçamento menor;
-- oferta simples;
-- projeto onde clareza importa mais que espetáculo.
-
-Mesmo sendo básico, o site não deve parecer morto ou barato.
-
-**Motion permitido (leve):**
-
-- fade-in suave nas seções;
-- slide-up leve no conteúdo;
-- hover simples em botões;
-- underline animado em links;
-- transição suave de cards;
-- pequenas mudanças de border/background no hover;
-- reveal simples de imagens;
-- CTA com hover claro;
-- background estático com gradiente sutil.
-
-**Background:**
-
-- fundo sólido bem escolhido;
-- gradiente leve;
-- textura/noise discreto;
-- nenhuma partícula pesada;
-- nenhum WebGL;
-- nenhum 3D.
-
-**Hover:**
-
-- botão muda cor ou brilho suavemente;
-- cards sobem 2–4px;
-- links com underline animado;
-- ícones podem mover 2–3px.
-
-**Não usar:**
-
-- 3D;
-- partículas;
-- shaders;
-- parallax pesado;
-- scroll storytelling complexo;
-- cursor custom;
-- vídeo hero pesado;
-- animação em excesso.
-
-**Sensação final:** simples, profissional, bonito, rápido e confiável. O visitante deve pensar: *"É claro, bem feito e passa confiança."*
-
----
-
-### 2. Intermediate Site — Polished Motion
-
-Usar para:
-
-- SaaS inicial;
-- consultoria;
-- creator;
-- agência pequena;
-- produto digital;
-- landing de captação;
-- oferta que precisa parecer mais valiosa.
-
-**Motion permitido (além do Basic):**
-
-- text reveal simples;
-- stagger em cards;
-- animated counters;
-- marquee discreto;
-- tabs animadas;
-- accordion com motion suave;
-- feature cards com hover mais refinado;
-- mockup animado;
-- gradient background animado lentamente;
-- microinterações em CTAs;
-- logos com fade/marquee;
-- reveal de seção com timing coordenado.
-
-**Background:**
-
-- gradiente animado sutil;
-- blobs leves;
-- noise;
-- grid sutil;
-- pattern discreto;
-- glow leve atrás do hero.
-
-**Hover:**
-
-- cards com border glow sutil;
-- CTA com arrow animada;
-- mockup com leve tilt;
-- ícones com micro-movimento;
-- cards com hover lift + shadow suave.
-
-**Não usar:**
-
-- 3D real pesado;
-- WebGL complexo;
-- muitos efeitos simultâneos;
-- hero cinematográfico se o projeto não justificar;
-- scroll hijacking.
-
-**Sensação final:** polido, moderno, confiável e acima da média. O visitante deve pensar: *"Isso parece uma marca séria, bem posicionada e atual."*
-
----
-
-### 3. Advanced Site — Premium Motion
-
-Usar para:
-
-- agência premium;
-- startup;
-- SaaS mais forte;
-- high-ticket;
-- consultoria sofisticada;
-- marca pessoal forte;
-- site de autoridade;
-- portfolio premium.
-
-**Motion permitido (além do Intermediate):**
-
-- scroll effects;
-- parallax em camadas;
-- masked typography;
-- image reveal com clip-path;
-- cards com hover 3D leve;
-- text reveal por palavras;
-- scroll progress;
-- seções com narrativa visual;
-- transições cinematográficas moderadas;
-- sticky sections;
-- mockups com motion coordenado;
-- hover magnético em CTAs;
-- custom cursor discreto em áreas específicas;
-- background com glow animado;
-- SVG motion;
-- microinterações em toda a UI.
-
-**Background:**
-
-- gradient mesh animado;
-- grid técnico sutil;
-- radial glow;
-- noise;
-- textura editorial;
-- background com movimento lento;
-- shader leve apenas se não pesar.
-
-**Hover:**
-
-- cards com tilt baseado no mouse;
-- botões magnéticos;
-- links com transição editorial;
-- thumbnails com image reveal;
-- case cards com preview animado;
-- nav com blur/progress.
-
-**Não usar:**
-
-- 3D em todas as seções;
-- excesso de neon;
-- efeitos competindo com a copy;
-- scroll preso/agressivo;
-- animações lentas demais;
-- glassmorphism exagerado;
-- performance ruim no mobile.
-
-**Sensação final:** premium, autoral, memorável e estratégico. O visitante deve pensar: *"Isso foi feito por alguém que entende design, produto e execução."*
-
----
-
-### 4. 3D High-End Site — Cinematic Motion
-
-Usar para:
-
-- tecnologia;
-- IA;
-- inovação;
-- estúdio premium;
-- produto digital high-end;
-- site de autoridade;
-- marca que precisa demonstrar execução visual;
-- projetos onde 3D aumenta percepção de valor.
-
-**Motion permitido (além do Advanced):**
-
-- 3D hero;
-- WebGL;
-- React Three Fiber;
-- Three.js;
-- Spline embed;
-- Unicorn Studio background;
-- shaders;
-- particle systems;
-- image-to-video;
-- vídeo hero cinematográfico;
-- scroll camera movement;
-- floating elements em profundidade;
-- glass cards com hover 3D;
-- parallax avançado;
-- cinematic section transitions;
-- lighting motion;
-- depth layers;
-- atmospheric particles.
-
-**Background:**
-
-- WebGL background;
-- shader background;
-- vídeo loop;
-- image-to-video;
-- particle field;
-- wireframe terrain;
-- cinematic gradient;
-- depth fog;
-- atmospheric glow.
-
-**Hover:**
-
-- elementos com depth;
-- cards seguindo cursor;
-- CTA magnético;
-- objeto 3D reagindo ao mouse;
-- thumbnails com preview motion;
-- sections com scroll-based transformations.
-
-**Regras de composição — usar:**
-
-- 1 hero 3D principal forte;
-- 1 seção cinematográfica secundária;
-- microinterações 3D pontuais;
-- fallback mobile;
-- performance budget.
-
-**Não usar:**
-
-- vários objetos 3D competindo;
-- partículas em tudo;
-- shaders em todas as seções;
-- vídeo pesado sem poster;
-- 3D sem função estratégica;
-- animação só para impressionar.
-
-**Sensação final:** cinematográfico, caro, técnico e memorável. O visitante deve pensar: *"Essa marca sabe construir coisas de outro nível."*
-
-Regra: não usar 3D apenas para impressionar. Usar quando aumentar percepção de marca, desejo, diferenciação e valor. Se o ticket, público ou objetivo não justificam, voltar para Advanced.
-
----
-
-### 5. Signature 3D Experience — Maximum Wow
-
-Signature 3D Experience é o **modo máximo dentro de 3D High-End Site** — não é um nível à parte, é o teto desse nível.
-
-Usar quando:
-
-- for o site principal da agência;
-- o objetivo for impressionar founders, startups ou clientes premium;
-- o site for prova viva da capacidade da marca;
-- o usuário pedir "o máximo", "outro nível", "uau", "high-end", "premium máximo";
-- 3D, vídeo e motion forem parte da proposta de valor;
-- o site precisa parecer projeto de 5.000 a 10.000+ euros.
-
-**Objetivo:** criar uma experiência que gere reação imediata — *"Uau. Isso não é uma landing comum."*
-
-A experiência deve parecer: autoral, cinematográfica, sofisticada, técnica, rara, memorável, impossível de confundir com template.
-
-No formato de resposta, quando esse modo for usado, escrever:
-
-```text
-Nível recomendado:
-3D High-End Site — modo Signature 3D Experience.
-```
-
-Não usar Signature 3D para projetos cuja oferta, ticket ou audiência não sustentem esse posicionamento. Se o usuário pedir Signature 3D em um contexto que não combina, sinalizar isso e propor Advanced como alternativa.
-
-#### Signature 3D — Motion Checklist
-
-Quando este modo estiver ativo, considerar todos os elementos abaixo e escolher os que fazem sentido para a marca.
-
-**Hero:**
-
-- hero 3D ou vídeo cinematográfico;
-- objeto signature;
-- logo transformada em objeto 3D, se fizer sentido;
-- cluster de partículas;
-- monólito abstrato;
-- objeto de vidro/metal/cristal;
-- shader hero;
-- image-to-video hero;
-- câmera lenta;
-- iluminação cinematográfica;
-- depth fog;
-- mouse-reactive object;
-- text reveal impactante;
-- CTA magnético.
-
-**Scroll:**
-
-- scroll storytelling;
-- camera movement;
-- sticky sections;
-- parallax em múltiplas camadas;
-- masked typography;
-- image reveal;
-- section transitions;
-- scroll progress lateral;
-- typography sliding behind images;
-- horizontal reveal pontual;
-- mudança de atmosfera por seção.
-
-**Background:**
-
-- WebGL background;
-- shader animado;
-- gradient mesh dinâmico;
-- particles;
-- noise;
-- depth layers;
-- atmospheric glow;
-- vídeo loop;
-- poster fallback;
-- background que muda com scroll.
-
-**Components:**
-
-- premium nav com blur/progress;
-- ghost buttons sofisticados;
-- magnetic buttons;
-- cards com hover 3D;
-- case cards com preview animado;
-- quote blocks editoriais;
-- logo marquee discreto;
-- capability grid técnico;
-- visual metadata mono;
-- cursor custom discreto;
-- microinterações em links.
-
-#### Signature 3D — 3D / Video Path
-
-O `motion-3d-director` decide entre quatro caminhos:
-
-1. 3D real no navegador (R3F/Three.js);
-2. image-to-video;
-3. hybrid motion (mistura controlada);
-4. motion 2D premium.
-
-Para Signature 3D, o caminho recomendado geralmente é:
-
-- **Hybrid motion**, se performance e controle visual importam;
-- **3D real**, se interação for essencial;
-- **Image-to-video**, se o visual precisa ser cinematográfico e leve;
-- **Motion 2D premium**, se 3D não aumentar conversão.
-
-#### Signature 3D — Image-to-video
-
-Se não houver imagem disponível, perguntar:
-
-> "Você tem logo, símbolo, imagem, produto, print ou dashboard que possa virar hero visual?"
-
-Se não houver asset, propor um signature object:
-
-- objeto signature abstrato;
-- monólito;
-- cluster de partículas;
-- logo reinterpretada;
-- mockup cinematic;
-- cena atmosférica.
-
-Nunca travar por falta de imagem.
-
-#### Signature 3D — Performance obrigatória
-
-Signature 3D sempre deve incluir:
-
-- fallback mobile;
-- poster image;
-- `prefers-reduced-motion`;
-- lazy load;
-- dynamic import;
-- compressão WebM/MP4;
-- WebP/AVIF;
-- redução de partículas;
-- limite de shaders;
-- Core Web Vitals respeitados;
-- pause offscreen;
-- mobile crop;
-- desktop/video split.
-
-#### Signature 3D — Evitar
-
-- parecer template de Web3;
-- neon demais;
-- sci-fi barato;
-- glassmorphism em tudo;
-- 3D sem propósito;
-- site pesado que demora carregar;
-- animação que atrapalha leitura;
-- múltiplos efeitos competindo;
-- copy genérica;
-- visual bonito sem estratégia.
-
-#### Signature 3D — Resultado esperado
-
-O site deve parecer:
-
-- uma experiência;
-- um manifesto visual;
-- um portfolio vivo;
-- uma prova técnica;
-- uma peça de autoridade;
-- uma landing premium;
-- uma demonstração de capacidade.
-
-O visitante deve lembrar:
-
-- o objeto hero;
-- a frase principal;
-- a sensação de profundidade;
-- a qualidade do motion;
-- a clareza da marca.
-
----
-
-## Motion Budget by Level
-
-Cada nível tem um orçamento quantitativo de animação. Esse orçamento evita dois extremos: subentrega (Basic morto) e exagero (Signature poluído).
-
-**Basic Site:**
-
-- 5 a 8 animações leves no total;
-- nenhuma animação crítica para entender a página;
-- tudo deve funcionar sem JavaScript pesado.
-
-**Intermediate Site:**
-
-- 10 a 15 animações;
-- microinterações em CTAs e cards;
-- 1 ou 2 elementos animados principais;
-- sem 3D real.
-
-**Advanced Site:**
-
-- 15 a 25 animações coordenadas;
-- scroll effects;
-- parallax;
-- hover 3D leve;
-- text reveal;
-- mockups animados;
-- background animado leve.
-
-**3D High-End Site:**
-
-- 1 cena hero forte;
-- 1 background ou shader secundário;
-- 20 a 35 interações/motions coordenadas;
-- performance budget obrigatório;
-- fallback mobile obrigatório.
-
-**Signature 3D Experience:**
-
-- 1 momento "wow" principal;
-- 2 a 3 momentos memoráveis secundários;
-- microinterações em toda a experiência;
-- motion system consistente;
-- plano 3D/video completo;
-- performance e fallback tratados desde o início.
-
-Regra final do budget: mais animação não significa melhor site. O melhor site usa motion como linguagem, não como decoração.
-
----
-
-## Handoff para motion-3d-director
-
-Quando o nível for **3D High-End** ou **Signature 3D Experience**, a landing strategist (esta skill) deve enviar para o `motion-3d-director`:
-
-- brief visual;
-- feeling;
-- hero object;
-- three-second memory;
-- color logic;
-- typography logic;
-- spatial logic;
-- objetivo do site;
-- público;
-- nível escolhido (3D High-End ou Signature 3D);
-- se existe logo;
-- se existe imagem;
-- se existe mockup;
-- se existe produto;
-- se precisa ser interativo;
-- restrições de performance;
-- caminho esperado (3D real, image-to-video, hybrid ou motion 2D).
-
-O `motion-3d-director` deve retornar:
-
-- diagnóstico de motion;
-- caminho recomendado;
-- assets necessários;
-- prompt de imagem;
-- prompt de vídeo;
-- plano de implementação;
-- fallback mobile;
-- performance notes;
-- o que evitar.
-
-Os termos `feeling`, `hero object`, `three-second memory`, `color logic`, `typography logic` e `spatial logic` vêm do brief produzido pela skill `decision-maker` (seis decisões + três lógicas). Se o usuário ainda não tem brief, sugerir rodar `decision-maker` primeiro — handoffs para 3D sem brief produzem genérico.
-
----
-
-## Handoff para implementation-planner
-
-A `implementation-planner` deve receber:
-
-- nível de motion (1–5);
-- motion budget correspondente;
-- componentes a usar;
-- animações a implementar;
-- plano 3D/video (vindo do motion-3d-director, se aplicável);
-- assets;
-- stack (Next.js, Tailwind, shadcn/ui, Framer Motion, GSAP, R3F, etc.);
-- performance constraints (Core Web Vitals, mobile fallback, reduced-motion).
-
-Regra crítica: **não implementar R3F/Three.js se o `motion-3d-director` decidir image-to-video ou hybrid sem 3D real.** A escolha de caminho do diretor de motion é decisiva — o planner executa, não re-decide.
-
----
-
-## Regra final do ladder
-
-Toda landing page precisa parecer viva. Mas cada nível tem sua medida certa:
-
-- **Basic:** vivo, leve e limpo.
-- **Intermediate:** polido e interativo.
-- **Advanced:** premium, autoral e com scroll/motion.
-- **3D High-End:** cinematográfico e técnico.
-- **Signature 3D:** memorável, raro, "uau".
-
-Para o site principal/pessoal do usuário ou da agência, o padrão esperado é:
-
-```text
-3D High-End Site — modo Signature 3D Experience.
-```
-
-## SaaS Dashboard Mode
-
-Quando o projeto for SaaS, app, plataforma, AI tool, CRM, analytics product, produto com login, internal tool ou productized service, considerar se o projeto também precisa de dashboard.
-
-Se fizer sentido, criar ou recomendar um dashboard SaaS completo junto da landing page.
-
-O dashboard pode incluir:
-
-- sidebar navigation;
-- top bar;
-- KPI cards;
-- charts;
-- tables;
-- onboarding state;
-- empty states;
-- loading states;
-- skeleton states;
-- error states;
-- notifications;
-- settings page;
-- billing area;
-- subscription area;
-- user/profile area;
-- upgrade prompts;
-- usage metrics;
-- responsive layout;
-- mobile layout;
-- command menu;
-- activity feed.
-
-A skill decide se o dashboard é necessário com base no tipo de projeto, na presença de login, no modelo de negócio e na pergunta direta ao usuário quando houver dúvida.
-
-Quando o usuário pedir landing + produto, entregar:
-
-1. landing page estratégica;
-2. dashboard SaaS sugerido;
-3. arquitetura visual compartilhada entre landing e dashboard;
-4. componentes principais reutilizados;
-5. estados de interface (empty, loading, error, success);
-6. plano de implementação faseado.
-
-O dashboard deve seguir a mesma identidade visual da landing page (cores, tipografia, espaçamento, radius, tom). Não tratar dashboard como um produto visual separado da landing.
-
-## Portfolio / Authority Site Mode
-
-Quando o objetivo do site for autoridade, portfolio, marca pessoal, estúdio, agência premium ou lead passivo, **não tratar como sales page agressiva**.
-
-Ativar este modo quando:
-
-- o cliente vende serviço consultivo premium ou high-ticket;
-- o objetivo principal é mostrar autoridade e portfolio (não captação direta);
-- o público é maduro (founders, C-level, peers, mercado premium);
-- a marca é autoral, estúdio, boutique ou agência selecionada;
-- o funnel é por inbound qualificado, indicação ou conversa privada;
-- pressão de conversão queimaria o posicionamento.
-
-Priorizar:
-
-- manifesto;
-- selected work;
-- case deep-dive;
-- capabilities;
-- recognition;
-- conversa discreta;
-- CTA editorial;
-- prova por execução visual;
-- copy sofisticada e sem urgência falsa.
-
-Evitar:
-
-- FAQ tradicional se parecer low-end;
-- pricing público se o serviço for premium/custom;
-- excesso de depoimentos genéricos;
-- urgência falsa;
-- copy agressiva de funil;
-- popups, exit intents e sticky CTAs barulhentos;
-- promessas mensuráveis sem prova real ("3x mais vendas em 30 dias");
-- elementos de e-commerce em site de serviço autoral.
-
-Quando este modo estiver ativo, ajustar:
-
-- **CTA principal**: editorial e discreto (`Start a conversation`, `hello@marca.com`, `Agendar uma call de 30 min`) — não popup, não sticky agressivo;
-- **Hero**: statement editorial, não promessa de resultado bombástica;
-- **Prova social**: logo grid monocromático + 1-2 quotes editoriais longas, não carrossel de testimonials;
-- **Estrutura**: substituir FAQ por case deep-dive; substituir pricing por capabilities + processo;
-- **Microcopy**: tom adulto, sem exclamação, sem caps lock estratégico, sem emoji decorativo;
-- **Ritmo**: mais espaço negativo, mais respiro entre seções, menos seções no total.
-
-Este modo é compatível com 3D High-End e Signature 3D Experience. A combinação Portfolio/Authority + Signature 3D é ideal para agências premium, estúdios de design/dev e marcas pessoais de especialistas que querem o site funcionar como prova viva de capacidade.
-
-Este modo **não** é compatível com External CTA / WhatsApp Mode agressivo. Se o cliente quiser WhatsApp como CTA, manter o botão discreto no nav e no footer, sem sticky mobile e sem microcopy de urgência.
-
-## Mandatory Process
-
-Sempre seguir este processo. **Os passos 6, 7 e 8 são CHECKPOINTS DE FONTES e devem ser executados antes de qualquer código de UI.**
-
-1. Analisar o contexto do projeto.
-2. Fazer até 5 perguntas se faltarem dados essenciais.
-3. Classificar o nível do projeto.
-4. Definir direção visual.
-5. Decidir se precisa de landing, dashboard, 3D/WebGL ou combinação.
-6. **CHECKPOINT — Inventário de fontes do usuário.** Listar e inspecionar (ls + leitura mínima de READMEs/package.json) o conteúdo de `/modelos lp/` (ou pasta equivalente que o usuário tiver), do projeto atual se houver, e do cérebro/vault. Identificar quais componentes/efeitos do que ele já tem podem ser reutilizados antes de qualquer fonte externa.
-7. **CHECKPOINT — Source-First Protocol (obrigatório).** Executar o protocolo definido abaixo: invocar Magic MCP do 21st.dev, v0 via MCP, e pedir autorização pra clones temporários quando aplicável. Voltar pro usuário com **3-5 opções concretas de componentes/animações reais** com link/nome da fonte. Nunca pular este passo silenciosamente.
-8. **CHECKPOINT — Apresentar opções e obter confirmação.** Mostrar ao usuário o que cada fonte oferece e qual combinação faria sentido para a landing dele. Só prosseguir quando ele aprovar a direção das fontes escolhidas.
-9. Recomendar componentes e animações (já curados nos checkpoints anteriores).
-10. Escrever copy e estrutura.
-11. Sugerir plano de implementação (adaptação das fontes à marca, não recriação).
-12. **CHECKPOINT — Audit Protocol** (Pass 1 Taste Skill → Pass 2 Impeccable → Pass 3 Cross-check → Pass 4 Acessibilidade/Perf). Definido na seção "Audit Protocol" abaixo. Nunca pular passes silenciosamente.
-
-### Checkpoint de honestidade — antes de implementar
-
-Antes de escrever qualquer componente, responder internamente:
-
-- Eu inspecionei o que o usuário já tem em `/modelos lp/` (ou equivalente)?
-- Eu invoquei o Magic MCP do 21st.dev, ou declarei explicitamente que está indisponível?
-- Eu pedi autorização para clonar fontes autorizadas quando elas tinham o efeito ideal (Ali Imam pra shader, React Bits pra animação, Cult UI pra section)?
-- O componente que estou prestes a escrever do zero **realmente não existe** em nenhuma das fontes inventariadas?
-
-Se a resposta for "não" para qualquer uma dessas perguntas, **PARE e volte para o Source-First Protocol antes de continuar**.
-
-### Detalhamento das etapas
-
-**Analisar o projeto.** Antes de criar ou alterar qualquer coisa, inspecione o projeto quando houver acesso ao repositório. Verifique: framework (Next.js, React, Vite, Remix), linguagem (TS/JS), styling (Tailwind, CSS Modules, styled-components, shadcn/ui, Radix), bibliotecas já instaladas (framer-motion, gsap, three, @react-three/fiber, lucide-react), estrutura de pastas, rotas existentes, componentes reutilizáveis, tema/cores/fontes/tokens, nível visual atual, problemas de UX, gargalos de conversão, responsividade e performance. Se não houver projeto acessível, trabalhar como planejador.
-
-**Entender o negócio.** Sempre identificar: negócio/produto/serviço, público-alvo, objetivo da página, oferta, diferenciais, nível de consciência do público, objeções prováveis, tom de marca, etapa do funil, ação principal desejada.
-
-**Escolher referências e componentes.** Com base no nível classificado, decidir: quais seções devem existir, quais componentes melhoram conversão, quais animações ajudam ou atrapalham, quais referências visuais combinam com a marca, quais efeitos no hero, quais elementos devem ser estáticos por performance, quais componentes criar do zero, quais vêm de fontes autorizadas. Toda animação deve ter função: clareza, desejo, profundidade, guia visual, prova de valor ou sofisticação.
-
-## Source-First Protocol
-
-Este é o protocolo executável dos checkpoints 6, 7 e 8 do Mandatory Process. Seguir nesta ordem, declarando ao usuário o que está fazendo em cada fase.
-
-### Fase 1 — Inventário interno (sem dependência externa)
-
-Antes de qualquer rede ou MCP, inspecionar o que o usuário já tem:
-
-1. **Pasta `modelos lp/` (ou equivalente)** — rodar `find ~ -maxdepth 6 -type d -iname "modelos*lp*"` para localizar. Listar subpastas, ler package.json e README.md de cada projeto promissor. Identificar quais já tem Lenis, GSAP, R3F, OGL, Embla, Framer Motion, shaders prontos.
-2. **Projeto atual do usuário** — se houver, listar dependências instaladas (`cat package.json`) e componentes/utilities existentes que podem ser reaproveitados.
-3. **Cérebro / vault do usuário** — usar grep nos arquivos do vault (`projetos/`, `_learnings/`) para achar padrões técnicos já documentados em projetos anteriores.
-
-Saída desta fase: lista de **componentes, libs e padrões reaproveitáveis** com path absoluto.
-
-### Fase 2 — Magic MCP do 21st.dev
-
-**Ferramentas disponíveis (chamar via ToolSearch se não estiverem carregadas):**
-
-- `mcp__magic__21st_magic_component_inspiration` — buscar referências e padrões para uma seção específica (hero, pricing, testimonials, navbar, contact dialog, etc.)
-- `mcp__magic__21st_magic_component_builder` — gerar/instalar componente alinhado ao stack do usuário
-- `mcp__magic__21st_magic_component_refiner` — refinar componente existente
-- `mcp__magic__logo_search` — logos de marcas para integrações/prova social
-
-**Quando chamar (mínimo obrigatório por landing):**
-
-- 1 chamada de `inspiration` para o **hero** (ex: liquid glass hero, particle hero, mask reveal hero)
-- 1 chamada para o **bloco principal de conversão** (ex: pricing, contact dialog, CTA group)
-- 1 chamada para **selected work / portfolio grid** se o projeto for autoridade/portfolio
-- 1 chamada para **navigation** se a direção visual exigir navbar não-padrão
-
-Se o Magic MCP não estiver disponível no ambiente: declarar ao usuário "o Magic MCP do 21st.dev não está conectado nesta sessão" e perguntar se ele quer conectar ou seguir com as outras fontes. **Não cair pro fallback de criar do zero sem essa pergunta.**
-
-### Fase 3 — v0.app community (catálogo de referência via WebFetch)
-
-**Esta é a fase padrão.** v0 entra como banco de templates pra inspecionar e adaptar, não como gerador. Ver "Uso A — v0 como CATÁLOGO DE REFERÊNCIA" na seção `## v0.app` abaixo pro fluxo completo.
-
-**Fluxo resumido:**
-
-1. WebFetch em `https://v0.app/community?q=<termo>` (queries do tipo `liquid+glass`, `portfolio+dark+editorial`, `bento+grid`, `hero+webgl`, `case+study`). Resposta vem como lista estruturada de templates com URL `/templates/<id>`.
-2. Apresentar 5-10 links curados ao usuário com título, autor, link absoluto.
-3. Usuário abre os templates relevantes no navegador, copia o código (View code → copia o JSX) e salva em `modelos lp/<nome>/`. Skill então inspeciona a pasta local.
-
-**Mínimo obrigatório por landing:** 1 query relacionada ao hero/estética principal + 1 query relacionada à seção crítica de conteúdo (portfolio/products/cases conforme o projeto).
-
-**Antes da Fase 3**, sempre fazer overlap-check: muitos templates v0 populares já podem estar na pasta local do usuário desde a Fase 1 (inventário). Não recomendar baixar o que ele já tem.
-
-### ~~Fase 3b~~ — v0 como gerador (REMOVIDO)
-
-> O MCP `v0-platform-mcp` foi removido do ecossistema. Para geração de UI, use o **Magic MCP (21st.dev)** como fonte principal: `mcp__magic__21st_magic_component_builder` e `mcp__magic__21st_magic_component_refiner`. O catálogo do v0 (WebFetch) continua disponível para descoberta de referências na Fase 3.
-
-### Fase 4 — Busca nos repos de referência (cache central primeiro)
-
-Para cada efeito visual ainda não resolvido pelas fases 1-3, inspecionar o **cache central de design** em `~/.claude/design-sources/` antes de qualquer clone. Só clonar se o repo não estiver em cache ou estiver desatualizado.
-
-**Mapa de decisão "preciso disso → fonte":**
-
-| Preciso de... | Cache central | Atualizar cache se necessário |
-|---|---|---|
-| Shader líquido / liquid wave / ripple / pixel grid / efeito experimental WebGL | `~/.claude/design-sources/aliimam/` | `git -C ~/.claude/design-sources/aliimam pull` |
-| Text reveal / particle effects / hover effects / animated cards / scroll effects React | `~/.claude/design-sources/react-bits/` | `git -C ~/.claude/design-sources/react-bits pull` |
-| Hero sections shadcn premium / marketing sections / botões sofisticados / cards animados | `~/.claude/design-sources/cult-ui/` | `git -C ~/.claude/design-sources/cult-ui pull` |
-| SaaS components / dashboards / product UI blocks | `~/.claude/design-sources/watermelon/` | `git -C ~/.claude/design-sources/watermelon pull` |
-| Templates / landing layouts prontos / páginas base | `~/.claude/design-sources/styleui/` | `git -C ~/.claude/design-sources/styleui pull` |
-| Componentes shadcn premium específicos | **Skiper UI** | `npx shadcn add @skiper-ui/skiperXX` (sem clone, instala direto) |
-
-**Fluxo de uso do cache:**
-
-1. Verificar se o diretório em `~/.claude/design-sources/<repo>/` existe e tem conteúdo.
-2. Se sim: ler/grep diretamente no cache sem clonar.
-3. Se desatualizado (> 7 dias sem pull): `git -C ~/.claude/design-sources/<repo> pull --quiet` antes de inspecionar.
-4. Se o cache não existir (máquina nova): `git clone --depth=1 <url> ~/.claude/design-sources/<repo>` e seguir.
-
-**Regras de cópia para o projeto:**
-
-- Copiar APENAS o(s) componente(s) necessário(s) para `src/components/` adaptados à marca
-- Nunca adicionar o repo inteiro como dependência permanente
-- Não clonar em `.design-sources-temp/` se o cache já tem o repo — usar o cache diretamente
-
-### Fase 5 — Apresentação ao usuário e confirmação
-
-Antes de implementar, apresentar ao usuário uma resposta estruturada:
-
-```
-Source-First Inventory para sua landing:
-
-HERO (efeito liquid glass)
-├─ Opção A: 21st.dev → componente "X" via Magic MCP (recomendado, já compatível com Next + Tailwind)
-├─ Opção B: clonar Ali Imam → arquivo `liquid-wave.tsx` adaptado para token #FF4500
-└─ Opção C: gerar variação no v0 com `generate_prototype`
-
-CAROUSEL DE PRODUTOS
-├─ Opção A: Embla Carousel (lib oficial, já no seu /modelos lp/ em `air-pods-max-product-showcase`)
-└─ Opção B: 21st.dev → "scroll-snap carousel" via Magic MCP
-
-TEXT REVEAL HEADLINE
-├─ Opção A: React Bits → `split-text-reveal.tsx` (precisa autorização pra clonar)
-└─ Opção B: Framer Motion na mão (fallback aceitável — padrão simples)
-
-PORTFOLIO GRID
-├─ Opção A: clonar Cult UI → `marketing-grid.tsx`
-└─ Opção B: 21st.dev → portfolio grid via Magic MCP
-
-Posso prosseguir com (A, A, A, A) ou prefere ajustar?
-```
-
-Só implementar depois da confirmação do usuário sobre quais fontes usar.
-
-### Quando é aceitável criar do zero
-
-Existem 3 casos onde é OK criar do zero — e em todos deve ser declarado ao usuário:
-
-1. **Componente trivial e específico da marca** (ex: WizzMark inline SVG do logo) — sem fonte que faça sentido, custo de adaptação > custo de fazer
-2. **Após esgotar as fases 1-4** sem encontrar componente compatível, com o usuário ciente disso
-3. **Microcomponentes utilitários** (MonoLabel, Section wrapper) que são apenas estilização de tokens
-
-Para todo o resto — shaders, animações complexas, hero pieces, carousels, cards 3D, hover effects, transições — **DEVE passar pelo Source-First Protocol antes de ser escrito do zero**.
-
-## Audit Protocol
-
-O Source-First Protocol cuida do **início** (curar fontes maduras antes de implementar). O Audit Protocol cuida do **fim** (validar qualidade antes de declarar a landing pronta).
-
-Aplicar 3 passes em ordem. Cada um pega uma classe de problema diferente — usar os dois primeiros é redundante apenas em 60% dos casos; nos outros 40% um pega o que o outro deixou passar.
-
-### Pass 1 — Taste Skill (cedo, antes da implementação completa)
-
-**Quando aplicar:** logo depois da Fase 5 do Source-First Protocol, quando você tem mockup/wireframe das seções ou primeira versão do hero implementada. Idealmente ainda dá tempo de trocar de componente sem custo alto.
-
-**Fonte:** `https://github.com/Leonxlnx/taste-skill.git`
-
-**Ângulo:** detector anti-AI-generic. Pergunta-chave: *"Esse layout poderia ser de qualquer SaaS genérico, ou tem assinatura autoral?"*
-
-**O que procurar e marcar como problema:**
-
-- Hero com "headline grande + subtítulo + 2 CTAs side-by-side" sem identidade própria
-- Features em grid 3-col com ícones decorativos cute (estilo "✨ Fast 🚀 Reliable 🔥 Secure")
-- Gradientes coloridos saturados sem propósito (purple-to-pink, blue-to-cyan padrão Tailwind)
-- Copy de IA: "revolutionize your workflow", "supercharge your business", "10x your results"
-- Layout simétrico perfeito sem tensão editorial
-- Bordas arredondadas excessivas (`rounded-3xl` em tudo)
-- Card stacks com shadow padrão `shadow-xl` Tailwind
-- Emoji decorativo em qualquer lugar que não seja microcopy de status
-- Testimonial cards genéricos com avatar redondo + nome + cargo + frase entre aspas
-- Pricing cards com badge "Most Popular" centralizado e gradiente
-
-**Saída do pass:** lista de até 5 pontos onde a landing parece template, com sugestão de **substituição** para cada um (componente de fonte autorizada, decisão editorial, ou remoção). Apresentar ao usuário antes de prosseguir.
-
-### Pass 2 — Impeccable (tarde, com tokens e conteúdo reais)
-
-**Quando aplicar:** depois da implementação estar montada com tokens da marca, tipografia real, imagens/mockups reais. Pega problemas que só aparecem quando o componente está vivo, não em wireframe.
-
-**Fonte:** `https://github.com/pbakaus/impeccable.git`
-
-**Ângulo:** bagagem de design clássico. Pergunta-chave: *"Isso parece feito por um designer sênior com 10+ anos de bagagem editorial?"*
-
-**O que procurar e marcar como problema:**
-
-- **Spacing**: padding/margin inconsistente entre seções (24px aqui, 28px ali, 32px em outra). Definir e seguir uma escala (4/8/12/16/24/32/48/64/96/128)
-- **Hierarchy**: títulos competindo entre si por peso/tamanho. H1, H2, H3 devem ter contraste claro
-- **Leading**: `line-height` muito apertado em body (<1.5) ou muito largo em headlines (>1.15)
-- **Tracking**: letter-spacing wrong em maiúsculas pequenas (mono labels precisam mais tracking, ~0.18em)
-- **Optical alignment**: ícones com peso visual diferente do texto adjacente, números mono não monoespaçados na vertical
-- **Ritmo vertical**: scroll sem respiração (seção atrás de seção sem ar) ou com buracos enormes inexplicáveis
-- **Color hierarchy**: 5+ tons cinza para texto sem justificativa, accent usado em coisas que não são acionáveis
-- **Image cropping**: thumbnails com aspect ratio inconsistente entre cards
-- **Contraste tipográfico**: títulos heavy + body também heavy (faltou um light/regular pra criar contraste)
-- **Edge cases**: o que acontece quando o nome do projeto tem 4 palavras vs 1? E quando a descrição tem 2 linhas vs 4?
-- **Focus states**: o tab order entrega uma sequência editorial ou pula entre seções caoticamente?
-
-**Saída do pass:** lista de até 7 ajustes finos com **antes/depois** específicos (ex: "Hero subhead: trocar leading 1.1 → 1.3" / "Cards grid: alinhar baseline da numeração mono com baseline da headline do card").
-
-### Pass 3 — Cross-check com referências
-
-**Quando aplicar:** depois dos passes 1 e 2, com a landing visualmente refinada.
-
-**Como usar agent-browser neste pass (ferramenta padrão):**
-
-agent-browser navega autonomamente em Chrome via CDP e devolve **accessibility tree compacto com refs `@eN`** (~200-400 tokens) — não depende de screenshots. Skill instalada via `npm install -g agent-browser` (repo: https://github.com/vercel-labs/agent-browser). Para ver o core skill da CLI: `agent-browser skills get core`.
-
-Loop padrão:
-```bash
-agent-browser open <url>        # 1. abre a página
-agent-browser snapshot -i       # 2. lê estrutura (interactive elements)
-agent-browser get text @e1      # 3. inspeciona um nó específico
-agent-browser eval "<js>"       # 4. mede tokens (computed styles, etc.)
-```
-
-**O que fazer:**
-
-1. **Abrir a landing/dashboard** com `agent-browser open <url>` e capturar snapshot textual de cada seção crítica via `snapshot -i -s "<seletor>"` (escopo CSS).
-2. **Abrir 1-2 referências** da direção aprovada na mesma sessão (`open` + `snapshot -i`) — Linear, Stripe, Beli, Copilot Money etc, conforme o público.
-3. **Comparar via accessibility tree + computed styles** (`get styles @eN` ou `eval "getComputedStyle(...)"`):
-   - hierarquia tipográfica (tamanhos, pesos, tracking)
-   - escala de radius e shadow
-   - densidade vertical (padding/margin entre seções)
-   - estados interativos (focus visible, contraste, tab order)
-4. **Screenshot é opcional** — só use `agent-browser screenshot path.png` quando precisar de confirmação visual de algo que o accessibility tree não captura (atmosfera, gradientes, motion frozen).
-5. Pergunta-chave: *"Está no mesmo degrau de qualidade visual ou ainda parece um nível abaixo?"*
-
-**Diagnóstico:**
-
-- Se a diferença for **gosto/direção** (escolhas conscientes de marca) → ok, manter
-- Se a diferença for **execução** (a referência tem polish que falta na sua) → voltar pro Source-First e buscar o componente que falta
-- Se a diferença for **fluidez de motion** → revisar timing, easing, escala e composição das animações (provavelmente faltou aplicar Design Motion Principles)
-- Se a diferença for **densidade visual** (referência mais espaçada e respira mais) → cortar elementos, não adicionar
-
-**Saída do pass:** veredicto curto — "pronta", "precisa de 1 pass mais (passe X)", ou "precisa voltar pro Source-First por causa de Y".
-
-> **Regra**: agent-browser navega via accessibility tree (texto) por padrão. **Não tirar screenshots por reflexo** — é overhead desnecessário. Só capturar imagem quando o tree não responde a pergunta (ex: comparar atmosfera visual entre 2 sites).
-
-### Pass 4 — Acessibilidade e performance (sempre, antes de entregar)
-
-Não é gosto, é qualidade técnica. Verificar:
-
-- Contraste AA em todos os textos (mínimo 4.5:1 para body, 3:1 para large text)
-- Tab order coerente, focus visible em todos os elementos clicáveis
-- `prefers-reduced-motion` respeitado (3D off, animações simples)
-- Mobile: hero estático funciona, scroll horizontal vira vertical, sem cursor custom
-- Lighthouse: Desktop ≥ 90 Performance, 100 Accessibility, 100 SEO. Mobile ≥ 80 Performance, 100 Accessibility
-- LCP < 2.5s, CLS < 0.1, INP < 200ms
-- Bundle 3D faz lazy load (não bloqueia LCP)
-
-### Ordem e custo de cada pass
-
-| Pass | Quando | Custo de ajuste | Frequência |
-|---|---|---|---|
-| 1. Taste Skill | Wireframe / hero primeiro | Baixo (ainda dá pra trocar componente) | Sempre |
-| 2. Impeccable | Implementação com tokens reais | Médio (CSS fino) | Sempre |
-| 3. Cross-check | Visual final | Variável | Sempre |
-| 4. Acessibilidade + Perf | Antes de entregar | Médio-alto (pode exigir refactor) | Sempre |
-
-### Quando pular um pass
-
-**Nunca pular sem declarar ao usuário.** Casos onde faz sentido pular:
-
-- Pass 1 (Taste): pular se a direção visual veio inteira de uma referência específica que o usuário aprovou (ex: "clone exato do Everswap") — nesse caso, taste já foi decidido upstream
-- Pass 2 (Impeccable): pular se a landing for v0 throwaway / wireframe interno, não entrega real
-- Pass 3 (Cross-check): pular se não há referência pública disponível
-- Pass 4 (Acessibilidade): **nunca pular**
-
-Em qualquer pulada, declarar ao usuário: "vou pular o pass X porque Y, ok?". Nunca pular silenciosamente.
-
-## Source Access Strategy
-
-Priorizar fontes gratuitas, open source, públicas, registry-based ou fornecidas pelo usuário.
-
-Não depender de fontes pagas como parte central do fluxo.
-
-Fluxo recomendado de pesquisa:
-
-1. 21st.dev via MCP/API (`mcp__magic__*`), quando disponível;
-2. v0.app community (WebFetch, catálogo de referência — sem API key);
-3. repositórios open source autorizados — cache central em `~/.claude/design-sources/`;
-4. registries shadcn públicos;
-5. fontes de taste/motion (Reference Sources);
-6. fontes visuais abertas (Visual Inspiration Sources);
-7. referências enviadas pelo usuário;
-8. hipóteses estratégicas coerentes, quando não houver acesso externo.
-
-## 21st.dev / Magic MCP
-
-Esta skill deve usar 21st.dev diretamente quando MCP/API estiver disponível.
-
-Não depender de outra skill para usar 21st.dev. Quando útil, a skill `ui-component-curator` pode ser invocada como caminho alternativo para análise prévia do projeto e curadoria visual.
-
-O 21st.dev é fonte prioritária para: component search, UI inspiration search, SVG icon search, Magic MCP, UI generation, component variations, landing page components, SaaS dashboard components, buttons, cards, hero sections, pricing sections, testimonials, AI chat components, text e navigation components, animated components.
-
-Quando o ambiente tiver Magic MCP disponível, usar as ferramentas MCP do 21st.dev diretamente:
-
-- `mcp__magic__21st_magic_component_inspiration` — buscar padrões e referências de seções (hero, pricing, testimonials, features);
-- `mcp__magic__21st_magic_component_builder` — gerar/instalar o componente alinhado ao stack;
-- `mcp__magic__21st_magic_component_refiner` — refinar componentes existentes;
-- `mcp__magic__logo_search` — logos de marcas (integrações, prova social, parceiros).
-
-Fluxo recomendado:
-
-1. Analisar o projeto.
-2. Identificar o nível do site.
-3. Definir quais componentes a página precisa.
-4. Pesquisar no 21st.dev por componentes compatíveis com objetivo, tom e stack.
-5. Priorizar componentes compatíveis com Next.js, React, TypeScript, Tailwind CSS, shadcn/ui e Framer Motion/Motion.
-6. Combinar resultados do 21st.dev com:
-   - React Bits para animações;
-   - Cult UI para componentes shadcn;
-   - Ali Imam para shaders e efeitos visuais;
-   - Watermelon UI para SaaS/product UI;
-   - StyleUI para templates;
-   - Design Motion Principles para regras de movimento;
-   - Taste Skill e Impeccable para qualidade visual.
-
-Se o Magic MCP ou API do 21st.dev não estiver disponível: não inventar resultados específicos, informar que o 21st.dev não está conectado, continuar usando as outras fontes disponíveis, pedir ao usuário para conectar o MCP/API se quiser busca direta no 21st.dev.
-
-## v0.app — catálogo de referência
-
-O v0 é usado **exclusivamente como catálogo de referência** (não como gerador). O MCP `v0-platform-mcp` foi removido do ecossistema — para geração de UI, use o **Magic MCP (21st.dev)**.
-
-**Fluxo de catálogo (3 passos):**
-
-1. **Buscar templates via WebFetch em `https://v0.app/community?q=<termo>`.** Funciona para queries como `liquid+glass`, `portfolio+dark`, `bento+grid`, `case+study`, `hero+webgl`.
-
-   Exemplo:
-   ```
-   url: https://v0.app/community?q=liquid+glass
-   prompt: List all templates returned. For each: title, author, URL, brief description.
-   ```
-
-2. **Apresentar 5-10 links curados** com título, autor, link absoluto e o que cada um oferece.
-
-3. **Usuário abre os templates no navegador**, copia o JSX e salva em `modelos lp/<nome>/`. A skill inspeciona a pasta local e adapta à marca.
-
-**Caveat:** WebFetch lê a lista de busca, mas não o código do template individual (renderizado por JS client-side). Por isso o passo 3 é manual. Não tente extrair código de template via WebFetch diretamente.
-
-**Alternativa opt-in:** usar **agent-browser** pra abrir o template no browser real e extrair código/screenshot. Mais tokens — só vale quando o template é crítico e o usuário não quer copiar manual. **Não usar Playwright.**
-
-**Overlap com modelos locais:** muitos templates populares do v0 já podem estar na pasta `modelos lp/` do usuário. Inspecionar a pasta local primeiro antes de chamar WebFetch.
-
-## Authorized Component / Code Inspection Sources
-
-Estas fontes podem ser clonadas temporariamente, com permissão do usuário, para inspecionar componentes, exemplos ou registries.
-
-### React Bits
-
-```text
-https://github.com/DavidHDev/react-bits.git
-```
-
-Usar para: animações React, text effects, animated backgrounds, scroll effects, hover effects, cards animados, microinterações, loaders, hero animations, partículas, efeitos de cursor, detalhes visuais interativos.
-
-Priorizar componentes open source. Não recomendar nem listar componentes React Bits Pro como dependência obrigatória.
-
-### Cult UI
-
-Usar docs, GitHub ou registry público quando disponível:
-
-```text
-https://www.cult-ui.com/docs
-https://github.com/nolly-studio/cult-ui
-```
-
-Usar para: componentes shadcn, hero sections, botões sofisticados, cards animados, marketing sections, componentes com visual premium, componentes para landing pages.
-
-Usar apenas recursos públicos/open source, salvo confirmação de acesso pago.
-
-### Ali Imam
-
-```text
-https://github.com/aliimam-in/aliimam.git
-```
-
-Usar para: shaders, liquid wave, pixel grid, ripple shader, border glow, bento layouts, typewriter effects, canvas-based effects, efeitos visuais experimentais.
-
-Se a estrutura do repositório estiver incerta: inspecionar docs primeiro, pedir confirmação antes de clonar, não assumir nomes de componentes sem verificar.
-
-### Watermelon UI
-
-```text
-https://github.com/WatermelonCorp/watermellon-registry.git
-```
-
-Usar para: SaaS components, dashboards, product UI, cards, app sections, UI blocks, interfaces de produto, layouts funcionais, componentes de startup.
-
-### StyleUI
-
-```text
-https://github.com/heyfabrika/styleui.git
-```
-
-Usar para: templates, landing page layouts, páginas prontas, seções instaláveis, fundamentos rápidos de layout, páginas base.
-
-### Skiper UI
-
-Skiper UI **não deve ser clonado**.
-
-Usar o comando público:
-
-```bash
-npx shadcn add @skiper-ui/skiper40
-```
-
-Usar somente componentes públicos/gratuitos, a menos que o usuário confirme acesso premium.
-
-Usar para: uncommon shadcn components, efeitos visuais diferenciados, seções premium, animações avançadas, componentes menos genéricos.
-
-Evitar: depender de componentes premium sem autorização; assumir acesso pago.
-
-## Authorized Reference Inspection Sources
-
-Estas fontes podem ser inspecionadas ou consultadas para princípios, critérios de qualidade, motion e taste, mas **não devem ser tratadas como dependências de projeto**.
-
-### Impeccable
-
-```text
-https://github.com/pbakaus/impeccable.git
-```
-
-Usar para: visual taste, spacing, hierarchy, composição visual, design fluency, evitar UI amadora, melhorar refinamento visual.
-
-Impeccable não é fonte de componentes. É fonte de julgamento visual.
-
-### Taste Skill
-
-```text
-https://github.com/Leonxlnx/taste-skill.git
-```
-
-Usar como camada anti-generic frontend.
-
-Aplicar para: evitar UI genérica de IA, melhorar hierarquia, melhorar spacing, melhorar composição, deixar a interface mais premium, corrigir visual "template", revisar se o design parece feito por especialista.
-
-Sempre aplicar quando a landing parecer genérica, o projeto for avançado ou high-end, o usuário pedir qualidade premium, o site precisar parecer caro.
-
-### Design Motion Principles
-
-```text
-https://github.com/kylezantos/design-motion-principles.git
-```
-
-Usar para: easing, timing, scroll motion, reveal logic, microinteraction rules, motion hierarchy, duração de animações, entrada e saída de elementos, evitar animação caótica, consistência de movimento.
-
-### MotionSites
-
-```text
-https://github.com/aayushsoam/motionsites.ai.git
-```
-
-Classificação: referência visual, referência de motion, biblioteca de prompts/ideias, fonte de inspiração para hero, scroll storytelling e animações.
-
-**Não tratar MotionSites como fonte principal de componentes instaláveis.** Se houver repositório disponível, pode ser inspecionado apenas para pesquisa de referências e padrões, não como dependência do projeto.
-
-Usar para: motion references, animated landing ideas, hero prompts, scroll storytelling, cinematic web sections, exemplos de movimento, direção de animação.
-
-### Vibe Code Components
-
-```text
-https://vibecodecomponents.com/
-```
-
-Classificação: referência visual, fonte de prompts, inspiração de componentes, vibe coding reference.
-
-**Não tratar como fonte garantida de código instalável**, a menos que o conteúdo acessível confirme isso.
-
-Usar para: vibe coding references, prompt ideas, component inspiration, UI patterns, visual exploration, ideias de seções, direção visual rápida, componentes modernos.
-
-> **Regra importante:** MotionSites e Vibe Code Components podem aparecer em `Reference Sources` e `Visual Inspiration Sources`, mas não devem ser tratadas como fontes primárias de implementação igual React Bits, Cult UI, Watermelon ou StyleUI.
-
-## Visual Inspiration Sources
-
-Estas são fontes visuais para a skill usar quando precisar de direção visual, inspiração, estilo, animação, composição e UX. Não devem ser tratadas como fonte garantida de código.
-
-### 1. Landing Love
-
-URL: `https://www.landing.love/`
-
-Melhor para pesquisar: landing pages animadas, scroll effects, WebGL, GSAP, Framer, Webflow, páginas com vídeo de navegação, storytelling visual, motion em páginas reais.
-
-Quando usar: projeto precisa de inspiração de landing page animada, usuário quer algo moderno/dinâmico, skill precisa entender ritmo de scroll e transições.
-
-### 2. Godly
-
-URL: `https://godly.website/`
-
-Melhor para pesquisar: sites premium, composição visual, tipografia, direção de arte, layout editorial, estética high-end, referências de marcas digitais.
-
-Quando usar: projeto precisa parecer sofisticado, direção visual está fraca, site precisa parecer caro e não genérico.
-
-### 3. Design Spells
-
-URL: `https://www.designspells.com/`
-
-Melhor para pesquisar: microinterações, detalhes de UI, easter eggs, pequenas animações, momentos de encantamento, interação fina.
-
-Quando usar: site já estruturado mas precisa de detalhes memoráveis, projeto precisa de acabamento visual, experiência precisa parecer mais viva.
-
-### 4. Spline
-
-URL: `https://spline.design/`
-
-Melhor para pesquisar: cenas 3D, hero 3D, objetos interativos, product visuals, embeds 3D, experiências espaciais.
-
-Quando usar: projeto 3D High-End, modo Signature 3D, marca tech/futurista, produto que ganha valor com visual 3D.
-
-Trabalhar dentro do plano gratuito do Spline. Respeitar limites de exportação, watermark e número de cenas. Não pressupor licença paga.
-
-### 5. Unicorn Studio
-
-URL: `https://www.unicorn.studio/`
-
-Melhor para pesquisar: WebGL backgrounds, motion assets, efeitos no-code, shaders visuais, fundos interativos, efeitos de partículas.
-
-Quando usar: site precisa de impacto visual, projeto quer WebGL sem implementar tudo manualmente, skill precisa sugerir background animado ou efeito atmosférico.
-
-Trabalhar dentro do plano gratuito. Respeitar limites e marca d'água. Não pressupor licença paga.
-
-### 6. Mobbin
-
-URL: `https://mobbin.com/`
-
-Melhor para pesquisar: UX real, fluxos de apps, onboarding, pricing pages, dashboards, mobile UI, padrões de produto.
-
-Regra: Mobbin pode exigir login/pagamento. Usar apenas se houver acesso, previews públicos ou referências enviadas pelo usuário. Não depender de Mobbin no fluxo principal.
-
-### 7. ScreensDesign / DesignVault
-
-URLs: `https://screensdesign.com/` · `https://designvault.io/`
-
-Melhor para pesquisar: onboarding mobile, paywalls, app screens, subscription flows, telas com foco em conversão, UX de apps.
-
-Regra: pode exigir plano/pagamento para uso completo. Usar apenas quando houver acesso ou como referência visual pública.
-
-### Fontes que o usuário pode fornecer manualmente
-
-- **Prints, screenshots, vídeos, Figma, Behance, Dribbble, sites concorrentes**: tratar como fonte de prioridade alta. A referência do usuário vale mais que catálogo genérico.
-- **Componentes ou trechos de código que o usuário cole no chat**: tratar como base autoritativa para estilo, padrão e direção.
-- **Bibliotecas premium que o usuário declarar ter acesso** (React Bits Pro, Cult UI Pro, Skiper UI premium, Mobbin, ScreensDesign Pro, etc.): a skill **não pressupõe esse acesso**, mas se o usuário confirmar, pode usar.
-
-### Visual Inspiration Rules
-
-Usar fontes visuais apenas como inspiração, não como fonte garantida de código.
-
-Usar para: direção visual, padrões de layout, ritmo de seções, microinterações, animações, composição, atmosfera, inspiração de scroll, linguagem visual, UX real, onboarding, paywalls, dashboards, pricing pages.
-
-Não prometer código pronto quando a fonte for apenas visual. Não copiar visualmente um site inteiro de referência. Usar referências para criar uma solução original, adaptada ao projeto.
-
-## Clone Policy
-
-**Não clonar nada automaticamente.**
-
-Se precisar clonar uma fonte de componentes ou referência, perguntar antes.
-
-Ordem preferida:
-
-1. usar source map conhecido;
-2. usar docs públicas;
-3. usar web/search se disponível;
-4. usar registry URL se disponível;
-5. pedir permissão antes de clonar;
-6. clonar apenas em pasta temporária ou claramente nomeada.
-
-Clonar apenas em pasta temporária, como:
-
-```text
-.design-sources-temp/
-```
-
-Nunca clonar diretamente dentro da estrutura principal do app.
-
-A skill pode clonar temporariamente apenas repositórios das listas `Authorized Component / Code Inspection Sources` e `Authorized Reference Inspection Sources`.
-
-Usar repositórios clonados somente para: pesquisa, inspeção, descoberta de componentes, exemplos, orientação de implementação.
-
-Não manter repositórios clonados como dependência do projeto sem confirmação explícita.
-
-## Paid Source Policy
-
-Não depender de fontes pagas no fluxo principal.
-
-Remover dependência obrigatória de:
-
-- Mobbin pago;
-- ScreensDesign pago;
-- React Bits Pro;
-- Cult UI Pro;
-- Skiper UI premium;
-- Spline pago;
-- Unicorn Studio pago;
-- v0 pago como obrigação.
-
-Usar ferramentas pagas apenas se:
-
-- o usuário confirmar acesso;
-- a credencial estiver disponível;
-- o projeto explicitamente exigir;
-- a fonte for opcional.
-
-Sempre preferir: open source, registry público, GitHub, docs públicas, screenshots do usuário, referências fornecidas.
-
-Não burlar paywall, login, licenças, limites de plano ou proteções de sites. Se houver dúvida sobre licença, avisar e sugerir alternativa open source.
-
-## Default Stack
-
-Se o usuário não especificar stack, assumir:
-
-- Next.js;
-- React;
-- TypeScript;
-- Tailwind CSS;
-- shadcn/ui;
-- Framer Motion ou Motion;
-- React Bits;
-- React Three Fiber para projetos 3D;
-- Three.js para WebGL avançado;
-- lucide-react para ícones;
-- Recharts para dashboards SaaS.
-
-Se o projeto for simples, reduzir stack e evitar complexidade desnecessária.
-
-## Default Visual Direction
-
-Se o usuário não informar direção de marca, sugerir 2 ou 3 caminhos e pedir confirmação.
-
-### 1. Premium Tech Minimalist
-
-Usar para: SaaS, AI tools, produtos digitais, consultorias modernas, serviços B2B.
-
-Características: limpo, moderno, estratégico, tipografia forte, motion sutil, CTAs claros, alta conversão, visual profissional.
-
-### 2. Cinematic Futuristic
-
-Usar para: tecnologia, IA, inovação, Web3, produtos high-ticket, marcas digitais avançadas.
-
-Características: fundo escuro, glow controlado, partículas, WebGL, 3D, scroll storytelling, gradientes dinâmicos, sensação premium/futurista.
-
-### 3. Sophisticated Editorial
-
-Usar para: consultorias, agências, criadores premium, luxo, arquitetura, branding, serviços autorais.
-
-Características: tipografia refinada, muito espaço negativo, layout assimétrico, movimento discreto, sensação editorial, visual sofisticado.
-
-Não forçar uma direção sem confirmar se a marca for ambígua.
-
-### Paletas sugeridas
-
-Quando o usuário não fornecer paleta, escolher baseado no negócio:
-
-- Tech / IA / SaaS: preto, azul profundo, ciano, branco, cinza frio.
-- Luxo / consultoria premium: off-white, preto, grafite, dourado suave, bege.
-- Saúde / bem-estar: verde profundo, areia, branco, azul suave.
-- Educação / infoproduto premium: marinho, branco, amarelo elegante, cinza.
-- Produto low ticket com percepção premium: fundo escuro ou claro editorial, cor de destaque forte e contida.
-
-### Tipografia
-
-Preferir:
-
-- títulos: Space Grotesk, Sora, Manrope, Plus Jakarta Sans, Neue Montreal, Inter Tight;
-- corpo: Inter, SF Pro, Geist, Manrope;
-- detalhes técnicos: JetBrains Mono, Geist Mono, IBM Plex Mono.
-
-## Animation Selection Rules
-
-Escolher animações com base em: tom da marca, ticket da oferta, maturidade do público, objetivo da página, nível de consciência do público, performance mobile, clareza da mensagem, valor percebido, confiança, conversão.
-
-Não usar animação apenas porque é bonita.
-
-A animação deve: guiar atenção, reforçar hierarquia, aumentar desejo, comunicar qualidade, melhorar compreensão, tornar a experiência memorável.
-
-Evitar:
-
-- excesso de movimento;
-- animações lentas demais;
-- animações sem propósito;
-- scroll hijacking agressivo;
-- efeitos que atrapalham leitura;
-- WebGL pesado sem fallback;
-- neon exagerado em marca que pede sofisticação.
-
-Antes de qualquer animação, respeitar:
-
-- `prefers-reduced-motion`: desativar ou simplificar todos os efeitos quando a preferência do sistema indicar isso.
-- **Fallback mobile**: reduzir partículas, Three.js e efeitos pesados em dispositivos de baixo desempenho.
-- Lazy load de componentes 3D.
-- Usar fallback estático quando necessário.
-- Priorizar LCP, CLS e legibilidade.
-
-### Animation Types to Research
-
-Quando o projeto pedir motion ou visual premium, pesquisar e recomendar:
-
-scroll effects, parallax, 3D hero animation, WebGL background, particle effects, shader effects, hover 3D, animated cards, text reveal, typewriter, magnetic buttons, gradient animations, floating objects, cinematic transitions, masked typography, image reveal, product mockup animation, CTA animation, dashboard microinteractions, loading states, onboarding animations, pricing section motion, testimonial carousel motion, background noise/texture, glassmorphism interactions.
-
-### 3D / WebGL Sources
-
-Usar Spline, Unicorn Studio, Three.js e React Three Fiber quando o projeto exigir experiência visual avançada.
-
-Usar para: hero 3D, WebGL backgrounds, motion assets, interactive objects, product visualization, particle systems, cinematic scenes, mouse-reactive visuals, shader effects, scroll-driven 3D.
-
-Se for 3D High-End ou modo Signature 3D, sempre sugerir: efeito principal desktop, fallback mobile, estratégia de performance, redução de partículas, lazy loading, `prefers-reduced-motion`, canvas otimizado, alternativa estática para mobile fraco.
-
-Não usar 3D pesado em projetos Basic.
-
-### Checklist de seleção de componentes
-
-Antes de escolher um componente ou animação, responder internamente:
-
-- Ele melhora clareza, desejo, credibilidade ou conversão?
-- Ele combina com o público?
-- Ele combina com a oferta?
-- Ele é viável no stack atual?
-- Ele prejudica performance mobile?
-- Ele depende de biblioteca paga?
-- Ele é acessível?
-- Ele pode ser mantido pelo projeto?
-- Existe alternativa mais simples?
-
-Se a resposta for fraca, não usar.
-
-## Landing Page Strategy
-
-Sempre que criar landing page, entregar:
-
-1. diagnóstico do projeto;
-2. nível recomendado do site;
-3. direção visual;
-4. estratégia de copy;
-5. estrutura completa da página;
-6. textos prontos;
-7. componentes recomendados;
-8. animações recomendadas;
-9. fontes usadas;
-10. plano de implementação;
-11. melhorias de conversão;
-12. estratégia de CTA externo / WhatsApp, se aplicável;
-13. plano de dashboard, se relevante;
-14. plano 3D/WebGL, se relevante.
-
-### Landing Page Required Structure
-
-A landing page deve incluir, quando fizer sentido:
-
-**Header / Topo**: logo, menu curto, CTA principal, CTA secundário (se aplicável), navegação clara, versão mobile.
-
-**Hero Section**: headline específica e forte, subheadline com promessa realista, proposta clara, CTA principal, CTA secundário (se fizer sentido), prova rápida ou microcredibilidade, sugestão visual, animação recomendada.
-
-**Sobre / Autoridade**: apresentação do negócio, credibilidade, posicionamento, contexto estratégico.
-
-**Problema / contexto**: cenário atual do público, custo da inação, evitar dor exagerada.
-
-**Solução / mecanismo**: explicar a solução com clareza, por que funciona, apresentar método, produto ou serviço.
-
-**Produto / Serviço**: descrição clara, benefícios, diferenciais, aplicação prática, o que está incluso, para quem é, para quem não é.
-
-**Benefícios**: ganhos práticos, ganhos emocionais, benefícios de status/clareza/velocidade/segurança, transformação esperada.
-
-**Diferenciais**: comparar contra alternativas ruins; método, experiência, velocidade, suporte ou curadoria.
-
-**Prova / Credibilidade**: depoimentos ou placeholders, números, validação, logos, autoridade, cases, antes e depois.
-
-**Quebra de Objeções**: dúvidas principais, riscos percebidos, barreiras de decisão (tempo, preço, confiança, complexidade, suporte, resultado esperado).
-
-**Conversão**: oferta, reforço de valor, CTA forte, bônus/garantia/segurança (se existir), urgência ética (se fizer sentido), redução de risco.
-
-**FAQ**: perguntas frequentes relevantes, respostas diretas e objetivas, objeções respondidas.
-
-**Footer**: links úteis, contato, social, legal, CTA final (se fizer sentido).
-
-### Case Study / Portfolio Requirements
-
-Quando o site for para agência, consultoria, estúdio, dev premium, designer, produto autoral ou marca pessoal, sempre considerar uma seção de portfolio.
-
-Incluir:
-
-- **selected work**: grid editorial com 4-8 cases curados (não galeria infinita);
-- **case cards**: thumbnail + nome do cliente (ou placeholder) + ano + tags de capability + linha de descrição curta;
-- **case deep-dive**: 1 case em destaque com storytelling longo na própria landing, ou link para página individual `/work/[slug]`;
-- **problema**: contexto, restrições, o que estava travando;
-- **decisões**: as escolhas não óbvias, o mecanismo, o porquê;
-- **resultado**: o outcome visual + métricas se existirem;
-- **stack**: tecnologias usadas, em mono type, como metadata editorial;
-- **métricas reais quando existirem**: usar números específicos, datados e atribuídos;
-- **placeholders editáveis quando faltarem dados**: marcar claramente como `[editável]` ou `[Cliente sob NDA]`.
-
-**Regra crítica:** nunca inventar clientes, números ou resultados. Usar `[editável]` quando faltar informação real. Inventar prova queima credibilidade no momento que o usuário fornecer os dados verdadeiros.
-
-Padrões editoriais recomendados:
-
-- numeração mono nos cases (`01 — `, `02 — `);
-- ano em mono type ao lado do nome;
-- tags de capability separadas por `·` em vez de pílulas coloridas;
-- thumbnails com aspect ratio consistente (16:10 ou 4:3 funciona bem para tech);
-- hover com clip-path reveal ou image scale sutil + accent border;
-- cases sob NDA podem aparecer como `[Cliente confidencial · setor]` com descrição genérica do trabalho.
-
-Para case deep-dive na landing ou em página própria:
-
-- estrutura em 3 atos: Context → Decisions → Outcome;
-- intercalar texto editorial com mockups grandes e estáticos (animar entrada, não loop);
-- evitar carrossel automático de imagens (controlar o pace);
-- terminar com CTA discreto de "Ver mais trabalhos" ou "Conversar sobre um projeto".
-
-Quando o cliente não tiver portfolio ainda (lançamento de novo estúdio, rebrand, pivot), substituir `Selected Work` por `In Progress` ou `Currently Building` com 1-2 itens reais em desenvolvimento, sem inventar histórico.
-
-### Copywriting Requirements
-
-Escrever todos os textos do site: headlines, subtítulos, descrições, CTAs, textos de apoio, FAQ, textos prontos para uso.
-
-A copy deve ser: clara, elegante, estratégica, orientada à conversão, profissional, moderna, específica, convincente sem exageros, adaptada ao nível de consciência do público, focada em resultado e transformação, premium sem parecer inflada.
-
-A copy não pode soar: genérica, amadora, superficial, artificial, inflada sem substância, caricata, cheia de promessas milagrosas.
-
-Regras práticas:
-
-- Usar 2ª pessoa: "você".
-- Ser claro antes de ser criativo.
-- Priorizar precisão, especificidade e prova sobre adjetivos vagos.
-- Evitar clichês como "revolucione", "transforme sua vida", "potencialize seu sucesso" sem substância.
-- Evitar promessas milagrosas.
-- Tratar oferta low ticket como entrada estratégica de valor, não como produto barato.
-- Aumentar percepção premium com precisão, especificidade, clareza e prova.
-- Preferir frases curtas e fortes.
-- Explicar benefícios com consequência prática.
-- Adaptar a copy ao nível de consciência do público.
-- Criar CTAs específicos, não apenas "Saiba mais".
-- Não explicar teoria.
-- Entregar como copywriter profissional.
-
-### Conversion Optimization
-
-Sempre sugerir melhorias de conversão:
-
-- CTA acima da dobra;
-- CTA repetido estrategicamente;
-- clareza de oferta;
-- redução de objeções;
-- prova social;
-- reforço de autoridade;
-- comparação antes/depois;
-- escassez ética, se fizer sentido;
-- garantias, se existirem;
-- seção de dúvidas;
-- microcopy em botões;
-- layout mobile-first;
-- contraste em CTAs;
-- teste A/B de headline;
-- teste A/B de hero visual;
-- teste A/B de CTA;
-- simplificação de formulário;
-- elementos de confiança.
-
-### External CTA / WhatsApp Conversion Mode
-
-Quando o objetivo da página for captar leads via WhatsApp, Telegram, Calendly, DM, ligação ou link externo, adaptar a estratégia de conversão.
-
-Usar quando:
-
-- objetivo for "chamar no WhatsApp";
-- objetivo for "agendar reunião";
-- objetivo for "captar diagnóstico";
-- objetivo for "conversar com especialista";
-- objetivo for "falar com consultor";
-- produto ou serviço vender melhor por conversa.
-
-Para WhatsApp:
-
-- CTA deve ser claro e orientado à ação;
-- evitar CTA genérico como "Saiba mais";
-- usar microcopy que reduza fricção;
-- explicar o que acontece depois do clique;
-- reforçar que é rápido, direto e sem compromisso, se for verdade;
-- repetir o CTA em pontos estratégicos;
-- usar botão fixo/sticky no mobile, se fizer sentido;
-- criar seção de objeções antes do CTA final;
-- usar prova social antes de pedir conversa;
-- CTA deve combinar intenção + benefício.
-
-Exemplos de CTA para WhatsApp:
-
-- "Agendar diagnóstico pelo WhatsApp"
-- "Quero ver minha automação funcionando"
-- "Falar com um especialista agora"
-- "Receber uma análise da minha clínica"
-- "Quero automatizar meu atendimento"
-- "Ver como isso funcionaria na minha operação"
-
-Microcopy de apoio:
-
-- "Você será direcionado para uma conversa rápida no WhatsApp."
-- "Sem compromisso. A ideia é entender seu cenário e mostrar o melhor caminho."
-- "Ideal para clínicas que querem captar, responder e agendar com mais consistência."
-
-Quando o CTA for WhatsApp, incluir no plano de implementação:
-
-- link formatado com mensagem pré-preenchida;
-- botão fixo mobile opcional;
-- eventos de tracking;
-- variações A/B de CTA;
-- fallback para desktop;
-- mensagem inicial sugerida.
-
-Exemplo de mensagem pré-preenchida:
-
-```text
-Olá, quero entender como uma automação com IA poderia ajudar minha clínica a captar mais leads e agendar mais avaliações.
-```
-
-### Visual Direction Requirements
-
-Sempre descrever: estilo visual ideal, cores sugeridas, tipografia, layout, elementos visuais, sensação que o site deve transmitir, motion style, nível de sofisticação, referências de componentes, hierarquia visual, direção de imagens, uso de 3D (se fizer sentido), fallback mobile.
-
-### Implementation Output
-
-Se o usuário pedir implementação, entregar:
-
-- file structure;
-- dependencies;
-- component architecture;
-- animation strategy;
-- responsive behavior;
-- mobile fallback;
-- performance notes;
-- accessibility notes;
-- SEO basics;
-- recommended components;
-- sections order;
-- implementation steps.
-
-Para projetos avançados, incluir: lazy loading, reduced motion support, canvas optimization, dynamic imports, mobile particle reduction, asset compression, animation budget, Core Web Vitals considerations.
-
-#### Regras de implementação
-
-- Respeitar padrões existentes do projeto.
-- Não reescrever arquitetura sem necessidade.
-- Criar componentes reutilizáveis.
-- Usar TypeScript quando o projeto usa TypeScript.
-- Usar Tailwind quando o projeto usa Tailwind.
-- Usar shadcn/ui se já estiver instalado ou se for claramente adequado.
-- Evitar dependências novas quando CSS/Framer Motion resolver.
-- Adicionar Three.js ou React Three Fiber somente quando necessário.
-- Garantir responsividade.
-- Garantir estados de hover/focus.
-- Não quebrar acessibilidade.
-- Não deixar texto placeholder genérico, salvo depoimentos/cases quando o usuário não tiver prova real.
-- Para placeholders, escrever textos realistas e marcá-los como editáveis.
-
-### Prompt base para criação de landing page
-
-Use este briefing como base quando o usuário pedir uma landing page completa.
-
-```text
-Crie uma landing page completa, premium e estratégica para o seguinte negócio/produto:
-
-[DESCREVA AQUI O NEGÓCIO, PRODUTO, SERVIÇO OU OFERTA]
-
-Público-alvo:
-[DESCREVA O PÚBLICO]
-
-Objetivo da página:
-[EX: vender, captar leads, agendar reuniões, apresentar serviço, vender produto low ticket]
-
-Oferta:
-[DESCREVA A OFERTA]
-
-Diferenciais:
-[LISTE OS DIFERENCIAIS]
-
-Tom desejado:
-Profissional, moderno, estratégico, sofisticado, claro e orientado à conversão.
-
-A estrutura do site deve incluir:
-
-Header / topo:
-- menu sugerido
-
-Hero Section:
-- headline forte
-- subheadline
-- proposta clara
-- CTA principal
-- sugestão visual
-
-Sobre / Autoridade:
-- apresentação do negócio
-- construção de credibilidade
-
-Serviços / Produto:
-- descrição clara
-- benefícios
-- diferenciais
-
-Seção de Benefícios:
-- ganhos práticos e emocionais
-
-Prova / Credibilidade:
-- depoimentos ou placeholders
-- números, autoridade ou validação
-
-Quebra de Objeções:
-- principais dúvidas respondidas
-
-Seção de Conversão:
-- oferta ou chamada para ação
-- reforço de valor
-
-FAQ:
-- perguntas frequentes relevantes
-
-Footer:
-- estrutura sugerida
-
-Escreva todos os textos do site:
-- headlines
-- subtítulos
-- descrições
-- CTAs
-- textos de apoio
-- FAQ
-- textos prontos para uso
-
-Também descreva a direção visual e design:
-- estilo visual ideal
-- cores sugeridas
-- tipografia
-- layout
-- elementos visuais
-- sensação que o site deve transmitir
-
-Sugira melhorias de conversão:
-- otimizações estratégicas
-- testes A/B
-- melhorias de UX
-- elementos extras que aumentam conversão
-
-EXIGÊNCIAS DE QUALIDADE
-
-A landing page deve ser escrita com base nestes princípios:
-- linguagem clara, elegante e orientada à conversão
-- estrutura lógica e fluida
-- alto valor percebido
-- texto convincente sem exageros caricatos
-- tom profissional, estratégico e moderno
-- foco em resultado e transformação
-- copy adaptada ao nível de consciência do público
-- equilíbrio entre sofisticação e objetividade
-
-O texto não pode soar:
-- genérico
-- amador
-- superficial
-- artificial
-- inflado sem substância
-
-Priorize precisão, especificidade e prova sobre adjetivos vagos. Escreva com a clareza de quem domina o assunto.
-
-INSTRUÇÕES ESTRATÉGICAS IMPORTANTES
-
-Trate a oferta low ticket como uma solução valiosa, não como algo "barato".
-
-Use elementos de copywriting, marketing e percepção premium.
-
-Escreva pensando em conversão real.
-
-Sempre que possível, aumente:
-- a clareza
-- a desejabilidade
-- a credibilidade
-
-Evite promessas milagrosas.
-
-Não explique teoria.
-
-Entregue a landing page pronta.
-
-Se faltarem dados, complete com hipóteses estratégicas coerentes.
-
-Use 2ª pessoa: "você".
-
-REGRAS IMPORTANTES
-
-Não seja genérico.
-
-Não explique o que está fazendo.
-
-Entregue como um especialista real.
-
-Use linguagem clara, estratégica e profissional.
-
-Foque em valor percebido e conversão.
-
-RESULTADO ESPERADO
-
-O resultado deve parecer um site premium, estratégico, pronto para implementação, com alto nível de qualidade.
-
-Agora crie o site completo com base nas informações fornecidas.
-```
-
-### Prompt para hero section com animação 3D no scroll
-
-Use este prompt quando o usuário pedir uma hero section cinematográfica com vídeo ou animação 3D no scroll.
-
-```text
-Create me a 3d scroll animation hero section based on the folder that has the skill.
-
-Here is the video: [COLE A ROTA DO VÍDEO AQUI]
-
-You must put the video inside the repository and tell Claude the exact path.
-
-Also include what your website is about and the contents you want to place on the page.
-
-Crie um site cinematográfico, moderno e altamente visual usando React, Tailwind, Framer Motion, Three.js e React Three Fiber.
-
-O site deve combinar elementos visuais premium, animações fluidas e interações avançadas para transmitir uma sensação de profundidade, tecnologia e sofisticação.
-
-Desenvolva uma página com fundo 3D interativo no tema "Inovação Espacial".
-
-No centro, inclua uma esfera de partículas que reage ao movimento do mouse.
-
-Sobreponha um menu minimalista e um bloco Glassmorphism com a visão da empresa.
-
-Use tons de azul profundo, preto e ciano neon.
-
-Crie uma experiência de storytelling visual com Parallax avançado usando Framer Motion, useScroll e useTransform.
-
-Inclua imagens em preto e branco, textos com destaque em amarelo neon e tipografias deslizando atrás das imagens com máscaras orgânicas.
-
-Adicione uma navegação lateral mostrando o progresso da jornada.
-
-O visual deve seguir uma estética ultra-minimalista inspirada no design suíço.
-
-Use bastante espaço negativo, layout assimétrico, linhas finas de 1px, transições suaves de fade entre seções e visual limpo sem sombras pesadas.
-
-Utilize tipografia forte com Space Grotesk para títulos, Inter/SF Pro para textos gerais e fonte mono para detalhes técnicos.
-
-Inclua uma interface de "Computação Espacial" inspirada no design da Apple.
-
-Use um fundo com gradiente dinâmico e cards Glassmorphism com reflexos internos, bordas brilhantes e profundidade visual.
-
-No hover, os cards devem reagir em 3D seguindo o cursor.
-
-Adicione ícones flutuando em diferentes camadas para criar sensação espacial.
-
-Desenvolva também um componente Three.js com um terreno infinito em wireframe animado por Vertex Shader com ruído Perlin.
-
-O usuário deve conseguir mover levemente a câmera com o mouse.
-
-Use linhas neon azuis sobre fundo preto e adicione fog para criar profundidade e atmosfera futurista.
-
-O site deve ser responsivo, performático e otimizado para mobile, reduzindo partículas e efeitos pesados quando necessário.
-
-A experiência final deve parecer cinematográfica, premium, futurista e pronta para uma marca de tecnologia, inovação ou produto digital de alto valor.
-```
-
-## Final Response Format
-
-Quando a skill entregar uma resposta completa, usar esta estrutura:
-
-1. Diagnóstico do projeto
-2. Nível recomendado
-3. Direção visual
-4. Estratégia de copy
-5. Estrutura da landing
-6. Copy completa
-7. Componentes recomendados
-8. Animações recomendadas
-9. Fontes usadas
-10. Plano de implementação
-11. Melhorias de conversão
-12. Estratégia de CTA externo / WhatsApp, se aplicável
-13. Selected Work + Case Deep-Dive, se Portfolio / Authority Mode estiver ativo
-14. Dashboard SaaS, se aplicável
-15. Plano 3D/WebGL, se aplicável
-16. Observações de performance/mobile
-
-Os blocos "Fontes usadas", "Estratégia de CTA externo / WhatsApp", "Selected Work" e "Plano 3D/WebGL" devem aparecer explicitamente quando aplicáveis.
-
-### Formato quando o usuário pedir análise + plano
-
-```markdown
-# Diagnóstico do projeto
-
-## Nível recomendado
-...
-
-## Direção estratégica da landing
-...
-
-## Referências e fontes usadas
-...
-
-## Componentes e animações escolhidos
-...
-
-## Estrutura da página
-...
-
-## Copy completa
-...
-
-## Direção visual
-...
-
-## Plano de implementação
-...
-
-## Melhorias de conversão
-...
-
-## Estratégia de CTA externo / WhatsApp (se aplicável)
-...
-
-## Selected Work + Case Deep-Dive (se Portfolio / Authority Mode ativo)
-...
-
-## Plano 3D/WebGL (se aplicável)
-...
-
-## Dashboard SaaS (se aplicável)
-...
-```
-
-### Formato quando houver implementação no repositório
-
-Entregar:
-
-1. breve diagnóstico;
-2. arquivos alterados/criados;
-3. comandos necessários;
-4. componentes usados;
-5. fontes usadas;
-6. como testar;
-7. observações de performance;
-8. próximos passos.
-
-Não esconder decisões importantes. Se uma biblioteca pesada foi adicionada, justificar.
-
-## Quality Bar
-
-O resultado final deve parecer:
-
-- premium;
-- estratégico;
-- moderno;
-- pronto para implementação;
-- orientado à conversão;
-- visualmente sofisticado;
-- criado por especialista;
-- adequado ao valor do projeto;
-- não genérico;
-- não amador;
-- não artificial.
-
-Sempre buscar aumentar: clareza, desejabilidade, credibilidade, valor percebido, diferenciação visual, conversão real.
-
-Nunca entregar uma landing page que pareça template sem posicionamento.
-
-### Final Rule
-
-A skill não deve apenas procurar componentes bonitos.
-
-A skill deve escolher componentes, animações, copy e direção visual com base em: objetivo da página, público-alvo, oferta, nível de consciência, ticket, sofisticação necessária, performance, clareza, marca, conversão, diferenciação.
-
-A entrega deve parecer um trabalho premium de estratégia, copywriting, design e implementação.
-
-### Self-check antes de fechar a entrega
-
-Antes de declarar a landing pronta, perguntar-se honestamente:
-
-- Eu **chamei o Magic MCP do 21st.dev** ou declarei que ele não estava disponível? Se não chamei nem declarei, voltar e fazer.
-- Eu **invoquei o v0 via v0-platform-mcp** ou declarei indisponível? Mesma regra.
-- Eu **inspecionei `/modelos lp/`** (ou pasta equivalente) do usuário antes de escrever shader/animação/hero?
-- Eu **pedi autorização para clones** das fontes autorizadas quando o efeito era específico (Ali Imam pra shader, React Bits pra animação)?
-- Cada componente que entreguei tem uma **fonte rastreável** (link 21st.dev, output v0, repo clonado, ou pasta do usuário), ou foi escrito do zero com declaração explícita?
-- Apliquei os 4 passes do **Audit Protocol** (Taste Skill cedo → Impeccable tarde → Cross-check com referências → Acessibilidade/Perf), ou declarei qual passe foi pulado e por quê?
-- O **Pass 4 (Acessibilidade + Performance)** foi executado? Esse passe nunca pode ser pulado.
-
-Se qualquer resposta for "não" sem justificativa declarada ao usuário, **a entrega não está pronta**. Voltar pro Source-First Protocol ou pro Audit Protocol conforme o caso.
-
-Esta skill é um agregador de fontes maduras. Reinventar shaders/animações/componentes do zero é o anti-pattern principal. Releia o `<EXTREMELY-IMPORTANT>` no topo deste arquivo se houver qualquer dúvida.
-
----
-
-# Source Link Directory
-
-## Component / Code Sources
-
-- React Bits: https://github.com/DavidHDev/react-bits.git
-- Cult UI Docs: https://www.cult-ui.com/docs
-- Cult UI GitHub: https://github.com/nolly-studio/cult-ui
-- Ali Imam: https://github.com/aliimam-in/aliimam.git
-- Watermelon UI: https://github.com/WatermelonCorp/watermellon-registry.git
-- StyleUI: https://github.com/heyfabrika/styleui.git
-- Skiper UI command: `npx shadcn add @skiper-ui/skiper40`
-- 21st.dev: https://21st.dev/
-- 21st.dev Magic MCP: https://21st.dev/magic
-- 21st.dev MCP: https://21st.dev/mcp
-- v0.app: https://v0.app/
-- v0 Community Search (catálogo via WebFetch): https://v0.app/community?q=<termo>
-- v0 Template direto: https://v0.app/templates/<id>
-- v0 API Keys (regenerar quando 401): https://v0.app/chat/settings/keys
-- v0 API Docs: https://v0.app/docs/en/docs/api
-
-## Reference Sources (taste, qualidade visual, motion)
-
-- Impeccable: https://github.com/pbakaus/impeccable.git
-- Taste Skill: https://github.com/Leonxlnx/taste-skill.git
-- Design Motion Principles: https://github.com/kylezantos/design-motion-principles.git
-- MotionSites: https://github.com/aayushsoam/motionsites.ai.git
-- Vibe Code Components: https://vibecodecomponents.com/
-
-## Visual Inspiration Sources
-
-- Landing Love: https://www.landing.love/
-- Godly: https://godly.website/
-- Design Spells: https://www.designspells.com/
-- Spline: https://spline.design/
-- Unicorn Studio: https://www.unicorn.studio/
-- Mobbin: https://mobbin.com/
-- ScreensDesign: https://screensdesign.com/
-- DesignVault: https://designvault.io/
+Estrategista autônomo de landing pages premium, UI SaaS e experiências visuais avançadas (React, Next.js, Tailwind, shadcn/ui, Framer Motion, Three.js, R3F). Este arquivo é o índice: só as regras sempre ativas ficam aqui. O detalhe de cada etapa vive em `references/` e deve ser lido apenas quando a etapa for executada.
+
+## Gate 1: Source-First (sempre, antes de qualquer código de UI)
+
+Esta skill existe porque escrever shaders, animações, hovers e componentes do zero NÃO é o caminho. O caminho é curar componentes, animações e shaders maduros de fontes profissionais (21st.dev via Magic MCP, v0.app, React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI, `modelos lp/` do usuário) e adaptar à marca.
+
+Regra absoluta: inspecione fontes reais, ofereça opções ao usuário, adapte à marca. Nunca recrie o que já existe maduro. Se uma fonte estiver indisponível (MCP offline, sem rede, sem permissão pra clone), declare isso explicitamente ao usuário antes de cair pro fallback de criar do zero. Nunca cair pro fallback silenciosamente. O mandato completo (anti-patterns e required pattern) está no topo de [source-first-protocol](references/source-first-protocol.md).
+
+## Gate 2: classificar o nível do site (sempre, antes de recomendar componentes)
+
+Se faltarem dados essenciais, fazer no máximo 5 perguntas estratégicas: (1) negócio/produto/oferta, (2) público-alvo, (3) objetivo principal da página, (4) nível visual desejado, (5) referências visuais existentes. Se o usuário não responder tudo, continuar com hipóteses estratégicas coerentes. Regra mestra: perguntar, inferir, executar.
+
+Classificar o projeto em um dos 5 níveis (regras, motion permitido/proibido e budget por nível em [site-levels](references/site-levels.md)):
+
+1. Basic Site: Clean Motion
+2. Intermediate Site: Polished Motion
+3. Advanced Site: Premium Motion
+4. 3D High-End Site: Cinematic Motion
+5. 3D High-End Site, modo Signature 3D Experience: Maximum Wow
+
+## Fluxo de alto nível
+
+1. Analisar contexto do projeto e do negócio; aplicar a regra de autonomia.
+2. Classificar o nível do site (Gate 2).
+3. Definir direção visual e stack.
+4. Decidir modos extras: dashboard SaaS e/ou Portfolio / Authority Mode.
+5. Checkpoints de fontes: inventário interno, Source-First Protocol completo e confirmação do usuário sobre as fontes escolhidas (Gate 1). Nunca pular silenciosamente.
+6. Se nível 4 ou 5: handoff pro `motion-3d-director` antes de implementar.
+7. Escrever copy completa e estrutura da página.
+8. Plano de implementação (handoff pro `implementation-planner` quando aplicável).
+9. Audit Protocol: 4 passes de qualidade antes de declarar pronto (Pass 4 nunca pode ser pulado).
+10. Entregar no formato de resposta final e rodar o self-check.
+
+## Mapa de references (ler sob demanda)
+
+| Para... | Leia |
+|---|---|
+| Papel completo da skill, regra de autonomia, Project Intelligence Mode | [core-goal](references/core-goal.md) |
+| Os 5 níveis do site, motion budget, Signature 3D em detalhe | [site-levels](references/site-levels.md) |
+| Handoffs pro motion-3d-director e implementation-planner, regra final do ladder | [handoffs](references/handoffs.md) |
+| SaaS Dashboard Mode e Portfolio / Authority Site Mode | [dashboard-and-portfolio-modes](references/dashboard-and-portfolio-modes.md) |
+| Processo obrigatório de 12 passos e checkpoint de honestidade | [mandatory-process](references/mandatory-process.md) |
+| Source-First Mandate completo + protocolo em 5 fases (inventário, Magic MCP, v0, repos em cache, confirmação) | [source-first-protocol](references/source-first-protocol.md) |
+| Audit Protocol: Pass 1 Taste, Pass 2 Impeccable, Pass 3 Cross-check, Pass 4 A11y/Perf | [audit-protocol](references/audit-protocol.md) |
+| Fontes de componentes (React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI, 21st.dev, v0.app), fontes de referência e inspiração visual, Clone Policy, Paid Source Policy | [component-sources](references/component-sources.md) |
+| Stack default, direção visual, paletas, tipografia e regras de seleção de animação | [stack-and-visual-direction](references/stack-and-visual-direction.md) |
+| Estrutura obrigatória da landing, case studies/portfolio, copywriting, conversão e CTA externo/WhatsApp | [landing-page-strategy](references/landing-page-strategy.md) |
+| Prompts base (landing completa e hero 3D com scroll) | [prompt-templates](references/prompt-templates.md) |
+| Formato de resposta final, Quality Bar e self-check antes de fechar a entrega | [output-format-and-quality](references/output-format-and-quality.md) |
+| Links diretos de todas as fontes autorizadas | [source-links](references/source-links.md) |
+
+Regra final: nunca colocar chaves reais dentro da skill (só variáveis de ambiente) e nunca entregar uma landing que pareça template sem posicionamento.