wizz-method 1.5.2 → 1.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "wizz-method",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "Wizz Method — método de agência orientado por IA em PT-BR (fork independente do BMad Method)",
   "keywords": [
     "agile",

package/skills-registry.yaml

@@ -138,6 +138,10 @@ areas:
           env:
             API_KEY: "${MAGIC_API_KEY}"
     clis:
+      - id: 21st-cli
+        when: "Fonte PAGA complementar (catálogos gratuitos como React Bits/Cult UI/Componentry vêm primeiro; gate de aprovação do usuário). Buscar, inspecionar, instalar e publicar componentes no 21st.dev via terminal (search/get/add/publish, registry do time @wizzdigitalagency). Complementa o Magic MCP (geração assistida); é o caminho de catálogo/registry e o fallback declarado quando o MCP está offline. O install traz também as skills oficiais 21st-cli-use, 21st-registry e 21st-design-sync. Login interativo: `21st login` (em CI usar env API_KEY_21ST)."
+        check: "command -v 21st"
+        install: "npm i -g @21st-dev/cli && npx @21st-dev/cli install-skill"
       - id: hyperframes
         when: "Renderizar vídeo a partir de HTML/CSS/animação (HTML→MP4, agent-native, 20+ skills). Alternativa HTML-nativa ao Remotion (que é React). Precisa ffmpeg + Node 22 + Chrome headless."
         # Gate de plataforma (2026-07-08): o `install` virou clone+checkout
@@ -491,6 +495,13 @@ mcp_utility:
 cli_utility:
   - id: rtk
     when: "Token economy: proxy que corta 60-90% de tokens em comandos de dev. O wizz-router assume RTK ativo (Passo 0). Útil em todo o ecossistema."
+    # recommended (2026-07-08): o wizz-router assume RTK ativo no Passo 0, então
+    # o rtk vem PRÉ-MARCADO no multiselect de CLIs (initialValues) em vez de
+    # desmarcado como os demais. Continua opt-in — o install roda `curl | sh`,
+    # logo o usuário ainda vê a seleção e pode desmarcar. Só muda o default de
+    # "vazio" pra "rtk marcado", nunca instala à revelia (--yes/non-TTY seguem
+    # recommend-only). É a única CLI cross-cutting; as de área ficam opt-out.
+    recommended: true
     # min_version formal (2026-07-07, M27) substitui o sort -V embutido no
     # shell que existia aqui antes: auditoria 2026-07-07 (C4/RT1) achou 0.30.1
     # instalado vs v0.43.0 pinado, invisível ao check anterior a ele (`rtk

package/src/skills-lib/motion-3d-director/references/motion-paths.md

@@ -27,7 +27,7 @@ Usar quando precisa de **interação real**.
 - Drei;
 - GLSL / shaders;
 - Framer Motion ou Motion para integração com scroll;
-- GSAP apenas se necessário.
+- GSAP (ScrollTrigger) quando o scroll orquestra a cena — 100% gratuito desde a v3.13, todos os plugins incluídos.
 
 **Exemplos:** objeto 3D que segue o cursor; esfera de partículas mouse-reactive; câmera que avança no scroll; wireframe terrain em tempo real; produto 3D configurável; background WebGL interativo.
 
@@ -107,6 +107,8 @@ Usar quando 3D é exagero ou não aumenta conversão.
 
 **Inclui:** text reveal; parallax; masked typography; image reveal; hover cards; SVG motion; scroll storytelling; magnetic buttons; animated mockups; cinematic section transitions; gradient background animado; background noise; reveal por seção; staggered animations.
 
+**Stack recomendada:** Framer Motion/Motion para UI React declarativa; GSAP + ScrollTrigger/SplitText para scroll storytelling, pinning e text reveal avançado (gratuito desde a v3.13); anime.js v4 para stagger, SVG motion e microinterações imperativas leves (~10kb core, MIT).
+
 **Usar quando:**
 
 - o projeto é Advanced Site;

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

@@ -1,6 +1,6 @@
 ---
 name: premium-landing-ui-researcher
-description: Pesquisar animações, componentes, referências visuais e padrões de conversão para criar landing pages premium em React, Next.js, Tailwind, shadcn/ui, Framer Motion, Three.js e React Three Fiber. Use esta skill quando o usuário pedir para analisar um projeto existente, classificar o nível de complexidade do site (básico, intermediário, avançado, 3D high-end com modo Signature), escolher componentes ou animações adequados, melhorar uma UI genérica, criar uma landing page completa, transformar uma oferta em página estratégica, projetar também um dashboard SaaS junto da landing, criar um site de autoridade/portfolio para agência, estúdio, consultoria, marca pessoal ou lead passivo, criar case studies e selected work editoriais, criar uma experiência 3D cinematográfica para marcas premium, buscar referências em React Bits, Cult UI, Ali Imam, Watermelon UI, StyleUI, Impeccable, Taste Skill, Design Motion Principles, MotionSites, Vibe Code Components, Landing Love, Godly, Design Spells, Mobbin, ScreensDesign, DesignVault, Spline, Unicorn Studio, Skiper UI, 21st.dev ou v0.app, ou implementar uma experiência visual sofisticada orientada à conversão ou à autoridade.
+description: Pesquisar animações, componentes, referências visuais e padrões de conversão para criar landing pages premium em React, Next.js, Tailwind, shadcn/ui, Framer Motion, Three.js e React Three Fiber. Use esta skill quando o usuário pedir para analisar um projeto existente, classificar o nível de complexidade do site (básico, intermediário, avançado, 3D high-end com modo Signature), escolher componentes ou animações adequados, melhorar uma UI genérica, criar uma landing page completa, transformar uma oferta em página estratégica, projetar também um dashboard SaaS junto da landing, criar um site de autoridade/portfolio para agência, estúdio, consultoria, marca pessoal ou lead passivo, criar case studies e selected work editoriais, criar uma experiência 3D cinematográfica para marcas premium, buscar referências em React Bits, Cult UI, Componentry, Animmaster Lib, Ali Imam, Watermelon UI, StyleUI, Bklit UI, Refero, Impeccable, Taste Skill, Design Motion Principles, MotionSites, Vibe Code Components, Landing Love, Godly, Design Spells, Mobbin, ScreensDesign, DesignVault, Spline, Unicorn Studio, Skiper UI, 21st.dev (Magic MCP ou 21st CLI), escolher entre GSAP, anime.js e Framer Motion para animações e scroll storytelling, ou implementar uma experiência visual sofisticada orientada à conversão ou à autoridade.
 ---
 
 # Premium Landing UI Researcher
@@ -9,7 +9,7 @@ Estrategista autônomo de landing pages premium, UI SaaS e experiências visuais
 
 ## 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.
+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 (`modelos lp/` do usuário, React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI e, como fonte PAGA complementar, 21st.dev via Magic MCP e 21st CLI) 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).
 
