wizz-method 1.18.0 → 1.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/package.json +1 -1
  2. package/skills-registry.yaml +2 -16
  3. package/src/core-skills/_shared/handoff-protocol.md +6 -4
  4. package/src/modules/wizz/agents/wizz-designer/SKILL.md +2 -0
  5. package/src/modules/wizz/agents/wizz-growth/SKILL.md +2 -0
  6. package/src/modules/wizz/agents/wizz-maestro/SKILL.md +6 -2
  7. package/src/skills-lib/find-skills/SKILL.md +0 -1
  8. package/src/skills-lib/impeccable/SKILL.md +20 -25
  9. package/src/skills-lib/impeccable/references/command-workflows.md +35 -0
  10. package/src/skills-lib/impeccable/references/design-rules.md +1 -1
  11. package/src/skills-lib/impeccable/references/pin-unpin-and-hooks.md +4 -14
  12. package/src/skills-lib/impeccable/references/routing-rules.md +8 -25
  13. package/src/skills-lib/premium-landing-ui-researcher/SKILL.md +6 -6
  14. package/src/skills-lib/premium-landing-ui-researcher/references/component-sources.md +12 -81
  15. package/src/skills-lib/premium-landing-ui-researcher/references/core-goal.md +2 -4
  16. package/src/skills-lib/premium-landing-ui-researcher/references/mandatory-process.md +6 -7
  17. package/src/skills-lib/premium-landing-ui-researcher/references/output-format-and-quality.md +3 -4
  18. package/src/skills-lib/premium-landing-ui-researcher/references/source-first-protocol.md +43 -124
  19. package/src/skills-lib/premium-landing-ui-researcher/references/source-links.md +0 -8
  20. package/src/skills-lib/ui-component-curator/SKILL.md +13 -7
  21. package/src/skills-lib/ui-ux-pro-max/SKILL.md +18 -3
  22. package/src/skills-lib/ui-ux-pro-max/references/search-reference.md +3 -3
  23. package/src/skills-lib/ui-ux-pro-max/references/workflow-guide.md +20 -20
  24. package/src/skills-lib/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc +0 -0
  25. package/src/skills-lib/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-314.pyc +0 -0
  26. package/src/skills-lib/ui-ux-pro-max/scripts/search.py +9 -3
  27. package/src/skills-lib/wizz-router/SKILL.md +2 -0
  28. package/src/skills-lib/wizz-router/references/routing-table-flat.md +2 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/package.json",
3
3
  "name": "wizz-method",
4
- "version": "1.18.0",
4
+ "version": "1.18.1",
5
5
  "description": "Wizz Method — método de agência orientado por IA em PT-BR (fork independente do BMad Method)",
6
6
  "keywords": [
7
7
  "agile",
@@ -64,7 +64,8 @@
64
64
  version: 1
65
65
 
66
66
  # ─────────────────────────────────────────────────────────────────────────────
67
- # ÁREAS — cada uma tem um agente dono (executor) e as skills que ele puxa.
67
+ # ÁREAS — `agent` identifica uma SKILL de persona, invocada via Skill.
68
+ # Não usar esse valor como subagent_type. Subagentes nativos são wizz-exec-*.
68
69
  # ─────────────────────────────────────────────────────────────────────────────
69
70
  areas:
70
71
  designer:
@@ -132,22 +133,7 @@ areas:
132
133
  - id: ctc-align
133
134
  door: motion
134
135
  when: "Timing por forced alignment: timestamps palavra a palavra de narração TTS para sincronizar legenda, corte de cena e animação com a fala. Fonte única de timing no pipeline de vídeo; substitui Whisper e estimativa manual."
135
- mcps:
136
- - id: magic
137
- when: "Gerar/refinar componentes prontos via 21st.dev (UI builder, inspiration, refiner)."
138
- server:
139
- command: npx
140
- # Pin de supply chain (2026-08-23): versão fixa; atualizar conscientemente.
141
- args: ["-y", "@21st-dev/magic@0.2.2"]
142
- env:
143
- API_KEY: "${MAGIC_API_KEY}"
144
136
  clis:
145
- - id: 21st-cli
146
- 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)."
147
- rel:
148
- pairs_with: [magic]
149
- check: "command -v 21st"
150
- install: "npm i -g @21st-dev/cli && npx @21st-dev/cli install-skill"
151
137
  - id: hyperframes
152
138
  when: "DESENHAR telas de vídeo em HTML/CSS (HTML→MP4, agent-native, 20+ skills): cena isolada e MUDA — maqueta de WhatsApp/ChatGPT, gráfico animado, título, loop. NÃO usar para montagem com áudio/SFX/legenda sincronizada (posicionador de áudio falhou em produção, ~2,76s de drift; CSS vaza entre telas): a montagem final é do Remotion (regra: HyperFrames desenha, Remotion monta — ver _shared/video-pipeline.md do módulo wizz). Precisa ffmpeg + Node 22 + Chrome headless."
153
139
  not_when: "Montagem com áudio/SFX/legenda sincronizada (posicionador de áudio falhou em produção, ~2,76s de drift; CSS vaza entre telas)."
@@ -4,10 +4,11 @@ Contrato mínimo que todo orquestrador ou spawn de subagente usa ao delegar
4
4
  trabalho: wizz-router, wizz-maestro, wizz-party-mode (subagent/agent-team)
5
5
  e swarm-orchestrator. Objetivo: cortar a dupla consulta ao cerebro (cerebro
6
6
  pago 2x na mesma cadeia), travar o loop router-maestro-router, e passar só
7
- a seção da skill que importa (progressive disclosure), não a skill inteira.
7
+ o entrypoint da skill e apenas as referências necessárias (progressive disclosure), não o pacote inteiro.
8
8
 
9
9
  ## Campos do brief
10
10
 
11
+ - skill de área: nome canônico da persona a invocar via `Skill` (ex.: `wizz-growth`). Não é `subagent_type`: para isolar a tarefa, escolha um executor nativo disponível (`wizz-exec-*`) e instrua-o a carregar essa skill antes de trabalhar. A ausência de um executor não impede invocar a skill na sessão atual.
11
12
  - origem: quem está delegando (ex: wizz-router, wizz-maestro). Regra
12
13
  anti-loop: nunca invoque quem já está na cadeia de origem. Exemplo
13
14
  proibido: router delega pro maestro, maestro devolve pro router.
@@ -17,9 +18,10 @@ a seção da skill que importa (progressive disclosure), não a skill inteira.
17
18
  novo, usa o resumo recebido.
18
19
  - decisões já tomadas na cadeia: lista curta do que já foi decidido antes
19
20
  deste handoff (ex: paleta aprovada, escopo definido).
20
- - seção relevante da skill: aponte o arquivo ou seção específica a
21
- carregar, não a skill inteira (ex: paid-ads/references/budget.md). Quem
22
- recebe carrega isso, não o pacote completo da skill.
21
+ - seção relevante da skill: indique o assunto e as referências necessárias.
22
+ Quem recebe carrega primeiro o SKILL.md completo via invocação da skill;
23
+ depois apenas as referências exigidas pela tarefa. Skills carregadas
24
+ pelo lead não são herdadas automaticamente por um subagente.
23
25
  - model_hint (opcional): degrau da escada, não modelo cru. Valores:
24
26
  `haiku | sonnet | opus | review`. Quem recebe despacha `wizz-exec-<hint>`
25
27
  (nativo em Claude Code, Codex, OpenCode e Gemini CLI). Escalada: no
@@ -34,5 +34,7 @@ Para cada tarefa, **entre pela porta certa via a ferramenta `Skill`** e traga o
34
34
 
35
35
  Sempre **mostre o visual/plano antes do código**. Construção de código é com o **wizz-agent-dev**; para ajuste pontual, indique **wizz-quick-dev**.
36
36
 
37
+ **Gate de pesquisa:** para componente/efeito não trivial, cobre da porta de construção o registro de buscas, demos e código/registry exatos, revisão/data, licença, dependências, avaliação visual e motivo da escolha. A saída de `ui-ux-pro-max` é uma busca local de diretrizes, não mineração de componentes na web. Antes do handoff para dev, confirme as evidências ou declare as limitações e a justificativa da implementação própria. Fontes opcionais indisponíveis não bloqueiam a pesquisa em outras fontes públicas.
38
+
37
39
  ## Encerramento
38
40
  Termine no formato Wizz: `✅ O que fiz` (frases simples) / `➡️ Próximo passo` (geralmente wizz-agent-dev ou wizz-quick-dev pra construir) / `🎯 Comando`.
@@ -8,6 +8,8 @@ description: Wizz Method Growth and Conversion Agent. Use when you need marketin
8
8
  ## Visão geral
9
9
  Você é o Growth do Wizz. Traz ideias acionáveis de marketing e conversão, planeja lançamentos, ajusta preço e ataca churn. Nada de teoria solta. Roteia para as skills globais via a ferramenta `Skill`.
10
10
 
11
+ **Invocação:** esta persona é uma skill (`Skill(skill="wizz-growth", args="<brief>")`), não um `subagent_type`. Uma passada de CRO contra um shard pode rodar nesta sessão ou em um executor nativo disponível (`wizz-exec-*`) que carregue esta skill e receba o shard no brief.
12
+
11
13
  ## Na ativação
12
14
  1. **Resolver bloco:** rode `python3 {project-root}/_wizz/scripts/resolve_customization.py --skill {skill-root} --key agent`. Se falhar, mescle base → time → pessoal (`{skill-root}/customize.toml`, `{project-root}/_wizz/custom/{skill-name}.toml`, `.user.toml`).
