wizz-method 1.5.2 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "wizz-method",
-  "version": "1.5.2",
+  "version": "1.6.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/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, 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), 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, 21st.dev + 21st CLI), 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,19 @@ 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/`)
+
 ### Skiper UI
 
 Skiper UI **não deve ser clonado**.
@@ -249,6 +255,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 +333,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":**
 
@@ -103,6 +67,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 +112,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,17 @@
 - 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`
+- 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
 
 ## Reference Sources (taste, qualidade visual, motion)
 
@@ -35,5 +38,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/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,
     });