@@ -47,9 +47,9 @@ Classificar o projeto em um dos 5 níveis (regras, motion permitido/proibido e b
 | 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) |
+| Source-First Mandate completo + protocolo em 5 fases (inventário, repos em cache, Magic MCP, 21st CLI, confirmação; 21st = fonte paga complementar) | [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) |
+| Fontes de componentes (React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI, Bklit UI, 21st.dev + 21st CLI), animation engines (GSAP, anime.js), 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) |

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

@@ -4,16 +4,15 @@ 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:
+Fluxo recomendado de pesquisa (gratuito primeiro; 21st.dev é PAGO e entra como complemento):
 
-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.
+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.
 
 ## 21st.dev / Magic MCP
 
@@ -48,29 +47,23 @@ Fluxo recomendado:
 
 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
+## 21st CLI: busca, inspeção e registry do time
 
-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)**.
+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`).
 
-**Fluxo de catálogo (3 passos):**
+**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.
 
-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`.
+**Fluxo de mineração (3 passos):**
 
-   Exemplo:
-   ```
-   url: https://v0.app/community?q=liquid+glass
-   prompt: List all templates returned. For each: title, author, URL, brief description.
-   ```
+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).
 
-2. **Apresentar 5-10 links curados** com título, autor, link absoluto e o que cada um oferece.
+**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`.
 
-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.
+**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.
 
-**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.
+**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
 
@@ -125,6 +118,27 @@ 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.
 
+### Componentry
+
+- Site: https://componentry.dev/ (gratuito, open source, Vercel OSS Program)
+- Componentes React já animados (styling + animação resolvidos), copy-paste
+- Fonte GRATUITA prioritária pra micro-interação/animação de componente antes de qualquer fonte paga
+- **MCP oficial** (https://componentry.dev/docs/mcp): via MCP do shadcn — `pnpm dlx shadcn@latest mcp init` + registry `"@componentry": "https://componentry.fun/r/{name}.json"` no `components.json`; o agente instala componentes/animações direto, sem copy-paste manual
+
+### 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
+- O que o usuário já comprou/baixou dela vale como recurso local (inspecionar em `modelos lp/`)
+
+### Bklit UI
+
+- Site: https://bklit.com/ · GitHub: https://github.com/bklit/bklit-ui (MIT, gratuito, open source)
+- Charts e componentes utilitários React/TypeScript/Tailwind via registry shadcn (~15 tipos: área, barras, linha, pizza, radar, Sankey, candlestick, choropleth, gauge)
+- **Não clonar**: instalar direto pelo registry — `npx shadcn@latest add @bklit/<chart>` (ex: `@bklit/line-chart`)
+- Fonte prioritária para: dashboards SaaS, data viz, seções de métricas/estatísticas na landing, gráficos animados premium (complementa/substitui Recharts cru)
+- O Bklit Studio (playground) é proprietário; os componentes em si são MIT
+
 ### Skiper UI
 
 Skiper UI **não deve ser clonado**.
@@ -141,6 +155,24 @@ Usar para: uncommon shadcn components, efeitos visuais diferenciados, seções p
 
 Evitar: depender de componentes premium sem autorização; assumir acesso pago.
 
+## Animation Engine Libraries (libs de código, via npm)
+
+Motores de animação instaláveis como dependência npm normal (não são registries de componentes; não precisam de clone — os repos podem ser inspecionados para exemplos/demos).
+
+### GSAP
+
+- GitHub: https://github.com/greensock/GSAP.git · Docs: https://gsap.com/docs/
+- **100% gratuito desde a v3.13** (aquisição pela Webflow, 2025), incluindo todos os plugins antes pagos: ScrollTrigger, ScrollSmoother, SplitText, MorphSVG, DrawSVG, etc. Instalar: `npm i gsap` (+ `@gsap/react` para o hook `useGSAP`)
+- Usar para: scroll storytelling e animações scroll-driven complexas (ScrollTrigger), timelines longas e sequenciadas, text reveal por caractere/palavra (SplitText), morph de SVG, animações fora do ciclo do React, sites high-end estilo Awwwards
+- Preferir GSAP sobre Framer Motion quando: a animação é orquestrada por scroll com pinning/scrub, a timeline tem muitos passos encadeados, ou o efeito anima elementos fora de componentes React
+
+### anime.js
+
+- GitHub: https://github.com/juliangarnier/anime.git · Docs: https://animejs.com/ (MIT, gratuito)
+- v4: API modular e tree-shakeable (~10kb core), timelines, stagger, springs, draggable, scroll observer, SVG (draw/morph/motion path), WAAPI. Instalar: `npm i animejs`
+- Usar para: microinterações e animações leves quando GSAP seria peso demais, stagger/grid animations, animação de SVG, contadores/números animados, projetos sem React ou fora do ecossistema Motion
+- Regra de escolha: Framer Motion/Motion para UI React declarativa → anime.js para efeitos leves imperativos → GSAP para scroll orquestrado e timelines cinematográficas
+
 ## 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**.
@@ -249,6 +281,12 @@ Quando usar: site precisa de impacto visual, projeto quer WebGL sem implementar
 
 Trabalhar dentro do plano gratuito. Respeitar limites e marca d'água. Não pressupor licença paga.
 
+### 6b. Refero
+
+- https://refero.design/ — inspiração UI/UX de apps e sites reais, por tela e por fluxo
+- Usar como Mobbin: referência visual de padrões reais, não fonte de código
+- **Refero Styles** (https://styles.refero.design/, gratuito em beta): biblioteca de `DESIGN.md` extraídos de sites reais — paleta, tipografia, spacing, motion e padrões de componente num único markdown. Buscar por marca/mood/cor, copiar o DESIGN.md e colar no contexto do agente. Pra direção visual concreta, priorizar sobre inspiração visual pura (screenshot)
+
 ### 6. Mobbin
 
 URL: `https://mobbin.com/`
