wizz-method 1.17.0 → 1.18.1

package/src/skills-lib/premium-landing-ui-researcher/references/component-sources.md

@@ -4,70 +4,26 @@ Priorizar fontes gratuitas, open source, públicas, registry-based ou fornecidas
 
 Não depender de fontes pagas como parte central do fluxo.
 
-Fluxo recomendado de pesquisa (gratuito primeiro; 21st.dev é PAGO e entra como complemento):
+Fluxo de pesquisa (fontes públicas primeiro; registrar evidências conforme [source-first-protocol](source-first-protocol.md)):
 
 1. referências enviadas pelo usuário (`modelos lp/`, prints, links);
 2. repositórios open source autorizados: cache central em `~/.claude/design-sources/` (React Bits, Cult UI, Ali Imam, Watermelon, StyleUI) + Skiper UI via shadcn + Componentry (componentry.dev, gratuito, React animado);
 3. registries shadcn públicos;
 4. fontes de taste/motion (Impeccable, Taste Skill, Design Motion Principles, MotionSites, Vibe Code Components, Refero Styles com DESIGN.md gratuito);
 5. fontes visuais abertas (Landing Love, Godly, Design Spells, Mobbin, Refero, ScreensDesign, DesignVault, Spline, Unicorn Studio);
-6. 21st.dev (fonte PAGA, complementar, com aprovação do usuário): Magic MCP (`mcp__magic__*`) e 21st CLI (`21st search`/`get`/`add`, registry do time);
-7. hipóteses estratégicas coerentes, quando não houver acesso externo.
+6. hipóteses estratégicas coerentes, quando não houver acesso externo.
 
-## 21st.dev / Magic MCP
+## Evidências de mineração
 
-Esta skill deve usar 21st.dev diretamente quando MCP/API estiver disponível.
+Para cada recomendação, abra a demo e o código/registry do item exato. Registre busca, URL/path, revisão ou data, licença, dependências, compatibilidade e motivo de seleção ou rejeição. Não invente nomes de arquivos nem use a homepage de um catálogo como prova de que um componente foi encontrado.
 
-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.
-
-## 21st CLI: busca, inspeção e registry do time
-
-O v0 saiu do fluxo (não é mais usado). A **CLI oficial do 21st.dev** cobre busca, inspeção, instalação e publicação, direto do terminal, com o registry do time (`@wizzdigitalagency`).
-
-**Setup (uma vez):** `npm i -g @21st-dev/cli` + `21st login` (browser; em CI usar env `API_KEY_21ST`). As skills oficiais (`21st-cli-use`, `21st-registry`, `21st-design-sync`) instalam com `npx @21st-dev/cli install-skill` e ensinam o agente a publicar/editar/instalar sozinho.
-
-**Fluxo de mineração (3 passos):**
-
-1. **Buscar:** `21st search "<termo>"` (ex: `pricing table`, `hero glass`, `testimonials`), com `--type component|theme|template` quando fizer sentido.
-2. **Inspecionar:** `21st get <id>` pra ver o item antes de decidir; `21st bookmarks` lista os salvos do usuário.
-3. **Instalar/adaptar:** `21st add <user>/<slug>` ou `npx shadcn@latest add https://21st.dev/r/<user>/<slug>`; depois adaptar tokens/tipografia à marca (nunca colar cru).
-
-**Publicar de volta (registry do time):** componente maduro adaptado à marca vira ativo reutilizável: `21st publish ./Componente.tsx --to default` (multi-arquivo via `21st.json`). Temas: `21st publish-theme`. Ver skill `21st-registry`.
-
-**Complemento, não substituto, do Magic MCP:** o Magic MCP continua sendo o caminho de GERAÇÃO/refino assistido (inspiration/builder/refiner); a CLI é o caminho de CATÁLOGO/registry. Se o MCP estiver offline ou sem `MAGIC_API_KEY`, a CLI é o fallback declarado.
+Use o browser disponível para verificar animações e estados quando possível. Se a fonte estiver indisponível, registre isso e continue pelas outras fontes. Inspiração visual e código reutilizável têm critérios de evidência diferentes.
 
 **Overlap com modelos locais:** inspecionar a pasta `modelos lp/` do usuário primeiro; o que já foi minerado e salvo localmente não precisa de rede.
 
 ## Authorized Component / Code Inspection Sources
 