13
15
  2. Execute `{agent.activation_steps_prepend}`.
@@ -75,7 +75,7 @@ O Diretor (`wizz-router`) já fez a triagem e te entregou porque é complexo. Se
75
75
  2. **Enriquecimento = o `skills-registry.yaml`**. Para a área escolhida, ele diz O QUE o agente puxa:
76
76
  - `areas:` — `agent` (deve casar com o do menu) e `skills:` (cada uma com `id` + `when` curto). Instrua o agente a invocar a(s) skill(s) global(is) cujo `when` casa com o pedido.
77
77
  - `utility:` — skills cross-cutting (find-skills, enhance-prompt, wizz-router). Ofereça quando couber.
78
- - `mcps:` (por área) e `mcp_utility:` (cross-cutting) — MCP servers que a área usa pra AGIR de verdade (ex: designer→magic, architect→supabase, ads→meta-ads, analyst→exa, util→context7; qa NÃO usa MCP de browser — é agent-browser via CLI). Se o pedido precisa de acesso real à ferramenta e o MCP não está ativo (`claude mcp list`), proponha `claude mcp add <id> -- <command>` usando o bloco `server` do registry (secrets via env/placeholder).
78
+ - `mcps:` (por área) e `mcp_utility:` (cross-cutting) — MCP servers que a área usa pra AGIR de verdade (ex: architect→supabase, ads→meta-ads, analyst→exa, util→context7; qa NÃO usa MCP de browser — é agent-browser via CLI). Se o pedido precisa de acesso real à ferramenta e o MCP não está ativo (`claude mcp list`), proponha `claude mcp add <id> -- <command>` usando o bloco `server` do registry (secrets via env/placeholder).
79
79
  - `clis:` (por área) e `cli_utility:` (cross-cutting) — ferramentas de linha de comando que o agente chama direto (não são skill nem MCP): ex. qa→agent-browser; designer→hyperframes/claude-video/buttercut/voicebox (vídeo); ads→arcads; growth→scrapling; seo→distribb. Quando o `when:` casar com o pedido, ofereça a tool: rode o `check:` pra ver se já está instalada; se não, mostre o `install:` (opt-in, nunca auto-rode sem confirmar). Respeite o campo `platform:` — se presente e não casar com o OS/arch atual, NÃO ofereça (ex.: `buttercut` é `darwin-arm64`, só Apple Silicon). Clone-and-run (buttercut/voicebox/arcads) instala no projeto; avise sobre deps pesadas.
80
80
  - `squads:` — painéis consultivos (rodam via `wizz-party-mode`). Quando o pedido pedir validação/estratégia de um `domain`, rode o squad ANTES do agente em `advises` executar.
81
81
 
@@ -102,7 +102,11 @@ Regra de handoff:
102
102
 
103
103
  ### Handoff ao delegar
104
104
 
105
- Ao invocar o agente de área, declare o brief no formato do [protocolo de handoff compartilhado](../../../../core-skills/_shared/handoff-protocol.md): `origem` (você, para o anti-loop o agente nunca devolve pra você o mesmo pedido), `cérebro já consultado` (o resumo de até 3 linhas que você já puxou no Passo 2, cortando a consulta duplicada do agente), decisões já tomadas na cadeia, a seção relevante da skill (não a skill inteira) e `model_hint` opcional. O agente de área que receber esse resumo pula o próprio passo de `/cerebro ver`.
105
+ **Contrato de invocação:** `areas.<area>.agent` e os destinos do menu são nomes de **skills de persona**, não tipos nativos de subagente. Na sessão atual, invoque `Skill(skill="wizz-growth", args="<brief de CRO>")` (ou a skill da área escolhida). Nunca passe `wizz-growth`, `wizz-designer`, `wizz-qa` ou `wizz-maestro` como `subagent_type` porque o registry os chama de agentes.
106
+
107
+ Para trabalho isolado/paralelo, selecione um `wizz-exec-*` que esteja na lista de agentes disponíveis e passe no brief a skill de área a carregar, o shard e o escopo. O executor deve carregar a skill de entrada completa antes das referências relevantes; não herda as skills já carregadas pelo maestro. Se não houver executor adequado disponível, execute a skill na sessão atual. Se a skill também faltar, reporte a instalação ausente, sem inventar um tipo de agente nem repetir a chamada que falhou.
108
+
109
+ Ao invocar o agente de área, declare o brief no formato do [protocolo de handoff compartilhado](../../../../core-skills/_shared/handoff-protocol.md): `origem` (você, para o anti-loop — o agente nunca devolve pra você o mesmo pedido), `cérebro já consultado` (o resumo de até 3 linhas que você já puxou no Passo 2, cortando a consulta duplicada do agente), decisões já tomadas na cadeia, a skill de entrada e as referências relevantes (sem carregar referências alheias à tarefa) e `model_hint` opcional. O agente de área que receber esse resumo pula o próprio passo de `/cerebro ver`.
106
110
 
107
111
  **Não tem agente/skill/MCP para o pedido:** diga isso e ofereça `find-skills`. Ele cobre os dois caminhos: skill faltante → `npx skills find/add`; capacidade de ferramenta faltante → `claude mcp add` (usando o `server` do registry). Classifique antes: precisa SABER COMO = skill; precisa AGIR num sistema = MCP.
108
112
 
@@ -164,7 +164,6 @@ claude mcp add <id> [-e VAR=valor ...] -- <command> [args...]
164
164
  # necessário):
165
165
  claude mcp add context7 -- npx -y @upstash/context7-mcp@3.2.2
166
166
  claude mcp add exa -e EXA_API_KEY=$EXA_API_KEY -- npx -y exa-mcp-server@3.2.1
167
- claude mcp add magic -e API_KEY=$MAGIC_API_KEY -- npx -y @21st-dev/magic@0.1.0
168
167
  claude mcp add supabase -e SUPABASE_ACCESS_TOKEN=$SUPABASE_ACCESS_TOKEN -- npx -y @supabase/mcp-server-supabase@0.8.2 --read-only
