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.
- package/package.json +1 -1
- package/skills-registry.yaml +2 -16
- package/src/core-skills/_shared/handoff-protocol.md +6 -4
- package/src/modules/wizz/agents/wizz-designer/SKILL.md +2 -0
- package/src/modules/wizz/agents/wizz-growth/SKILL.md +2 -0
- package/src/modules/wizz/agents/wizz-maestro/SKILL.md +6 -2
- package/src/skills-lib/find-skills/SKILL.md +0 -1
- package/src/skills-lib/impeccable/SKILL.md +20 -25
- package/src/skills-lib/impeccable/references/command-workflows.md +35 -0
- package/src/skills-lib/impeccable/references/design-rules.md +1 -1
- package/src/skills-lib/impeccable/references/pin-unpin-and-hooks.md +4 -14
- package/src/skills-lib/impeccable/references/routing-rules.md +8 -25
- package/src/skills-lib/premium-landing-ui-researcher/SKILL.md +6 -6
- package/src/skills-lib/premium-landing-ui-researcher/references/component-sources.md +12 -81
- package/src/skills-lib/premium-landing-ui-researcher/references/core-goal.md +2 -4
- package/src/skills-lib/premium-landing-ui-researcher/references/mandatory-process.md +6 -7
- package/src/skills-lib/premium-landing-ui-researcher/references/output-format-and-quality.md +3 -4
- package/src/skills-lib/premium-landing-ui-researcher/references/source-first-protocol.md +43 -124
- package/src/skills-lib/premium-landing-ui-researcher/references/source-links.md +0 -8
- package/src/skills-lib/ui-component-curator/SKILL.md +13 -7
- package/src/skills-lib/ui-ux-pro-max/SKILL.md +18 -3
- package/src/skills-lib/ui-ux-pro-max/references/search-reference.md +3 -3
- package/src/skills-lib/ui-ux-pro-max/references/workflow-guide.md +20 -20
- package/src/skills-lib/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc +0 -0
- package/src/skills-lib/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-314.pyc +0 -0
- package/src/skills-lib/ui-ux-pro-max/scripts/search.py +9 -3
- package/src/skills-lib/wizz-router/SKILL.md +2 -0
- 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.
|
|
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",
|
package/skills-registry.yaml
CHANGED
|
@@ -64,7 +64,8 @@
|
|
|
64
64
|
version: 1
|
|
65
65
|
|
|
66
66
|
# ─────────────────────────────────────────────────────────────────────────────
|
|
67
|
-
# ÁREAS —
|
|
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
|
-
|
|
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:
|
|
21
|
-
|
|
22
|
-
|
|
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 lê 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:
|
|
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
|
-
|
|
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` só 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
|
|
4
|
-
argument-hint: "[
|
|
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
|
-
|
|
9
|
+
# Impeccable — Wizz adaptation
|
|
12
10
|
|
|
13
|
-
|
|
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
|
-
|
|
13
|
+
## Setup
|
|
16
14
|
|
|
17
|
-
1.
|
|
18
|
-
2.
|
|
19
|
-
3.
|
|
20
|
-
4.
|
|
21
|
-
5.
|
|
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
|
-
##
|
|
21
|
+
## Verification
|
|
24
22
|
|
|
25
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
58
|
+
## References
|
|
62
59
|
|
|
63
|
-
|
|
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
|
-
|
|
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.
|
|
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
|
|
1
|
+
# Pin, unpin and hooks
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
1
|
+
# Routing rules
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
|
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,
|
|
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
|
|
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
|
-
|
|
|
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,
|
|
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
|
|
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.
|
|
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
|
-
##
|
|
16
|
+
## Evidências de mineração
|
|
18
17
|
|
|
19
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
-
|
|
87
|
+
- Só 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
|
-
|
|
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
|
-
|
|
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
|
-
-
|
|
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
|
|
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
|
|
11
|
-
7. **CHECKPOINT: Source-First Protocol (obrigatório).**
|
|
12
|
-
8. **CHECKPOINT:
|
|
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 já 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
|
|
24
|
-
- Eu
|
|
25
|
-
- O componente que estou prestes a escrever do zero
|
|
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
|
-
|
package/src/skills-lib/premium-landing-ui-researcher/references/output-format-and-quality.md
CHANGED
|
@@ -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 **
|
|
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
|
|
121
|
-
- Cada componente que entreguei tem uma **fonte rastreável** (
|
|
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
|
-
|
|
1
|
+
# Source-First Protocol
|
|
2
2
|
|
|
3
|
-
|
|
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
|
-
|
|
5
|
+
## Fase 1: Inventário do projeto
|
|
6
6
|
|
|
7
|
-
|
|
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
|
-
|
|
11
|
+
Registre paths reais dos recursos encontrados. Se não houver modelos locais, prossiga com fontes públicas.
|
|
10
12
|
|
|
11
|
-
|
|
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
|
-
|
|
15
|
+
Escolha fontes pelo efeito necessário, usando [component-sources](component-sources.md) e [source-links](source-links.md):
|
|
19
16
|
|
|
20
|
-
|
|
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
|
-
|
|
27
|
+
Para cada componente não trivial:
|
|
23
28
|
|
|
24
|
-
|
|
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
|
-
|
|
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
|
-
##
|
|
37
|
+
## Fase 3: Cache e obtenção do código
|
|
29
38
|
|
|
30
|
-
|
|
39
|
+
Cache existente de design (por exemplo `~/.claude/design-sources/`) pode ser inspecionado. Não o trate como atualizado só por existir:
|
|
31
40
|
|
|
32
|
-
|
|
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
|
-
|
|
47
|
+
Sem rede, use as referências locais e declare a revisão conhecida e a limitação de atualização.
|
|
35
48
|
|
|
36
|
-
|
|
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
|
-
|
|
51
|
+
Registre no artefato de design existente (ou crie `design-research.md` na pasta de planejamento do projeto):
|
|
41
52
|
|
|
42
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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:**
|
|
12
|
+
**Golden rule:** Inspect the project → search real sources → document evidence → plan → 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
|
|
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.
|
|
59
|
+
## 5. Present evidence and proceed within scope
|
|
54
60
|
|
|
55
|
-
|
|
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
|
-
##
|
|
102
|
-
|
|
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
|
-
|
|
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
|
|
36
|
+
python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
|
|
24
37
|
```
|
|
25
38
|
|
|
26
|
-
|
|
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 (
|
|
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
|
|
41
|
+
python3 scripts/search.py "fintech crypto" --design-system
|
|
42
42
|
|
|
43
43
|
# Markdown - best for documentation
|
|
44
|
-
python3
|
|
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**:
|
|
40
|
+
- **Stack**: infer from project dependencies. If unknown and needed, ask.
|
|
41
41
|
|
|
42
|
-
### Step 2:
|
|
42
|
+
### Step 2: Choose the search mode
|
|
43
43
|
|
|
44
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
71
|
-
- `design-system
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
136
|
+
python3 scripts/search.py "animation accessibility" --domain ux
|
|
137
137
|
|
|
138
138
|
# Get alternative typography options if needed
|
|
139
|
-
python3
|
|
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
|
|
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.
|
|
Binary file
|
|
@@ -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
|
-
|
|
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
|
-
|
|
|
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),
|
|
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.
|