-Estas fontes podem ser clonadas temporariamente, com permissão do usuário, para inspecionar componentes, exemplos ou registries.
+Estas fontes são candidatas à pesquisa; verifique disponibilidade e licença do item escolhido. Siga a Clone Policy abaixo para inspecionar componentes, exemplos ou registries.
 
 ### React Bits
 
@@ -77,7 +33,7 @@ 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.
+Verificar a licença do item/revisão: em 2026-09-06 o [LICENSE.md](https://github.com/DavidHDev/react-bits/blob/0e69e737242df1d257b4e5e399b01ae1d7901375/LICENSE.md) declara MIT + Commons Clause. Código público não equivale a MIT sem restrições adicionais. Não recomendar nem listar componentes React Bits Pro como dependência obrigatória.
 
 ### Cult UI
 
@@ -100,7 +56,7 @@ 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.
+Se a estrutura do repositório estiver incerta: inspecionar docs primeiro e não assumir nomes de componentes sem verificar.
 
 ### Watermelon UI
 
@@ -128,7 +84,7 @@ Usar para: templates, landing page layouts, páginas prontas, seções instaláv
 ### Animmaster Lib
 
 - Site: https://animmasterlib.dev/ — **fonte PAGA** (300 componentes animados PRO, HTML/CSS/JS/React/Next)
-- Mesmo gate de custo do 21st.dev: só com aprovação do usuário, quando as gratuitas não cobrirem
+- Só usar com acesso/custo autorizado, quando as fontes públicas não cobrirem
 - O que o usuário já comprou/baixou dela vale como recurso local (inspecionar em `modelos lp/`)
 
 ### Bklit UI
@@ -319,32 +275,9 @@ Não prometer código pronto quando a fonte for apenas visual. Não copiar visua
 
 ## 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.
+Siga a fase de cache de [source-first-protocol](source-first-protocol.md). Prefira arquivos públicos, docs e registry; clone em diretório isolado apenas quando necessário à pesquisa autorizada. Confira origem, revisão e alterações locais antes de atualizar um cache. Nunca sobrescreva trabalho local nem execute scripts do repo para apenas inspecionar código.
 
-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.
+Use somente os componentes necessários; preserve licença e atribuições. O clone de pesquisa não vira dependência permanente do app.
 
 ## Paid Source Policy
 
@@ -358,8 +291,7 @@ Remover dependência obrigatória de:
 - Cult UI Pro;
 - Skiper UI premium;
 - Spline pago;
-- Unicorn Studio pago;
-- planos pagos do 21st.dev como obrigação (o fluxo funciona no free tier).
+- Unicorn Studio pago.
 
 Usar ferramentas pagas apenas se:
 
@@ -371,4 +303,3 @@ Usar ferramentas pagas apenas se:
 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.
-

package/src/skills-lib/premium-landing-ui-researcher/references/core-goal.md

@@ -11,10 +11,9 @@ A skill deve:
 - 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 a 21st CLI (`21st search` / `21st get` / `21st add`) para descoberta e instalação de componentes de referência;
+- abrir e inspecionar demos, código e registries públicos, registrando evidências de pesquisa;
 - usar repositórios autorizados como fonte de pesquisa;
-- clonar temporariamente repositórios autorizados apenas quando necessário e com permissão;
+- clonar temporariamente repositórios autorizados em diretório isolado apenas quando necessário à pesquisa autorizada;
 - 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;
@@ -59,4 +58,3 @@ Se o usuário não responder tudo, continuar com hipóteses estratégicas coeren
 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.
-

package/src/skills-lib/premium-landing-ui-researcher/references/mandatory-process.md

@@ -7,9 +7,9 @@ Sempre seguir este processo. **Os passos 6, 7 e 8 são CHECKPOINTS DE FONTES e d
 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 em references/source-first-protocol.md: 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.
+6. **CHECKPOINT: Inventário de fontes do usuário.** Listar e inspecionar (ls + leitura mínima de READMEs/package.json) o projeto atual e os modelos nos caminhos fornecidos pelo usuário; reutilizar o resumo de memória do handoff. Identificar quais componentes/efeitos do que ele já tem podem ser reutilizados antes de qualquer fonte externa.
+7. **CHECKPOINT: Source-First Protocol (obrigatório).** Execute [source-first-protocol](source-first-protocol.md): busque fontes públicas, abra demos e código/registry, confira revisão, licença e dependências. Registre evidências e falhas no artefato de pesquisa; mostre 1–3 candidatos reais por componente.
+8. **CHECKPOINT: Escolher fontes.** Recomende a combinação adequada. Com direção e implementação já autorizadas, prossiga; pergunte apenas se faltar uma decisão material.
 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).