169
168
  ```
170
169
  Versões acima são as pinadas hoje em `skills-registry.yaml` — confira lá antes de copiar, pode ter mudado. Não sugira o MCP do Playwright: browser é sempre via CLI `agent-browser` neste framework, nunca Playwright.
@@ -1,30 +1,28 @@
1
1
  ---
2
2
  name: impeccable
3
- description: "Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks."
4
- argument-hint: "[{{command_hint}}] [target]"
3
+ description: "Use when the user wants to review, audit, polish, redesign or improve a frontend interface. Covers hierarchy, accessibility, responsive layout, typography, color, motion, UX copy and component consistency. Wizz's self-contained adaptation runs on project evidence and bundled references."
4
+ argument-hint: "[audit|critique|polish|shape|document|adapt|harden] [target]"
5
5
  user-invocable: true
6
- allowed-tools:
7
- - Bash(npx impeccable *)
8
6
  license: Apache 2.0
9
7
  ---
10
8
 
11
- Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
9
+ # Impeccable Wizz adaptation
12
10
 
13
- ## Setup (first step, always run before anything else)
11
+ Design and review working interfaces using project evidence. This bundle contains instructions and design rules; it does not ship the upstream CLI, detector, context scripts or native engine. Do not invent commands or claim those checks ran.
14
12
 
15
- You MUST do these steps before proceeding:
13
+ ## Setup
16
14
 
17
- 1. Run `node {{scripts_path}}/context.mjs` once per session. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. **If it reports `NO_PRODUCT_MD`, stop and follow `reference/init.md` before doing anything else.** If the output ends with an `UPDATE_AVAILABLE` directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
18
- 2. If the user invoked a sub-command (`craft`, `shape`, `audit`, `polish`, ...), you MUST read `reference/<command>.md` next. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
19
- 3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). **Required even when you've loaded a sub-command reference in step 2.** Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
20
- 4. Read the matching register reference. **This is non-optional; skipping it produces generic output.** If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read `reference/brand.md`. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read `reference/product.md`. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) `register` field in PRODUCT.md.
21
- 5. **If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3)**, run `node {{scripts_path}}/palette.mjs` to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. **Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.**
15
+ 1. Read the user's brief, existing PRODUCT.md/DESIGN.md when present, and at least one relevant UI source file (tokens, theme, component or page). Missing documents alone do not make an existing project greenfield.
16
+ 2. Preserve the established identity during refinement. For a requested redesign, choose a new direction while preserving product facts, functionality and user constraints. Explicit user choices take precedence over generic anti-pattern warnings.
17
+ 3. Choose the surface mode: **Persuade** (landing/marketing), **Operate** (app/dashboard), **Read** (docs/articles) or **Experience** (portfolio/gallery). A product can have surfaces in different modes.
18
+ 4. Map the requested action using [routing-rules](references/routing-rules.md). Read [command-workflows](references/command-workflows.md) for the relevant workflow and [design-rules](references/design-rules.md) before reviewing or changing UI.
19
+ 5. For new nontrivial components, invoke `skill:premium-landing-ui-researcher` or `skill:ui-component-curator` to obtain inspected sources. Do not replace source research with generic taste recommendations.
22
20
 
23
- ## Design guidance
21
+ ## Verification
24
22
 
25
- Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). {{model}} is capable of extraordinary work. Don't hold back.
23
+ Build the authorized change, inspect the affected desktop/mobile states in one batch, fix the observed issues together and confirm once more. Additional passes need a specific unresolved defect. Verify keyboard/focus, responsive overflow, reduced-motion and relevant project checks. If the app cannot run, use current screenshot fixtures and code, and state the limitation.
26
24
 
27
- **Before writing or reviewing any UI code, load `references/design-rules.md`** the ruleset every craft/polish/audit/critique pass is checked against. Skipping it is the most common way this skill produces generic or AI-tell-heavy output.
25
+ Report findings with file/route, observed evidence, impact and proposed correction. Distinguish observed defects from taste preferences. Never claim an automatic detector, browser test or performance measurement without running it.
28
26
 
29
27
  ## Commands
30
28
 
@@ -54,17 +52,14 @@ Produce ready-to-ship, production-grade code, not prototypes or starting points.
54
52
  | `optimize [target]` | Fix | Diagnose and fix UI performance |
55
53
  | `live` | Iterate | Visual variant mode: pick elements in the browser, generate alternatives |
56
54
 
57
- Each command's flow lives at `reference/<command>.md` (e.g. `reference/craft.md`, `reference/live.md` — vendored, per Setup step 2). Plus three management commands: `pin <command>`, `unpin <command>`, and `hooks <on|off|status|...>` — see `references/pin-unpin-and-hooks.md`.
58
55
 
59
- **If the first word matches a command** (table above OR `pin` / `unpin` / `hooks`): load its reference file and follow its instructions. Everything after the command name is the target. **If no argument was given, or the intent doesn't obviously name a command**, load `references/routing-rules.md` for the full routing logic (context-aware menu, signal-based recommendations, intent mapping, fallback general invocation).
56
+ Command names above select the bundled [command-workflows](references/command-workflows.md); they are not shell commands. Management requests (`pin`, `unpin`, `hooks`) use [pin-unpin-and-hooks](references/pin-unpin-and-hooks.md). `teach` aliases `init`.
60
57
 
61
- `teach` is a deprecated alias for `init`: if the user types it, load [reference/init.md](reference/init.md) and proceed as if they ran `init`.
58
+ ## References
62
59
 
63
- ## Reference map load each file when needed
60
+ - [Design rules](references/design-rules.md): visual, interaction and anti-pattern checks.
61
+ - [Routing rules](references/routing-rules.md): map intent to the appropriate workflow.
62
+ - [Command workflows](references/command-workflows.md): executable steps using available project tools.
63
+ - [Management capabilities](references/pin-unpin-and-hooks.md): limits of this instruction-only bundle.
64
64
 
65
- - `references/design-rules.md` general + new-project rules, absolute bans, AI slop test. **Load before producing/reviewing UI code.**
66
- - `references/routing-rules.md` — full routing algorithm for no-argument or ambiguous invocations. **Load when you can't map the request to a table row.**
67
- - `references/pin-unpin-and-hooks.md` — the `pin`/`unpin`/`hooks` management flows. **Load when the user invokes one of those.**
68
- - `reference/<command>.md` (singular — e.g. `reference/craft.md`, `reference/brand.md`) — vendored per-command/per-register flows from the `impeccable` npm package, resolved by Setup steps 2 and 4. Not part of this repo.
69
-
70
- Zero content was cut — every rule, example, and routing detail lives verbatim in its `references/` file.
65
+ Upstream: [pbakaus/impeccable](https://github.com/pbakaus/impeccable). The current upstream skill 4.2.1 uses a native engine; this Wizz adaptation does not imply that engine is installed.
@@ -0,0 +1,35 @@
1
+ # Command workflows
2
+
3
+ Apply only the workflow matching the user's request. Use the existing project tools and evidence; these procedures do not require a separate CLI.
4
+
5
+ ## Shape and build
6
+
7
+ For `shape` or `craft`: inspect the brief and current UI; determine visitor task and surface mode; draft section/component structure and states; resolve missing material decisions; research nontrivial components through the appropriate Wizz research skill. Build when authorized, then run the verification pass described in SKILL.md.
8
+
9
+ ## Audit and critique
10
+
11
+ For `audit`: inspect keyboard/focus, labels, contrast, errors/loading/empty states, responsive overflow, motion preferences and relevant performance evidence. For `critique`: inspect hierarchy, comprehension, navigation, density, typography, brand fit and task completion. Report prioritized findings with exact file/route and evidence. Do not equate a preference with a defect, invent scores or apply fixes during a review-only request.
12
+
13
+ ## Refine and adjust
14
+
15
+ For `polish`, address the observed issues with the highest user impact. Other commands narrow the scope:
16
+
17
+ | Commands | Inspect and change |
18
+ |---|---|
19
+ | typeset, layout | Type hierarchy, readable line lengths, wrapping, spacing, alignment, responsive behavior |
20
+ | colorize, bolder, quieter | Color roles, contrast and intended emphasis within the approved direction |
21
+ | distill, clarify | Unnecessary UI/copy complexity, labels and next-action clarity; preserve factual claims |
22
+ | adapt, harden, onboard | Device states, errors/loading/empty states, localization, first-use guidance |
23
+ | animate, delight, overdrive | Purposeful interaction feedback, timing, reduced-motion, rendering cost |
24
+ | optimize | Measured or directly evidenced performance problems; verify the affected path |
25
+ | extract | Repeated tokens/patterns that merit shared primitives without changing behavior |
26
+
27
+ Inspect the target first, make the authorized edits, then verify those states. Large motion effects still require inspected sources and a fit decision.
28
+
29
+ ## Init and document
30
+
31
+ For `init`, gather known product, audience, purpose and constraints from project/user evidence; ask only for missing material facts. For `document`, extract the actual design system from code and current screenshots. Merge into existing PRODUCT.md/DESIGN.md without discarding unrelated decisions; mark assumptions.
32
+
33
+ ## Live
34
+
35
+ Inspect the affected interface using the available browser and current dev server. Implement scoped visual variants if requested, compare the relevant viewport/states, and keep the chosen variant. If a running app or browser is unavailable, provide a code/static assessment and state what remains unverified. Do not simulate an interactive overlay or claim a visual check occurred.
@@ -92,4 +92,4 @@ If someone could look at this interface and say "AI made that" without doubt, it
92
92
  **Category-reflex check.** Run at two altitudes; the second one catches what the first one misses.
93
93
 
94
94
  - **First-order:** if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain. <!-- rule:skill-slop-first-order-check -->
95
- - **Second-order:** if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's [reflex-reject aesthetic lanes](reference/brand.md) list catches the currently-saturated families. <!-- rule:skill-slop-second-order-check -->
95
+ - **Second-order:** if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. Ground the direction in the user's brief and inspected references instead of swapping one generic aesthetic for another. <!-- rule:skill-slop-second-order-check -->
@@ -1,17 +1,7 @@
1
- # Pin/unpin and hooks management commands
1
+ # Pin, unpin and hooks
2
2
 
3
- Load this file when the user invokes `pin`, `unpin`, or `hooks` (with any argument). Covers: creating/removing standalone command shortcuts, and managing the design detector hook that auto-runs after direct UI file edits.
3
+ The Wizz instruction-only adaptation does not ship the upstream management runtime. `pin`, `unpin` and `hooks` are therefore not executable through this bundle.
4
4
 
5
- ## Pin / Unpin
5
+ If asked to manage them, first inspect whether the project separately installed the official Impeccable runtime. If present, consult its installed help and current official documentation and use only commands it actually supports. If absent, explain the missing capability and prepare an installation plan if requested. Do not install another runtime automatically during UI work.
6
6
 
7
- **Pin** creates a standalone shortcut so `{{command_prefix}}<command>` invokes `{{command_prefix}}impeccable <command>` directly. **Unpin** removes it. The script writes to every harness directory present in the project.
8
-
9
- ```bash
10
- node {{scripts_path}}/pin.mjs <pin|unpin> <command>
11
- ```
12
-
13
- Valid `<command>` is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.
14
-
15
- ## Hooks
16
-
17
- `{{command_prefix}}impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset>` manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in [reference/hooks.md](reference/hooks.md); load it when the user invokes `{{command_prefix}}impeccable hooks` with any argument.
7
+ UI audit and polish remain available through the bundled [command-workflows](command-workflows.md). Never report a hook or detector as active based solely on these instructions.
@@ -1,28 +1,11 @@
1
- # Routing rules — how to pick a command
1
+ # Routing rules
2
2
 
3
- Load this file whenever the skill is invoked without an explicit sub-command, or when the user's intent doesn't obviously name one of the commands in the table. Covers: the no-argument menu logic (reading context-signals.mjs and detect.mjs, picking the 2-3 highest-value next commands), first-word command matching, intent-to-command mapping, and the fallback general design invocation path.
3
+ Use the user's requested action and target. A clearly implied action is enough to start; do not ask them to choose a command they already described.
4
4
 
5
- ### Routing rules
5
+ - Review or diagnose: `audit` for technical defects; `critique` for visual/UX reasoning. Report findings without editing unless authorized.
6
+ - Fix or refine existing UI: `polish`, or the specific adjustment command. Preserve existing identity and behavior outside scope.
7
+ - New page or redesign: `shape`, then the authorized build; use the source-research skills before nontrivial UI code.
8
+ - Capture existing context: `document` for design evidence, `init` for product context. Missing PRODUCT.md does not block a narrow fix.
9
+ - No task or target: inspect available project context and recommend up to three useful actions with evidence; ask for the missing objective.
6
10
 
7
- 1. **No argument**: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run `context.mjs`; if that reported `NO_PRODUCT_MD` you are already in init (setup), so finish that and skip this. Otherwise run `node {{scripts_path}}/context-signals.mjs` once and read its JSON, then lead with the **2-3 highest-value next commands**, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). **Never auto-run a command; the recommendation is a suggestion the user confirms.**
8
-
9
- Reason over the signals; there is no score to obey:
10
- - `setup.hasDesign` false while `setup.hasCode` true → `document` (capture the visual system).
11
- - `critique.latest` is `null` → the project has never been critiqued; for a set-up project with a real surface, offering `/impeccable critique <surface>` is a strong default.
12
- - `critique.latest` with a low `score` or non-zero `p0` / `p1` → `polish` (it reads that snapshot as its backlog), or re-run `critique` if the snapshot looks stale.
13
- - `git.changedFiles` pointing at one surface → scope `audit` or `polish` to those files specifically, naming them.
14
- - `devServer.running` true → `live` is available for in-browser iteration; if false, don't lead with `live`.
15
- - Otherwise group by intent exactly as init's "Recommend starting points" step does (build new / improve what's there / iterate visually), tailored to `setup.register`.
16
-
17
- **If `scan.targets` is non-empty, run `node {{scripts_path}}/detect.mjs --json <scan.targets joined by spaces>` once** (the bundled detector over local files: no network, no npx). `scan.via` tells you what they are: `git-changes` (the markup/style files in your dirty tree, the most relevant set), `source-dir` (e.g. `src`, `app`), `html`, or `root`. Fold the hits into your picks: many quality / contrast hits → `audit` or `polish`; a specific slop family → the matching command (gradient text or eyebrows → `quieter` / `typeset`, flat or gray palette → `colorize`, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run `audit` themselves; never block the suggestion on it.
18
-
19
- Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.
20
- 2. **First word matches a command** (table above OR `pin` / `unpin` / `hooks`): load its reference file and follow its instructions. Everything after the command name is the target.
21
- 3. **First word doesn't match, but the intent clearly maps to one command** (e.g. "fix the spacing" → `layout`, "rewrite this error message" → `clarify`, "the colors feel flat" → `colorize`): load that command's reference and proceed as if invoked. If two commands could fit, ask once which.
22
- 4. **No clear command match**: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.
23
-
24
- Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke `{{command_prefix}}impeccable`.
25
-
26
- If the first word is `craft`, setup still runs first, but [reference/craft.md](reference/craft.md) owns the rest of the flow. If setup invokes `init` as a blocker, finish init, refresh context, then resume the original command and target.
27
-
28
- `teach` is a deprecated alias for `init`: if the user types it, load [reference/init.md](reference/init.md) and proceed as if they ran `init`.
11
+ Read [command-workflows](command-workflows.md) for the selected action. Reuse context from the current handoff; do not re-invoke router or maestro. Do not invoke absent detector/context scripts.
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: premium-landing-ui-researcher
3
- 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 quando o pedido envolver analisar projeto existente; classificar nível de complexidade do site (básico a 3D high-end/Signature); escolher componentes/animações; melhorar UI genérica; criar landing page completa, transformar oferta em página estratégica, dashboard SaaS, site de autoridade/portfolio (agência, estúdio, consultoria, marca pessoal, lead passivo), case studies/selected work editoriais, ou experiência 3D cinematográfica para marcas premium; buscar referências em fontes premium (React Bits, Cult UI, Watermelon UI, Skiper UI, 21st.dev via Magic MCP/CLI, outras em references/component-sources.md); ou escolher motion engine (GSAP, anime.js, Framer Motion, Three.js/R3F) para scroll storytelling.
3
+ 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 quando o pedido envolver analisar projeto existente; classificar nível de complexidade do site (básico a 3D high-end/Signature); escolher componentes/animações; melhorar UI genérica; criar landing page completa, transformar oferta em página estratégica, dashboard SaaS, site de autoridade/portfolio (agência, estúdio, consultoria, marca pessoal, lead passivo), case studies/selected work editoriais, ou experiência 3D cinematográfica para marcas premium; buscar referências em fontes premium (React Bits, Cult UI, Watermelon UI, Skiper UI, Componentry, outras em references/component-sources.md); ou escolher motion engine (GSAP, anime.js, Framer Motion, Three.js/R3F) para scroll storytelling.
4
4
  ---
5
5
 
6
6
  # Premium Landing UI Researcher
@@ -9,9 +9,9 @@ Estrategista autônomo de landing pages premium, UI SaaS e experiências visuais
9
9
 
10
10
  ## Gate 1: Source-First (sempre, antes de qualquer código de UI)
11
11
 
12
- 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.
12
+ 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, Componentry e registries públicos) e adaptar à marca.
13
13
 
14
- 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).
14
+ Regra absoluta: inspecione fontes reais, registre evidências e recomende opções, adapte à marca. Nunca recrie o que já existe maduro. Se uma fonte estiver indisponível, registre a limitação e pesquise outra fonte pública ou local antes de justificar uma implementação própria. 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).
15
15
 
16
16
  ## Gate 2: classificar o nível do site (sempre, antes de recomendar componentes)
17
17
 
@@ -31,7 +31,7 @@ Classificar o projeto em um dos 5 níveis (regras, motion permitido/proibido e b
31
31
  2. Classificar o nível do site (Gate 2).
32
32
  3. Definir direção visual e stack.
33
33
  4. Decidir modos extras: dashboard SaaS e/ou Portfolio / Authority Mode.
34
- 5. Checkpoints de fontes: inventário interno, Source-First Protocol completo e confirmação do usuário sobre as fontes escolhidas (Gate 1). Nunca pular silenciosamente.
34
+ 5. Checkpoints de fontes: inventário interno, Source-First Protocol completo e escolha das fontes dentro do escopo autorizado (Gate 1). Nunca pular silenciosamente.
35
35
  6. Se nível 4 ou 5: handoff pro `motion-3d-director` antes de implementar.
36
36
  7. Escrever copy completa e estrutura da página.
37
37
  8. Plano de implementação (handoff pro `implementation-planner` quando aplicável).
@@ -47,9 +47,9 @@ Classificar o projeto em um dos 5 níveis (regras, motion permitido/proibido e b
47
47
  | Handoffs pro motion-3d-director e implementation-planner, regra final do ladder | [handoffs](references/handoffs.md) |
48
48
  | SaaS Dashboard Mode e Portfolio / Authority Site Mode | [dashboard-and-portfolio-modes](references/dashboard-and-portfolio-modes.md) |
49
49
  | Processo obrigatório de 12 passos e checkpoint de honestidade | [mandatory-process](references/mandatory-process.md) |
50
- | 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) |
50
+ | Protocolo em 5 fases (inventário, busca pública, cache, evidências, adaptação) | [source-first-protocol](references/source-first-protocol.md) |
51
51
  | Audit Protocol: Pass 1 Taste, Pass 2 Impeccable, Pass 3 Cross-check, Pass 4 A11y/Perf | [audit-protocol](references/audit-protocol.md) |
52
- | 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) |
52
+ | Fontes de componentes (React Bits, Cult UI, Ali Imam, Watermelon, StyleUI, Skiper UI, Bklit UI, Componentry), animation engines (GSAP, anime.js), fontes de referência e inspiração visual, Clone Policy, Paid Source Policy | [component-sources](references/component-sources.md) |
53
53
  | 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) |
54
54
  | Estrutura obrigatória da landing, case studies/portfolio, copywriting, conversão e CTA externo/WhatsApp | [landing-page-strategy](references/landing-page-strategy.md) |
55
55
  | Prompts base (landing completa e hero 3D com scroll) | [prompt-templates](references/prompt-templates.md) |
@@ -4,70 +4,26 @@ Priorizar fontes gratuitas, open source, públicas, registry-based ou fornecidas
4
4
 
5
5
  Não depender de fontes pagas como parte central do fluxo.
6
6
 
7
- Fluxo recomendado de pesquisa (gratuito primeiro; 21st.dev é PAGO e entra como complemento):
7
+ Fluxo de pesquisa (fontes públicas primeiro; registrar evidências conforme [source-first-protocol](source-first-protocol.md)):
8
8
 
9
9
  1. referências enviadas pelo usuário (`modelos lp/`, prints, links);
10
10
  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);
11
11
  3. registries shadcn públicos;
12
12
  4. fontes de taste/motion (Impeccable, Taste Skill, Design Motion Principles, MotionSites, Vibe Code Components, Refero Styles com DESIGN.md gratuito);
13
13
  5. fontes visuais abertas (Landing Love, Godly, Design Spells, Mobbin, Refero, ScreensDesign, DesignVault, Spline, Unicorn Studio);
14
- 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);
15
- 7. hipóteses estratégicas coerentes, quando não houver acesso externo.
14
+ 6. hipóteses estratégicas coerentes, quando não houver acesso externo.
16
15
 
17
- ## 21st.dev / Magic MCP
16
+ ## Evidências de mineração
18
17
 
19
- Esta skill deve usar 21st.dev diretamente quando MCP/API estiver disponível.
18
+ 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.
20
19
 
21
- 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.
22
-
23
- 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.
24
-
25
- Quando o ambiente tiver Magic MCP disponível, usar as ferramentas MCP do 21st.dev diretamente:
26
-
27
- - `mcp__magic__21st_magic_component_inspiration`: buscar padrões e referências de seções (hero, pricing, testimonials, features);
28
- - `mcp__magic__21st_magic_component_builder`: gerar/instalar o componente alinhado ao stack;
29
- - `mcp__magic__21st_magic_component_refiner`: refinar componentes existentes;
30
- - `mcp__magic__logo_search`: logos de marcas (integrações, prova social, parceiros).
31
-
32
- Fluxo recomendado:
33
-
34
- 1. Analisar o projeto.
35
- 2. Identificar o nível do site.
36
- 3. Definir quais componentes a página precisa.
37
- 4. Pesquisar no 21st.dev por componentes compatíveis com objetivo, tom e stack.
38
- 5. Priorizar componentes compatíveis com Next.js, React, TypeScript, Tailwind CSS, shadcn/ui e Framer Motion/Motion.
39
- 6. Combinar resultados do 21st.dev com:
40
- - React Bits para animações;
41
- - Cult UI para componentes shadcn;
42
- - Ali Imam para shaders e efeitos visuais;
43
- - Watermelon UI para SaaS/product UI;
44
- - StyleUI para templates;
45
- - Design Motion Principles para regras de movimento;
46
- - Taste Skill e Impeccable para qualidade visual.
47
-
48
- 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.
49
-
50
- ## 21st CLI: busca, inspeção e registry do time
51
-
52
- 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`).
53
-
54
- **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.
55
-
56
- **Fluxo de mineração (3 passos):**
57
-
58
- 1. **Buscar:** `21st search "<termo>"` (ex: `pricing table`, `hero glass`, `testimonials`), com `--type component|theme|template` quando fizer sentido.
59
- 2. **Inspecionar:** `21st get <id>` pra ver o item antes de decidir; `21st bookmarks` lista os salvos do usuário.
60
- 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).
61
-
62
- **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`.
63
-
64
- **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.
20
+ 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.
65
21
 
66
22
  **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.
67
23
 
68
24
  ## Authorized Component / Code Inspection Sources
69
25
 
70
- Estas fontes podem ser clonadas temporariamente, com permissão do usuário, para inspecionar componentes, exemplos ou registries.
26
+ 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.
71
27
 
72
28
  ### React Bits
73
29
 
@@ -77,7 +33,7 @@ https://github.com/DavidHDev/react-bits.git
77
33
 
78
34
  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.
79
35
 
80
- Priorizar componentes open source. Não recomendar nem listar componentes React Bits Pro como dependência obrigatória.
36
+ 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.
81
37
 
82
38
  ### Cult UI
83
39
 
@@ -100,7 +56,7 @@ https://github.com/aliimam-in/aliimam.git
100
56
 
101
57
  Usar para: shaders, liquid wave, pixel grid, ripple shader, border glow, bento layouts, typewriter effects, canvas-based effects, efeitos visuais experimentais.
102
58
 
103
- 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.
59
+ Se a estrutura do repositório estiver incerta: inspecionar docs primeiro e não assumir nomes de componentes sem verificar.
104
60
 
105
61
  ### Watermelon UI
106
62
 
@@ -128,7 +84,7 @@ Usar para: templates, landing page layouts, páginas prontas, seções instaláv
128
84
  ### Animmaster Lib
129
85
 
130
86
  - Site: https://animmasterlib.dev/ — **fonte PAGA** (300 componentes animados PRO, HTML/CSS/JS/React/Next)
131
- - Mesmo gate de custo do 21st.dev: só com aprovação do usuário, quando as gratuitas não cobrirem
87
+ - usar com acesso/custo autorizado, quando as fontes públicas não cobrirem
132
88
  - O que o usuário já comprou/baixou dela vale como recurso local (inspecionar em `modelos lp/`)
133
89
 
134
90
  ### Bklit UI
@@ -319,32 +275,9 @@ Não prometer código pronto quando a fonte for apenas visual. Não copiar visua
319
275
 
320
276
  ## Clone Policy
321
277
 
322
- **Não clonar nada automaticamente.**
323
-
324
- Se precisar clonar uma fonte de componentes ou referência, perguntar antes.
325
-
326
- Ordem preferida:
327
-
328
- 1. usar source map conhecido;
329
- 2. usar docs públicas;
330
- 3. usar web/search se disponível;
331
- 4. usar registry URL se disponível;
332
- 5. pedir permissão antes de clonar;
333
- 6. clonar apenas em pasta temporária ou claramente nomeada.
334
-
335
- Clonar apenas em pasta temporária, como:
336
-
337
- ```text
338
- .design-sources-temp/
339
- ```
340
-
341
- Nunca clonar diretamente dentro da estrutura principal do app.
278
+ 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.
342
279
 
343
- A skill pode clonar temporariamente apenas repositórios das listas `Authorized Component / Code Inspection Sources` e `Authorized Reference Inspection Sources`.
344
-
345
- Usar repositórios clonados somente para: pesquisa, inspeção, descoberta de componentes, exemplos, orientação de implementação.
346
-
347
- Não manter repositórios clonados como dependência do projeto sem confirmação explícita.
280
+ Use somente os componentes necessários; preserve licença e atribuições. O clone de pesquisa não vira dependência permanente do app.
348
281
 
349
282
  ## Paid Source Policy
350
283
 
@@ -358,8 +291,7 @@ Remover dependência obrigatória de:
358
291
  - Cult UI Pro;
359
292
  - Skiper UI premium;
360
293
  - Spline pago;
361
- - Unicorn Studio pago;
362
- - planos pagos do 21st.dev como obrigação (o fluxo funciona no free tier).
294
+ - Unicorn Studio pago.
363
295
 
364
296
  Usar ferramentas pagas apenas se:
365
297
 
@@ -371,4 +303,3 @@ Usar ferramentas pagas apenas se:
371
303
  Sempre preferir: open source, registry público, GitHub, docs públicas, screenshots do usuário, referências fornecidas.
372
304
 
373
305
  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.
374
-
@@ -11,10 +11,9 @@ A skill deve:
11
11
  - fazer poucas perguntas quando faltar contexto;
12
12
  - escolher o nível visual correto do projeto;
13
13
  - pesquisar componentes, animações e referências nas fontes configuradas;
14
- - usar 21st.dev diretamente via MCP/API quando disponível;
15
- - usar a 21st CLI (`21st search` / `21st get` / `21st add`) para descoberta e instalação de componentes de referência;
14
+ - abrir e inspecionar demos, código e registries públicos, registrando evidências de pesquisa;
16
15
  - usar repositórios autorizados como fonte de pesquisa;
17
- - clonar temporariamente repositórios autorizados apenas quando necessário e com permissão;
16
+ - clonar temporariamente repositórios autorizados em diretório isolado apenas quando necessário à pesquisa autorizada;
18
17
  - escolher scroll effects, 3D hero, WebGL, shaders, microinterações e componentes com base no tom da marca;
19
18
  - escrever copy completa, estratégica e orientada à conversão;
20
19
  - 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
59
58
  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.
60
59
 
61
60
  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.
62
-
@@ -7,9 +7,9 @@ Sempre seguir este processo. **Os passos 6, 7 e 8 são CHECKPOINTS DE FONTES e d
7
7
  3. Classificar o nível do projeto.
8
8
  4. Definir direção visual.
9
9
  5. Decidir se precisa de landing, dashboard, 3D/WebGL ou combinação.
10
- 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.
11
- 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.
12
- 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. prosseguir quando ele aprovar a direção das fontes escolhidas.
10
+ 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.
11
+ 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.
12
+ 8. **CHECKPOINT: Escolher fontes.** Recomende a combinação adequada. Com direção e implementação autorizadas, prossiga; pergunte apenas se faltar uma decisão material.
13
13
  9. Recomendar componentes e animações (já curados nos checkpoints anteriores).
14
14
  10. Escrever copy e estrutura.
15
15
  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
20
20
  Antes de escrever qualquer componente, responder internamente:
21
21
 
22
22
  - Eu inspecionei o que o usuário já tem em `/modelos lp/` (ou equivalente)?
23
- - Eu invoquei o Magic MCP do 21st.dev, ou declarei explicitamente que está indisponível?
24
- - 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)?
25
- - O componente que estou prestes a escrever do zero **realmente não existe** em nenhuma das fontes inventariadas?
23
+ - Eu abri as fontes exatas e registrei código/registry, revisão/data, licença e dependências?
24
+ - Eu documentei candidatos aceitos/rejeitados e eventuais fontes indisponíveis?
25
+ - O componente que estou prestes a escrever do zero ficou sem alternativa compatível nas fontes efetivamente pesquisadas, com justificativa registrada?
26
26
 
27
27
  Se a resposta for "não" para qualquer uma dessas perguntas, **PARE e volte para o Source-First Protocol antes de continuar**.
28
28
 
@@ -33,4 +33,3 @@ Se a resposta for "não" para qualquer uma dessas perguntas, **PARE e volte para
33
33
  **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.
34
34
 
35
35
  **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.
36
-
@@ -114,11 +114,10 @@ A entrega deve parecer um trabalho premium de estratégia, copywriting, design e
114
114
 
115
115
  Antes de declarar a landing pronta, perguntar-se honestamente:
116
116
 
117
- - 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.
118
- - Eu **usei a 21st CLI (search/get/add)** ou declarei indisponível? Mesma regra.
117
+ - 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?
119
118
  - Eu **inspecionei `/modelos lp/`** (ou pasta equivalente) do usuário antes de escrever shader/animação/hero?
120
- - Eu **pedi autorização para clones** das fontes autorizadas quando o efeito era específico (Ali Imam pra shader, React Bits pra animação)?
121
- - 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?
119
+ - Eu registrei fontes indisponíveis e usei cache sem sobrescrever alterações locais?
120
+ - 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?
122
121
  - 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ê?
123
122
  - O **Pass 4 (Acessibilidade + Performance)** foi executado? Esse passe nunca pode ser pulado.
124
123
 
@@ -1,146 +1,65 @@
1
- <EXTREMELY-IMPORTANT>
1
+ # Source-First Protocol
2
2
 
3
- ## Source-First Mandate (read this FIRST, every time)
3
+ 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.
4
4
 
5
- **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**.
5
+ ## Fase 1: Inventário do projeto
6
6
 
7
- 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.
7
+ 1. Inspecione dependências, tokens, componentes e animações existentes.
8
+ 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.
9
+ 3. Consulte decisões já disponíveis no handoff. Reutilize ativos locais compatíveis antes de buscar fora.
8
10
 
9
- ### Anti-pattern (NUNCA fazer)
11
+ Registre paths reais dos recursos encontrados. Se não houver modelos locais, prossiga com fontes públicas.
10
12
 
11
- - 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/`
12
- - ❌ Reinventar text reveal / magnetic / scroll-driven animation sem antes ter inspecionado React Bits e os modelos do usuário
13
- - ❌ Criar hero 3D na mão sem antes ter buscado em 21st.dev via Magic MCP e gerado variações em v0
14
- - ❌ Criar carousel/slider sem antes ter verificado se Embla, shadcn/ui ou 21st.dev têm componente pronto compatível com o stack
15
- - ❌ 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
16
- - ❌ "Fazer tudo na mão pra ir mais rápido": isso quebra o propósito da skill
13
+ ## Fase 2: Buscar e inspecionar fontes públicas
17
14
 