@@ -321,7 +359,7 @@ Remover dependência obrigatória de:
 - Skiper UI premium;
 - Spline pago;
 - Unicorn Studio pago;
-- v0 pago como obrigação.
+- planos pagos do 21st.dev como obrigação (o fluxo funciona no free tier).
 
 Usar ferramentas pagas apenas se:
 

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

@@ -12,7 +12,7 @@ A skill deve:
 - 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 a 21st CLI (`21st search` / `21st get` / `21st add`) para descoberta e instalação de componentes 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;

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

@@ -115,7 +115,7 @@ 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 **invoquei o v0 via v0-platform-mcp** ou declarei indisponível? Mesma regra.
+- Eu **usei a 21st CLI (search/get/add)** 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?

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

@@ -2,7 +2,7 @@
 
 ## 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**.
+**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**.
 
 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.
 
@@ -39,45 +39,9 @@ Antes de qualquer rede ou MCP, inspecionar o que o usuário já tem:
 
 Saída desta fase: lista de **componentes, libs e padrões reaproveitáveis** com path absoluto.
 
-### Fase 2: Magic MCP do 21st.dev
+### Fase 2: Busca nos repos de referência (cache central primeiro) — FASE PADRÃO
 
-**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.
+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.
 
 **Mapa de decisão "preciso disso → fonte":**
 