@@ -20,9 +20,9 @@ Sempre seguir este processo. **Os passos 6, 7 e 8 são CHECKPOINTS DE FONTES e d
 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?
+- Eu abri as fontes exatas e registrei código/registry, revisão/data, licença e dependências?
+- Eu documentei candidatos aceitos/rejeitados e eventuais fontes indisponíveis?
+- O componente que estou prestes a escrever do zero ficou sem alternativa compatível nas fontes efetivamente pesquisadas, com justificativa registrada?
 
 Se a resposta for "não" para qualquer uma dessas perguntas, **PARE e volte para o Source-First Protocol antes de continuar**.
 
@@ -33,4 +33,3 @@ Se a resposta for "não" para qualquer uma dessas perguntas, **PARE e volte para
 **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.
-

package/src/skills-lib/premium-landing-ui-researcher/references/output-format-and-quality.md

@@ -114,11 +114,10 @@ A entrega deve parecer um trabalho premium de estratégia, copywriting, design e
 
 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 **usei a 21st CLI (search/get/add)** ou declarei indisponível? Mesma regra.
+- Eu **abri demos e código/registry dos componentes recomendados** e registrei buscas, URLs/paths, revisão/data, licença, dependências e motivo da escolha?
 - 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?
+- Eu registrei fontes indisponíveis e usei cache sem sobrescrever alterações locais?
+- Cada componente que entreguei tem uma **fonte rastreável** (URL exata de código/registry, revisão do repo ou arquivo local), 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.
 

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

@@ -1,146 +1,65 @@
-<EXTREMELY-IMPORTANT>
+# Source-First Protocol
 
-## Source-First Mandate (read this FIRST, every time)
+Antes de implementar UI não trivial, pesquise componentes reais e adapte-os à marca. O catálogo de fontes é um ponto de partida; citar um catálogo sem abrir o item não conta como pesquisa.
 
-**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** (modelos lp do usuário, React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI e, como fonte PAGA complementar, 21st.dev) e **adaptar à marca**.
+## Fase 1: Inventário do projeto
 
-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.
+1. Inspecione dependências, tokens, componentes e animações existentes.
+2. Procure `modelos lp/` ou equivalente dentro do projeto e nos caminhos já fornecidos pelo usuário. Use `rg --files`; não varra a home inteira para encontrar referências.
+3. Consulte decisões já disponíveis no handoff. Reutilize ativos locais compatíveis antes de buscar fora.
 
-### Anti-pattern (NUNCA fazer)
+Registre paths reais dos recursos encontrados. Se não houver modelos locais, prossiga com fontes públicas.
 
-- ❌ 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
+## Fase 2: Buscar e inspecionar fontes públicas
 
-### Required pattern (SEMPRE fazer)
+Escolha fontes pelo efeito necessário, usando [component-sources](component-sources.md) e [source-links](source-links.md):
 
-Antes de escrever qualquer linha de código de UI, executar o **Source-First Protocol** (definido abaixo). A regra absoluta é:
+| Necessidade | Fontes iniciais |
+|---|---|
+| Texto animado, backgrounds, hover, partículas | React Bits, Componentry |
+| Seções de marketing, cards, botões | Cult UI, registries públicos shadcn |
+| Shader, liquid/ripple, WebGL experimental | Ali Imam, exemplos públicos compatíveis |
+| Dashboard e visualização de dados | Watermelon UI, Bklit UI |
+| Layout base | StyleUI, componentes existentes |
+| Carousel | Embla, shadcn/ui |
+| Direção visual e motion de referência | Sites fornecidos, Landing Love, Godly, Design Spells, Refero Styles |
 
-> **Inspecione fontes reais → ofereça opções ao usuário → adapte à marca. Nunca recrie o que já existe maduro.**
+Para cada componente não trivial:
 