18
- ### Required pattern (SEMPRE fazer)
15
+ Escolha fontes pelo efeito necessário, usando [component-sources](component-sources.md) e [source-links](source-links.md):
19
16
 
20
- Antes de escrever qualquer linha de código de UI, executar o **Source-First Protocol** (definido abaixo). A regra absoluta é:
17
+ | Necessidade | Fontes iniciais |
18
+ |---|---|
19
+ | Texto animado, backgrounds, hover, partículas | React Bits, Componentry |
20
+ | Seções de marketing, cards, botões | Cult UI, registries públicos shadcn |
21
+ | Shader, liquid/ripple, WebGL experimental | Ali Imam, exemplos públicos compatíveis |
22
+ | Dashboard e visualização de dados | Watermelon UI, Bklit UI |
23
+ | Layout base | StyleUI, componentes existentes |
24
+ | Carousel | Embla, shadcn/ui |
25
+ | Direção visual e motion de referência | Sites fornecidos, Landing Love, Godly, Design Spells, Refero Styles |
21
26
 
22
- > **Inspecione fontes reais → ofereça opções ao usuário → adapte à marca. Nunca recrie o que já existe maduro.**
27
+ Para cada componente não trivial:
23
28
 
24
- 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.
29
+ 1. Formule uma busca concreta com função, estilo e stack; consulte pelo menos duas fontes adequadas quando disponíveis.
30
+ 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.
31
+ 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.
32
+ 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.
33
+ 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.
25
34
 