@@ -89,6 +53,9 @@ Para cada efeito visual ainda não resolvido pelas fases 1-3, inspecionar o **ca
 | 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) |
 
 **Fluxo de uso do cache:**
 
@@ -103,6 +70,41 @@ Para cada efeito visual ainda não resolvido pelas fases 1-3, inspecionar o **ca
 - 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:
@@ -113,7 +115,7 @@ 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`
+└─ 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`)

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

@@ -10,14 +10,23 @@
 - 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`
+- Bklit UI (charts shadcn, MIT, gratuito): https://github.com/bklit/bklit-ui — `npx shadcn@latest add @bklit/<chart>`
+- 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
-- 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
+- 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)
+
+- GSAP (100% gratuito desde a v3.13, todos os plugins incluídos): https://github.com/greensock/GSAP.git — `npm i gsap @gsap/react`
+- anime.js v4 (MIT, ~10kb core): https://github.com/juliangarnier/anime.git — `npm i animejs`
 
 ## Reference Sources (taste, qualidade visual, motion)
 
@@ -35,5 +44,7 @@
 - Spline: https://spline.design/
 - Unicorn Studio: https://www.unicorn.studio/
 - Mobbin: https://mobbin.com/
+- Refero (inspiração UI/UX de apps/sites reais): https://refero.design/
+- Refero Styles (DESIGN.md gratuito pra contexto do agente): https://styles.refero.design/
 - ScreensDesign: https://screensdesign.com/
 - DesignVault: https://designvault.io/

package/src/skills-lib/premium-landing-ui-researcher/references/stack-and-visual-direction.md

@@ -8,11 +8,13 @@ Se o usuário não especificar stack, assumir:
 - Tailwind CSS;
 - shadcn/ui;
 - Framer Motion ou Motion;
+- GSAP (com ScrollTrigger/SplitText, 100% gratuito desde a v3.13) para scroll storytelling e timelines cinematográficas;
+- anime.js v4 para microinterações imperativas leves e SVG motion;
 - React Bits;
 - React Three Fiber para projetos 3D;
 - Three.js para WebGL avançado;
 - lucide-react para ícones;
-- Recharts para dashboards SaaS.
+- Recharts ou Bklit UI (charts shadcn) para dashboards SaaS.
 
 Se o projeto for simples, reduzir stack e evitar complexidade desnecessária.
 

package/tools/installer/modules/cli-config.js

@@ -105,6 +105,10 @@ function resolveClis(registry, selectedAreas, platformTag = currentPlatformTag()
       // M14: post-check/post-install probe for minimal runtime deps (e.g.
       // clone-and-run tools where `check` only proves the clone exists).
       verify: cli.verify,
+      // recommended (2026-07-08): entries the UI should PRE-CHECK in the
+      // opt-in multiselect (e.g. rtk — the router assumes it active). Coerced
+      // to a real boolean so a missing field is `false`, never undefined.
+      recommended: !!cli.recommended,
     }),
   });
 }

package/tools/installer/ui.js

@@ -673,17 +673,22 @@ class UI {
     // Non-interactive: don't run system commands, just recommend everything.
     if (options.yes) return { toInstall: [], toRecommend: missing, alreadyInstalled };
 
-    // Default UNCHECKED: install runs a system command, so opt-in only.
+    // Opt-in still: install runs a system command, so the user always sees the
+    // multiselect and confirms. But entries flagged `recommended` in the
+    // registry (today only rtk — the router assumes it active at Passo 0) come
+    // PRE-CHECKED, so pressing enter installs them; everything else stays
+    // unchecked. Nothing installs à revelia — a recommended entry can still be
+    // unchecked here, and the --yes/non-TTY paths above never reach this.
     const selected = await prompts.multiselect({
       message: 'Quais CLIs instalar agora? (não marcados viram comando pra rodar depois)',
       options: missing.map((c) => ({
-        label: c.id,
+        label: c.recommended ? `${c.id} (recomendado)` : c.id,
         value: c.id,
         // M27/M14: prefer the upgrade/verify-failure reason when present —
         // more actionable than the generic `when` in those two cases.
         hint: c.upgradeMessage || c.verifyWarning || c.when,
       })),
-      initialValues: [],
+      initialValues: missing.filter((c) => c.recommended).map((c) => c.id),
       required: false,
     });