-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.
+1. Formule uma busca concreta com função, estilo e stack; consulte pelo menos duas fontes adequadas quando disponíveis.
+2. Abra o item exato: demo, documentação e arquivo de código ou JSON do registry. Resultado de busca sozinho não prova compatibilidade.
+3. Inspecione imports, dependências, API, licença e variante de stack. Para documentação atual de biblioteca/CLI, use Context7; se indisponível, documentação oficial.
+4. Quando o comportamento visual importar, veja a demo com a ferramenta de browser disponível. Registre se a avaliação foi somente estática; nunca declare hover/scroll/mobile testado sem executá-lo.
+5. Se uma URL falhar, busque o endereço oficial atualizado. Se continuar inacessível, registre a falha e tente outra fonte. Não interrompa a pesquisa só porque um serviço opcional falta.
 
-</EXTREMELY-IMPORTANT>
+Componentes pagos só entram com acesso/custo já autorizado. Sites de inspiração não são fonte de código nem concedem licença de cópia.
 
-## Source-First Protocol
+## Fase 3: Cache e obtenção do código
 
-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.
+Cache existente de design (por exemplo `~/.claude/design-sources/`) pode ser inspecionado. Não o trate como atualizado só por existir:
 
-### Fase 1: Inventário interno (sem dependência externa)
+- Confira origem, branch, revisão e mudanças locais antes de atualizar.
+- Consulte a revisão remota quando houver rede; data de modificação da pasta não é prova de atualização.
+- Não rode `git pull`, reset ou checkout automaticamente sobre cache com alterações locais. Use uma cópia isolada ou leia o arquivo remoto.
+- Prefira docs, arquivos públicos e registry antes de clonar. Quando necessário à pesquisa autorizada, use `mktemp -d` para uma cópia isolada; não execute scripts do repositório para apenas ler código.
+- Copie somente os arquivos necessários e preserve os avisos de licença. Não adicione o repositório inteiro como dependência do app.
 
-Antes de qualquer rede ou MCP, inspecionar o que o usuário já tem:
+Sem rede, use as referências locais e declare a revisão conhecida e a limitação de atualização.
 
-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.
+## Fase 4: Evidência e escolha
 
-Saída desta fase: lista de **componentes, libs e padrões reaproveitáveis** com path absoluto.
+Registre no artefato de design existente (ou crie `design-research.md` na pasta de planejamento do projeto):
 
-### Fase 2: Busca nos repos de referência (cache central primeiro) — FASE PADRÃO
+| Seção/componente | Busca e fonte | Demo + código exato | Revisão/data | Licença + dependências | Evidência visual | Escolha e adaptação |
+|---|---|---|---|---|---|---|
+| Item realmente inspecionado | Termos usados e catálogo | URLs ou paths reais | SHA/tag; data se não houver versão | Verificadas ou pendentes | Testado / estático / indisponível | Aceito/rejeitado e motivo |
 
-Para cada efeito visual ainda não resolvido pela fase 1, 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.
+Inclua também buscas sem resultado e fontes indisponíveis. Nunca preencha nomes de componentes, paths, licença ou resultados de teste por suposição.
 
-**Mapa de decisão "preciso disso → fonte":**
+Mostre 1–3 candidatos compatíveis por componente, com recomendação e custo de adaptação. Se o usuário já autorizou a implementação e definiu a direção, escolha o melhor dentro desse escopo e prossiga. Pergunte somente quando faltar decisão material de direção, acesso pago ou mudança de escopo.
 
-| 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) |
-| Charts / data viz / seções de métricas / gráficos de dashboard | **Bklit UI** | `npx shadcn@latest add @bklit/<chart>` (sem clone, registry shadcn) |
-| Scroll storytelling / pinning / timelines cinematográficas / SplitText | **GSAP** (lib npm, 100% gratuita desde a v3.13) | `npm i gsap @gsap/react` (sem clone) |
-| Microinterações imperativas leves / stagger / SVG motion / contadores | **anime.js v4** (lib npm, MIT) | `npm i animejs` (sem clone) |
+## Fase 5: Adaptar e verificar
 