26
- </EXTREMELY-IMPORTANT>
35
+ 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.
27
36
 
28
- ## Source-First Protocol
37
+ ## Fase 3: Cache e obtenção do código
29
38
 
30
- 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.
39
+ Cache existente de design (por exemplo `~/.claude/design-sources/`) pode ser inspecionado. Não o trate como atualizado por existir:
31
40
 
32
- ### Fase 1: Inventário interno (sem dependência externa)
41
+ - Confira origem, branch, revisão e mudanças locais antes de atualizar.
42
+ - Consulte a revisão remota quando houver rede; data de modificação da pasta não é prova de atualização.
43
+ - 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.
44
+ - 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.
45
+ - 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.
33
46
 
34
- Antes de qualquer rede ou MCP, inspecionar o que o usuário tem:
47
+ Sem rede, use as referências locais e declare a revisão conhecida e a limitação de atualização.
35
48
 
36
- 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.
37
- 2. **Projeto atual do usuário**: se houver, listar dependências instaladas (`cat package.json`) e componentes/utilities existentes que podem ser reaproveitados.
38
- 3. **Cérebro / vault do usuário**: usar grep nos arquivos do vault (`projetos/`, `_decisions/`) para achar padrões técnicos já documentados em projetos anteriores.
49
+ ## Fase 4: Evidência e escolha
39
50
 
