wizz-method 1.4.0 → 1.5.0

package/src/skills-lib/premium-landing-ui-researcher/references/site-levels.md

@@ -0,0 +1,515 @@
+## 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.
+
+---
+
+## 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.
+```
+

package/src/skills-lib/premium-landing-ui-researcher/references/source-first-protocol.md

@@ -0,0 +1,144 @@
+<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>
+
+## 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` em references/component-sources.md 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**.
+

package/src/skills-lib/premium-landing-ui-researcher/references/source-links.md

@@ -0,0 +1,39 @@
+
+# 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/