-**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 3: Magic MCP do 21st.dev (fonte PAGA, complementar)
-
-**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
-
-**Gate de custo:** o 21st.dev é plano PAGO. Esta fase só roda quando as fases 1-2 não cobrirem o efeito/section necessário E com aprovação do usuário. Não é mais mínimo obrigatório.
-
-**Quando chamar (se aprovado):**
-
-- 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 4: 21st CLI (catálogo e registry — fonte PAGA, complementar)
-
-O v0 foi removido do ecossistema. Mesmo gate de custo da Fase 3: plano pago, usar só quando as fases gratuitas não cobrirem e com aprovação do usuário. Componente do time já publicado no registry conta como recurso já pago: pode usar sem novo gate.
-
-**Fluxo resumido:**
-
-1. Checar a CLI: `command -v 21st`. Se ausente, propor (opt-in, nunca auto-rodar): `npm i -g @21st-dev/cli && npx @21st-dev/cli install-skill` e `21st login` com o usuário.
-2. Buscar: `21st search "<termo>"` (`--type component|theme|template`); inspecionar com `21st get <id>`.
-3. Instalar o escolhido no projeto: `21st add <user>/<slug>` ou `npx shadcn@latest add <url do item>`; adaptar à marca.
-4. Componente do time já publicado no registry `@wizzdigitalagency` tem prioridade sobre item público equivalente.
-
-
-
-Se a CLI não estiver instalada e o usuário recusar o install: declarar e seguir pra Fase 5 (confirmação), nunca criar do zero em silêncio.
-
-### 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: buscar/instalar alternativa via 21st CLI (`21st search` + `21st add`)
-
-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**.
+Adapte tokens, tipografia, espaçamento, conteúdo e motion ao projeto. Verifique responsividade, teclado, foco, contraste, reduced-motion e custo de renderização conforme o componente. Vincule o resultado às fontes registradas.
 
+Criar do zero é aceitável para primitivas triviais ou quando a pesquisa documentada não encontrar opção compatível e a implementação estiver autorizada. Explique o motivo. Não declare que algo não existe em nenhum catálogo; relate apenas as fontes efetivamente pesquisadas.

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

@@ -14,14 +14,6 @@
 - Componentry (React animado, gratuito/open source, Vercel OSS): https://componentry.dev/
 - Componentry MCP (via shadcn MCP + registry `@componentry`): https://componentry.dev/docs/mcp
 - Animmaster Lib (300 componentes animados, PAGO): https://animmasterlib.dev/
-- 21st.dev: https://21st.dev/
-- 21st.dev Magic MCP: https://21st.dev/magic
-- 21st.dev MCP: https://21st.dev/mcp
-- 21st CLI (buscar/instalar/publicar via terminal): `npm i -g @21st-dev/cli` + `21st login`
-- 21st CLI skills oficiais (21st-cli-use, 21st-registry, 21st-design-sync): `npx @21st-dev/cli install-skill`
-- 21st busca: `21st search "<termo>" [--type component|theme|template]` + `21st get <id>`
-- 21st instalação: `21st add <user>/<slug>` ou `npx shadcn@latest add https://21st.dev/r/<user>/<slug>`
-- 21st API keys (CI/headless, env API_KEY_21ST): https://21st.dev/settings/api-keys
 
 ## Animation Engine Libraries (npm)
 

package/src/skills-lib/tracking-audit/SKILL.md