40
- Saída desta fase: lista de **componentes, libs e padrões reaproveitáveis** com path absoluto.
51
+ Registre no artefato de design existente (ou crie `design-research.md` na pasta de planejamento do projeto):
41
52
 
42
- ### Fase 2: Busca nos repos de referência (cache central primeiro) FASE PADRÃO
53
+ | Seção/componente | Busca e fonte | Demo + código exato | Revisão/data | Licença + dependências | Evidência visual | Escolha e adaptação |
54
+ |---|---|---|---|---|---|---|
55
+ | 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 |
43
56
 
44
- 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.
57
+ 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.
45
58
 
46
- **Mapa de decisão "preciso disso fonte":**
59
+ 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.
47
60
 
48
- | Preciso de... | Cache central | Atualizar cache se necessário |
49
- |---|---|---|
50
- | Shader líquido / liquid wave / ripple / pixel grid / efeito experimental WebGL | `~/.claude/design-sources/aliimam/` | `git -C ~/.claude/design-sources/aliimam pull` |
51
- | Text reveal / particle effects / hover effects / animated cards / scroll effects React | `~/.claude/design-sources/react-bits/` | `git -C ~/.claude/design-sources/react-bits pull` |
52
- | Hero sections shadcn premium / marketing sections / botões sofisticados / cards animados | `~/.claude/design-sources/cult-ui/` | `git -C ~/.claude/design-sources/cult-ui pull` |
53
- | SaaS components / dashboards / product UI blocks | `~/.claude/design-sources/watermelon/` | `git -C ~/.claude/design-sources/watermelon pull` |
54
- | Templates / landing layouts prontos / páginas base | `~/.claude/design-sources/styleui/` | `git -C ~/.claude/design-sources/styleui pull` |
55
- | Componentes shadcn premium específicos | **Skiper UI** | `npx shadcn add @skiper-ui/skiperXX` (sem clone, instala direto) |
56
- | Charts / data viz / seções de métricas / gráficos de dashboard | **Bklit UI** | `npx shadcn@latest add @bklit/<chart>` (sem clone, registry shadcn) |
57
- | Scroll storytelling / pinning / timelines cinematográficas / SplitText | **GSAP** (lib npm, 100% gratuita desde a v3.13) | `npm i gsap @gsap/react` (sem clone) |
58
- | Microinterações imperativas leves / stagger / SVG motion / contadores | **anime.js v4** (lib npm, MIT) | `npm i animejs` (sem clone) |
61
+ ## Fase 5: Adaptar e verificar
59
62
 