@@ -0,0 +1,78 @@
+---
+name: tracking-audit
+description: Auditoria e diagnóstico de rastreamento de resposta direta em dois modos. Modo implantação valida pixel, CAPI, domínio verificado, eventos priorizados, template de UTM com ID, repasse do parâmetro nativo pelo checkout, higiene de nomenclatura e compra-teste por caminho. Modo diagnóstico lê as transições do funil contra a régua, separa problema de medição de problema de conversão e diz qual transição está furando. Use quando alguém perguntar "por que a venda não bate com o gerenciador", "onde está furando o funil", "meu pixel está certo?", "as UTMs estão corretas?", "o tráfego orgânico está inflado", "qual dado falta pra eu decidir", ou antes de subir campanha nova. NÃO use para desenhar plano de medição de SaaS/produto (use analytics-tracking), para decidir bid e orçamento (use paid-ads) nem para criar a oferta (use wizz-offer-forge).
+---
+
+# Tracking Audit
+
+Auditoria de rastreamento para oferta de resposta direta. Uma hora aqui evita 30 dias de campanha medida errado.
+
+A skill faz duas coisas e nada além: **valida o que foi instalado** e **diz onde o funil está furando**. Ela não cria oferta, não decide bid e não escreve copy.
+
+## Passo 0 — Achar a régua (obrigatório, sempre)
+
+Benchmark sem origem é chute. Antes de qualquer análise, resolva de onde vêm os números, nesta ordem:
+
+1. **Skill `lowticket-metodologia` instalada?** Se sim, ela tem precedência. Leia a entrada de diagnóstico de funil no INDEX dela e use os benchmarks de lá. Declare na resposta: "régua: metodologia low ticket".
+2. **O projeto tem histórico próprio?** Trinta dias de dados reais do mesmo público valem mais que qualquer benchmark de mercado. Use a mediana do próprio histórico como linha de base.
+3. **Nenhum dos dois?** Peça ao usuário. Não invente faixa, não use número de memória, não cite benchmark sem dizer de onde saiu.
+
+> Regra anti-invenção: todo número que aparecer no relatório tem fonte declarada, ou vira PENDÊNCIA. Um relatório com faixa inventada é pior que nenhum relatório, porque parece medido.
+
+## Escolher o modo
+
+| O pedido é... | Modo | Referência |
+|---|---|---|
+| Vou subir campanha, está tudo instalado? | implantação | `references/modo-implantacao.md` |
+| Está rodando e o número não fecha | diagnóstico | `references/modo-diagnostico.md` |
+| A venda não bate com o gerenciador | diagnóstico, começando por atribuição | `references/utm-e-atribuicao.md` |
+| Como monto as UTMs desta conta | implantação, só a parte de tags | `references/utm-e-atribuicao.md` |
+
+Em dúvida entre os dois: se existe dado rodando, é diagnóstico. Implantação é para o que ainda não subiu.
+
+## Os princípios que decidem no empate
+
+- **O banco próprio é a fonte de verdade.** Gerenciador e Analytics perdem venda (bloqueador, iOS, cookie recusado). O número oficial vem do banco alimentado por webhook da plataforma de pagamento. Quando as duas fontes divergem, a divergência é o achado, não um erro de leitura.
+- **O pixel mede o pixel.** Connect rate é o instante em que o `PageView` dispara, não o instante em que a pessoa vê a oferta. Subir o pixel sem consertar a página é maquiagem de métrica.
+- **Atribuir por ID, não por nome.** A UTM carrega nome e ID. Renomear campanha não pode quebrar a atribuição.
+- **Orgânico não é canal, é ausência de UTM.** O balde "organic" é destaque sem tag, direct e recompra. Taguear tudo e ver o orgânico cair é a prova da origem real.
+- **Higiene de nomenclatura é infraestrutura.** Nome de campanha sujo não se conserta depois: a plataforma continua servindo o nome antigo em cache para o que já foi entregue.
+- **Diagnóstico é do fim para o começo.** Sempre. Recuperar venda iniciada é dinheiro que já era seu; mexer em criativo com checkout furando é desperdício.
+
+## Entradas que a auditoria precisa
+
+Peça de uma vez, não uma por uma:
+
+- URL da página de vendas e da página de checkout
+- Plataforma de checkout e de pagamento
+- Print ou export do gerenciador com: cliques no link, visitas à página, checkouts iniciados, compras, valor gasto, valor atribuído
+- Acesso (ou print) do painel de atribuição, quando existir
+- O template de UTM que está colado hoje no campo de parâmetros de URL
+
+Faltou item: siga com o que dá e liste o que falta em PENDÊNCIAS. Nunca preencha buraco de dado com estimativa.
+
+## Saída
+
+Um relatório em markdown, sempre com estas quatro partes:
+
+1. **Achados por severidade.** `CRÍTICO` (o dado está errado e a decisão em cima dele também), `ALTO` (perde venda ou perde atribuição), `MÉDIO` (higiene, vai doer depois), `BAIXO` (melhoria).
+2. **A transição que está furando**, com a taxa real calculada e a régua ao lado, sempre com a fonte da régua.
+3. **O que consertar, em ordem**, seguindo a hierarquia do modo diagnóstico. Um item por linha, com quem resolve (dev, checkout, criativo, página).
+4. **Plano de tags pronto para colar**, quando o modo for implantação ou quando a auditoria encontrar UTM errada.
+
+Feche com **PENDÊNCIAS**: o que não deu para verificar e o que precisa de acesso ou de dado que não veio.
+
+## Ferramentas
+
+- Inspeção de página: CLI `agent-browser`. Nunca Playwright.
+- Nada mais é obrigatório. A auditoria funciona lendo print e página.
+
+## Quando delegar
+
+| Situação | Vai para |
+|---|---|
+| O furo é a página (LCP, mobile, blocos) | `page-cro` |
+| O furo é o criativo | `ad-creative` |
+| O furo é bid, orçamento ou estrutura de campanha | `paid-ads` |
+| Precisa desenhar medição de produto ou SaaS | `analytics-tracking` |
+| A oferta em si não fecha | `wizz-offer-forge` |