60
- **Fluxo de uso do cache:**
61
-
62
- 1. Verificar se o diretório em `~/.claude/design-sources/<repo>/` existe e tem conteúdo.
63
- 2. Se sim: ler/grep diretamente no cache sem clonar.
64
- 3. Se desatualizado (> 7 dias sem pull): `git -C ~/.claude/design-sources/<repo> pull --quiet` antes de inspecionar.
65
- 4. Se o cache não existir (máquina nova): `git clone --depth=1 <url> ~/.claude/design-sources/<repo>` e seguir.
66
-
67
- **Regras de cópia para o projeto:**
68
-
69
- - Copiar APENAS o(s) componente(s) necessário(s) para `src/components/` adaptados à marca
70
- - Nunca adicionar o repo inteiro como dependência permanente
71
- - Não clonar em `.design-sources-temp/` se o cache já tem o repo: usar o cache diretamente
72
-
73
- ### Fase 3: Magic MCP do 21st.dev (fonte PAGA, complementar)
74
-
75
- **Ferramentas disponíveis (chamar via ToolSearch se não estiverem carregadas):**
76
-
77
- - `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.)
78
- - `mcp__magic__21st_magic_component_builder`: gerar/instalar componente alinhado ao stack do usuário
79
- - `mcp__magic__21st_magic_component_refiner`: refinar componente existente
80
- - `mcp__magic__logo_search`: logos de marcas para integrações/prova social
81
-
82
- **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.
83
-
84
- **Quando chamar (se aprovado):**
85
-
86
- - 1 chamada de `inspiration` para o **hero** (ex: liquid glass hero, particle hero, mask reveal hero)
87
- - 1 chamada para o **bloco principal de conversão** (ex: pricing, contact dialog, CTA group)
88
- - 1 chamada para **selected work / portfolio grid** se o projeto for autoridade/portfolio
89
- - 1 chamada para **navigation** se a direção visual exigir navbar não-padrão
90
-
91
- 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.**
92
-
93
- ### Fase 4: 21st CLI (catálogo e registry — fonte PAGA, complementar)
94
-
95
- 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.
96
-
97
- **Fluxo resumido:**
98
-
99
- 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.
100
- 2. Buscar: `21st search "<termo>"` (`--type component|theme|template`); inspecionar com `21st get <id>`.
101
- 3. Instalar o escolhido no projeto: `21st add <user>/<slug>` ou `npx shadcn@latest add <url do item>`; adaptar à marca.
102
- 4. Componente do time já publicado no registry `@wizzdigitalagency` tem prioridade sobre item público equivalente.
103
-
104
-
105
-
106
- 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.
107
-
108
- ### Fase 5: Apresentação ao usuário e confirmação
109
-
110
- Antes de implementar, apresentar ao usuário uma resposta estruturada:
111
-
112
- ```
113
- Source-First Inventory para sua landing:
114
-
115
- HERO (efeito liquid glass)
116
- ├─ Opção A: 21st.dev → componente "X" via Magic MCP (recomendado, já compatível com Next + Tailwind)
117
- ├─ Opção B: clonar Ali Imam → arquivo `liquid-wave.tsx` adaptado para token #FF4500
118
- └─ Opção C: buscar/instalar alternativa via 21st CLI (`21st search` + `21st add`)
119
-
120
- CAROUSEL DE PRODUTOS
121
- ├─ Opção A: Embla Carousel (lib oficial, já no seu /modelos lp/ em `air-pods-max-product-showcase`)
122
- └─ Opção B: 21st.dev → "scroll-snap carousel" via Magic MCP
123
-
124
- TEXT REVEAL HEADLINE
125
- ├─ Opção A: React Bits → `split-text-reveal.tsx` (precisa autorização pra clonar)
126
- └─ Opção B: Framer Motion na mão (fallback aceitável, padrão simples)
127
-
128
- PORTFOLIO GRID
129
- ├─ Opção A: clonar Cult UI → `marketing-grid.tsx`
130
- └─ Opção B: 21st.dev → portfolio grid via Magic MCP
131
-
132
- Posso prosseguir com (A, A, A, A) ou prefere ajustar?
133
- ```
134
-
135
- Só implementar depois da confirmação do usuário sobre quais fontes usar.
136
-
137
- ### Quando é aceitável criar do zero
138
-
139
- Existem 3 casos onde é OK criar do zero, e em todos deve ser declarado ao usuário:
140
-
141
- 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
142
- 2. **Após esgotar as fases 1-4** sem encontrar componente compatível, com o usuário ciente disso
143
- 3. **Microcomponentes utilitários** (MonoLabel, Section wrapper) que são apenas estilização de tokens
144
-
145
- 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**.
63
+ 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.
146
64
 
65
+ 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.
@@ -14,14 +14,6 @@
14
14
  - Componentry (React animado, gratuito/open source, Vercel OSS): https://componentry.dev/
15
15
  - Componentry MCP (via shadcn MCP + registry `@componentry`): https://componentry.dev/docs/mcp
16
16
  - Animmaster Lib (300 componentes animados, PAGO): https://animmasterlib.dev/
17
- - 21st.dev: https://21st.dev/
18
- - 21st.dev Magic MCP: https://21st.dev/magic
19
- - 21st.dev MCP: https://21st.dev/mcp
20
- - 21st CLI (buscar/instalar/publicar via terminal): `npm i -g @21st-dev/cli` + `21st login`
21
- - 21st CLI skills oficiais (21st-cli-use, 21st-registry, 21st-design-sync): `npx @21st-dev/cli install-skill`
22
- - 21st busca: `21st search "<termo>" [--type component|theme|template]` + `21st get <id>`
23
- - 21st instalação: `21st add <user>/<slug>` ou `npx shadcn@latest add https://21st.dev/r/<user>/<slug>`
24
- - 21st API keys (CI/headless, env API_KEY_21ST): https://21st.dev/settings/api-keys
25
17
 
26
18
  ## Animation Engine Libraries (npm)
27
19
 
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: ui-component-curator
3
- description: analyze an existing frontend project, infer its visual style and product tone, then research and recommend compatible UI components and effects from 21st.dev and superdesign. use when the user wants help choosing components, effects, sections, or visual patterns that fit an existing project — especially hero effects, cards, buttons, testimonials, pricing sections, navigation, or any interactive pattern. trigger whenever the user wants to add a UI element and wants Claude to study the project first before suggesting options. always read the codebase before recommending, send links for confirmation, and plan before editing.
3
+ description: analyze an existing frontend project, infer its visual style and product tone, then research and recommend compatible UI components and effects from public component catalogs, registries and source repositories. use when the user wants help choosing components, effects, sections, or visual patterns that fit an existing project — especially hero effects, cards, buttons, testimonials, pricing sections, navigation, or any interactive pattern. trigger whenever the user wants to add a UI element and wants Claude to study the project first before suggesting options. always inspect the codebase and exact component sources, provide evidence and plan before editing.
4
4
  ---
5
5
 
6
6
  # Overview
@@ -9,7 +9,7 @@ Read the project. Infer its design language. Then find components that feel like
9
9
 
10
10
  Act as a UI curator with taste and restraint — not a gallery explorer. Optimize for consistency over novelty.
11
11
 
12
- **Golden rule:** Do not edit before confirming. Plan firstsend linkswait for approval then edit.
12
+ **Golden rule:** Inspect the project search real sourcesdocument evidenceplan implement within the user's authorization. Ask only when a material choice or paid access is unresolved.
13
13
 
14
14
  ---
15
15
 
@@ -30,7 +30,13 @@ Extract the project's design DNA:
30
30
 
31
31
  Do not ask the user to describe the style unless the project has no inspectable UI at all.
32
32
 
33
- ## 2. Search 21st.dev and superdesign
33
+ ## 2. Search and inspect public sources
34
+
35
+ Start with existing project components. Then search appropriate public sources: [React Bits](https://reactbits.dev/), [Cult UI](https://www.cult-ui.com/docs), [Componentry](https://componentry.dev/), or [shadcn/ui](https://ui.shadcn.com/docs). Compare at least two suitable sources when available.
36
+
37
+ Open the exact demo and source file/registry item. Check the actual imports, license, dependencies, stack variant and revision; use current official documentation (Context7 when available) for API compatibility. Inspect animation/interaction in the available browser; label static-only inspection honestly. If a source fails, record the failure and continue elsewhere.
38
+
39
+ Record search terms, exact URLs/paths, revision/date, license, dependencies, visual inspection status and acceptance/rejection reason in the project's design artifact (or `design-research.md`). A catalog homepage or search snippet is not component evidence. Never invent filenames, components or test results.
34
40
 
35
41
  Use the inferred style DNA as the search filter. Prefer:
36
42
  - options that feel native to the current project
@@ -50,9 +56,9 @@ For each candidate, say briefly:
50
56
 
51
57
  Provide a compact plan: what changes, which files, any dependency or styling adaptation needed.
52
58
 
53
- ## 5. Send links and wait for confirmation
59
+ ## 5. Present evidence and proceed within scope
54
60
 
55
- Do not proceed to edit until the user confirms.
61
+ Send the exact candidate links and recommendation. If the user authorized implementation and the design direction is known, proceed with the best fit. Ask only for unresolved direction, paid access or a scope change.
56
62
 
57
63
  ---
58
64
 
@@ -98,5 +104,5 @@ Up to 2 backup options only if genuinely different and useful.
98
104
  ## Implementation plan
99
105
  What changes, which files, any dependency or adaptation work.
100
106
 
101
- ## Links for confirmation
102
- The candidate links. Await user approval before editing.
107
+ ## Research evidence
108
+ Exact candidate demo/source links, revision/date, license and dependencies, visual inspection status, decisions and unavailable sources. State what still needs a user decision.
@@ -17,13 +17,28 @@ Reference these guidelines when:
17
17
 
18
18
  ## First Step
19
19
 
20
- Analyze the user request (product type, style keywords, industry, stack), then **always start with `--design-system`** to get a comprehensive recommendation with reasoning:
20
+ ### Wizz: construction entry point
21
+
22
+ Before producing UI code, inspect the existing project and choose the research skill:
23
+
24
+ - New landing page or a full page composition: invoke `skill:premium-landing-ui-researcher` for source research and section planning.
25
+ - A component or effect in an existing project: invoke `skill:ui-component-curator` to inspect compatible candidates.
26
+ - Existing UI polish only: invoke `skill:impeccable`; invoke `skill:taste-skill` when a redesign direction is needed.
27
+ - HTML prototype/visual variants: invoke `skill:huashu-design`. Stitch-to-React conversion: invoke `skill:react-components`.
28
+
29
+ The local Python database below recommends design tokens and patterns; it does **not** search the web, inspect component source code, or prove that a component exists. For component research, require exact demo/source URLs, inspected files or registry items, revision/date, license, dependencies and a fit decision. Continue with an available public source if one fails; state any unverified result. Do not claim research based only on the database output.
30
+
31
+ ### Local design-system search
32
+
33
+ Analyze the user request (product type, style keywords, industry, stack). Use `--design-system` for a new page/project or a change to the overall visual direction:
21
34
 
22
35
  ```bash
23
- python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
36
+ python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
24
37
  ```
25
38
 
26
- If user doesn't specify a stack, default to `html-tailwind`. Needs Python 3 see `references/workflow-guide.md` if `python3 --version` fails.
39
+ Run from this skill's directory. For a targeted concern, use `--domain`; for implementation guidance, use a separate `--stack` query inferred from the project. This bundled engine ignores `--stack` in `--design-system` mode. If no stack can be inferred and it matters, ask instead of assuming Tailwind.
40
+
41
+ Use one dominant intent and 2–5 meaningful terms per query. Verify the returned category and fit before applying results. Retry once with a narrower query if results are off-topic; after that, label general guidance as a fallback. Do not persist unverified output. When using `--persist`, pass `--output-dir` for the project and inspect existing design artifacts first: this bundled version can overwrite them. Needs Python 3 — see `references/workflow-guide.md` if `python3 --version` fails.
27
42
 
28
43
  ## References (load on demand)
29
44
 
@@ -21,7 +21,7 @@ Load this file when picking a `--domain` or `--stack` value, or when choosing an
21
21
 
22
22
  | Stack | Focus |
23
23
  |-------|-------|
24
- | `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
24
+ | `html-tailwind` | Tailwind utilities, responsive, a11y (only when project uses it) |
25
25
  | `react` | State, hooks, performance, patterns |
26
26
  | `nextjs` | SSR, routing, images, API routes |
27
27
  | `vue` | Composition API, Pinia, Vue Router |
@@ -38,8 +38,8 @@ The `--design-system` flag supports two output formats:
38
38
 
39
39
  ```bash
40
40
  # ASCII box (default) - best for terminal display
41
- python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
41
+ python3 scripts/search.py "fintech crypto" --design-system
42
42
 
43
43
  # Markdown - best for documentation
44
- python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
44
+ python3 scripts/search.py "fintech crypto" --design-system -f markdown
45
45
  ```
@@ -37,14 +37,14 @@ Extract key information from user request:
37
37
  - **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
38
38
  - **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
39
39
  - **Industry**: healthcare, fintech, gaming, education, etc.
40
- - **Stack**: React, Vue, Next.js, or default to `html-tailwind`
40
+ - **Stack**: infer from project dependencies. If unknown and needed, ask.
41
41
 
42
- ### Step 2: Generate Design System (REQUIRED)
42
+ ### Step 2: Choose the search mode
43
43
 
44
- **Always start with `--design-system`** to get comprehensive recommendations with reasoning:
44
+ Use `--design-system` for new pages/projects or overall visual direction. Use a focused `--domain` for a targeted concern and a separate `--stack` query for implementation. The bundled engine ignores `--stack` in design-system mode. Verify relevance, retry once with a narrower query, and label an unmatched result as a fallback.
45
45
 
46
46
  ```bash
47
- python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
47
+ python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
48
48
  ```
49
49
 
50
50
  This command:
@@ -55,40 +55,40 @@ This command:
55
55
 
56
56
  **Example:**
57
57
  ```bash
58
- python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
58
+ python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
59
59
  ```
60
60
 
61
61
  ### Step 2b: Persist Design System (Master + Overrides Pattern)
62
62
 
63
- To save the design system for hierarchical retrieval across sessions, add `--persist`:
63
+ Run from this skill's directory. To persist into the user's project, add `--persist --output-dir <project-root>`. Read any existing design artifacts first: this bundled version can overwrite files, so preserve existing decisions and only persist verified output.
64
64
 
65
65
  ```bash
66
- python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
66
+ python3 scripts/search.py "<query>" --design-system --persist --output-dir "<project-root>" -p "Project Name"
67
67
  ```
68
68
 
69
69
  This creates:
70
- - `design-system/MASTER.md` — Global Source of Truth with all design rules
71
- - `design-system/pages/` — Folder for page-specific overrides
70
+ - `design-system/<project-slug>/MASTER.md` — Global Source of Truth with all design rules
71
+ - `design-system/<project-slug>/pages/` — Folder for page-specific overrides
72
72
 
73
73
  **With page-specific override:**
74
74
  ```bash
75
- python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
75
+ python3 scripts/search.py "<query>" --design-system --persist --output-dir "<project-root>" -p "Project Name" --page "dashboard"
76
76
  ```
77
77
 
78
78
  This also creates:
79
- - `design-system/pages/dashboard.md` — Page-specific deviations from Master
79
+ - `design-system/<project-slug>/pages/dashboard.md` — Page-specific deviations from Master
80
80
 
81
81
  **How hierarchical retrieval works:**
82
- 1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
82
+ 1. When building a specific page (e.g., "Checkout"), first check `design-system/<project-slug>/pages/checkout.md`
83
83
  2. If the page file exists, its rules **override** the Master file
84
- 3. If not, use `design-system/MASTER.md` exclusively
84
+ 3. If not, use `design-system/<project-slug>/MASTER.md` exclusively
85
85
 
86
86
  ### Step 3: Supplement with Detailed Searches (as needed)
87
87
 
88
88
  After getting the design system, use domain searches to get additional details:
89
89
 
90
90
  ```bash
91
- python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
91
+ python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
92
92
  ```
93
93
 
94
94
  **When to use detailed searches:**
@@ -103,10 +103,10 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n
103
103
 
104
104
  ### Step 4: Stack Guidelines (Default: html-tailwind)
105
105
 
106
- Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
106
+ Get implementation-specific best practices for the stack detected in the project. Ask if the stack matters and cannot be inferred.
107
107
 
108
108
  ```bash
109
- python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
109
+ python3 scripts/search.py "<keyword>" --stack html-tailwind
110
110
  ```
111
111
 
112
112
  Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
@@ -124,7 +124,7 @@ Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`
124
124
  ### Step 2: Generate Design System (REQUIRED)
125
125
 
126
126
  ```bash
127
- python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
127
+ python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
128
128
  ```
129
129
 
130
130
  **Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
@@ -133,16 +133,16 @@ python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service eleg
133
133
 
134
134
  ```bash
135
135
  # Get UX guidelines for animation and accessibility
136
- python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
136
+ python3 scripts/search.py "animation accessibility" --domain ux
137
137
 
138
138
  # Get alternative typography options if needed
139
- python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
139
+ python3 scripts/search.py "elegant luxury serif" --domain typography
140
140
  ```
141
141
 
142
142
  ### Step 4: Stack Guidelines
143
143
 
144
144
  ```bash
145
- python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
145
+ python3 scripts/search.py "layout responsive form" --stack html-tailwind
146
146
  ```
147
147
 
148
148
  **Then:** Synthesize design system + detailed searches and implement the design.
@@ -71,9 +71,15 @@ if __name__ == "__main__":
71
71
 
72
72
  args = parser.parse_args()
73
73
 
74
- # Design system takes priority
75
- if args.design_system:
76
- result = generate_design_system(
74
+ # Design system takes priority
75
+ if args.design_system:
76
+ if args.stack:
77
+ print(
78
+ "Warning: --stack is ignored in --design-system mode. "
79
+ "Run a separate --stack query for implementation guidance.",
80
+ file=sys.stderr,
81
+ )
82
+ result = generate_design_system(
77
83
  args.query,
78
84
  args.project_name,
79
85
  args.format,
@@ -24,6 +24,8 @@ Você é o **Diretor / porta de entrada** — não o orquestrador (esse é o `wi
24
24
 
25
25
  ## Triagem e delegação (o coração do Diretor)
26
26
 
27
+ **Skill ≠ subagente nativo:** o campo `agent:` do registry identifica uma skill de persona. Invoque-a via `Skill` (ex.: `Skill(skill="wizz-growth", args="<brief>")`), nunca como `Agent(subagent_type="wizz-growth")`. Para execução isolada, use somente um tipo anunciado pelo runtime, como `wizz-exec-sonnet`, com a skill de área e o brief no prompt. Sem executor disponível, use a skill na sessão atual; sem a skill, informe a instalação faltante. Não invente tipos de agente.
28
+
27
29
  **Estágio do projeto (fail-open):** `grep -m1 '^stage:' {project-root}/**/project-context.md` (ex: `_wizz-output/project-context.md`, path configurável via `output_folder`). Se achar `prototype`/`mvp`, prefira solução leve e não recomende observabilidade/infra de produção; `production`, gates de qualidade valem integralmente. Sem arquivo: siga sem mencionar estágio.
28
30
 
29
31
  Descubra o contexto: **existe `{project-root}/_wizz/`?**
@@ -52,7 +52,7 @@ Use esta tabela pra mapear skills/CLIs/MCPs direto **fora de projeto Wizz** (sem
52
52
  | Gerar vídeo-ad/imagem por IA (Sora/Veo/Kling) + publicar Meta | CLI `arcads` (registry `ads`; git clone + Arcads API key) | 1 |
53
53
  | Analisar/entender vídeo existente (frames + transcrição) | CLI `claude-video` (registry designer; `npx skills add bradautomates/claude-video`) | 2 |
54
54
  | Narração / voz / TTS / clonagem de voz para vídeo | CLI `voicebox` (registry designer; app local com endpoint MCP) | 2 |
55
- | Componentes prontos via Magic (21st.dev) | Use diretamente: `mcp__magic__21st_magic_component_inspiration` / `mcp__magic__21st_magic_component_builder` | 1 |
55
+ | Pesquisar componentes compatíveis com o projeto | `ui-component-curator` (demos, código e registries públicos com evidências) | 1 |
56
56
 
57
57
  ## Área de Marketing / Growth
58
58
 
@@ -97,6 +97,6 @@ Quando nenhuma skill/MCP instalado cobrir o pedido, **classifique o que falta**
97
97
 
98
98
  **Falta um MCP:** informe → `claude mcp list` → consulte `skills-registry.yaml` (`mcps:`/`mcp_utility:`, com `server` pronto) → proponha `claude mcp add <id> [-e VAR=$VAR] -- <command> [args]`. Secrets sempre via env/placeholder, nunca token real.
99
99
 
100
- MCPs comuns: context7 (docs de libs), magic/21st (UI), supabase (Postgres), meta-ads (Meta), exa (pesquisa). Browser/E2E é sempre via CLI `agent-browser`, nunca via MCP Playwright.
100
+ MCPs comuns: context7 (docs de libs), supabase (Postgres), meta-ads (Meta), exa (pesquisa). Browser/E2E é sempre via CLI `agent-browser`, nunca via MCP Playwright.
101
101
 
102
102
  Para paid ads Meta, o MCP `mcp-meta-ads` dá acesso real à API Meta Marketing (campanhas, ad sets, ads, métricas, criativos). Combine com `paid-ads` + `ad-creative` + `analytics-tracking`. O `META_ACCESS_TOKEN` vem de env local: nunca exponha em logs ou código commitado.