package/src/skills-lib/tracking-audit/references/modo-diagnostico.md

@@ -0,0 +1,72 @@
+# Modo diagnóstico
+
+Está rodando e o número não fecha. Este modo descobre **qual transição está furando** e separa problema de medição de problema de conversão.
+
+Régua: leia o Passo 0 do `SKILL.md`. Cada faixa citada no relatório declara de onde veio.
+
+## As 5 transições
+
+Base do funil é a visita à página, igual a 100%. A taxa real de cada transição é a etapa dividida pela **anterior**, nunca pela base.
+
+| # | Transição | O que ela revela |
+|---|---|---|
+| 1 | Cliques no anúncio → Visitas na página | Saúde técnica: velocidade, redirect, SSL, mobile, disparo do `PageView` |
+| 2 | Visitas → Checkout iniciado | Casamento entre criativo, página e oferta |
+| 3 | Checkout iniciado → Venda iniciada | Atrito de checkout: campos, meios de pagamento, frete, taxa surpresa |
+| 4 | Venda iniciada → Aprovada (PIX) | Recuperação: lembrete, prazo, instrução |
+| 5 | Venda iniciada → Aprovada (cartão) | Recusa: antifraude, parcelamento, emissor |
+
+Sempre diagnosticar **do fim para o começo**.
+
+## Hierarquia do que atacar primeiro
+
+Se dá para mexer em uma coisa só:
+
+1. **Venda iniciada → aprovada.** O ROI mais rápido do funil. Esse dinheiro já era seu.
+2. **Checkout iniciado → venda iniciada.** Ajuste barato, ganho grande.
+3. **Visitas → checkout.** Página e criativo. Mais lento e mais caro; só depois que o checkout está resolvido.
+4. **Cliques → visitas.** Técnico. Chama dev.
+
+Ordem de prioridade das métricas: vendas > checkout iniciado > CPC > hook rate > hold rate > CPM. Não se mexe em CPC se a página não converte. Não se mexe em CPA se o checkout está furando.
+
+## Medição contra conversão
+
+Antes de dizer "a conversão caiu", prove que a **medição** está de pé. As três perguntas:
+
+| Sintoma | Se for medição | Se for conversão |
+|---|---|---|
+| Cliques muito acima das visitas | `PageView` não dispara, ou dispara tarde | Página fora do ar, redirect quebrado |
+| Venda no banco e não no gerenciador | Falta CAPI, falta domínio verificado, iOS | Nada: a venda existe |
+| Venda no gerenciador e não no banco | Deduplicação ausente, evento duplicado | Nada: a venda não existe |
+| Orgânico subindo sozinho | Rota sem UTM | Recompra e boca a boca de verdade |
+| Atribuição some ao renomear campanha | Atribuição por nome, não por ID | Nada |
+
+Regra prática: se as duas fontes discordam, a discordância **é** o achado. Nunca escolha a fonte que confirma a tese.
+
+## Qual dado falta para decidir
+
+Parte do trabalho é dizer o que não dá para responder ainda. Formato:
+
+```
+PENDÊNCIA: não dá para separar atrito de checkout de desistência de preço.
+Falta: evento AddPaymentInfo.
+Custo de instalar: baixo.
+O que muda quando existir: a transição 3 vira duas, e o conserto deixa de ser chute.
+```
+
+Nunca invente o número que falta. Um "provavelmente uns 30%" contamina a decisão inteira.
+
+## ROI verdadeiro contra ROI falso
+
+- **ROI falso:** valor atribuído pelo gerenciador dividido pelo gasto do gerenciador. Conta venda que não entrou e ignora venda que entrou sem atribuição.
+- **ROI verdadeiro:** faturamento aprovado no banco próprio, menos taxa da plataforma e menos reembolso, dividido pelo gasto real do período.
+
+Sempre reporte os dois lado a lado. A diferença entre eles é o tamanho do buraco de medição.
+
+## Leitura de print do gerenciador
+
+Métricas que precisam aparecer no print para o diagnóstico rodar:
+
+cliques no link, visualizações da página, checkouts iniciados, compras (ou resultados quando a campanha otimiza para compra), valor gasto, valor atribuído.
+
+Faltou alguma: diga qual e o que ela impede de calcular. Não estime.