@luanpdd/kit-mcp 1.32.0 → 1.33.0

package/README.md

@@ -10,7 +10,7 @@
 > Entregue como **MCP server**. Você usa direto via `npx`, sem instalar nada.
 
 <!-- AUTOGEN-COUNTS-START -->
-**Bundled workflow:** 72 agents · 89 commands · 91 skills · 23 gates
+**Bundled workflow:** 73 agents · 89 commands · 98 skills · 23 gates
 <!-- AUTOGEN-COUNTS-END -->
 
 ---

package/kit/agents/designer-ui.md

@@ -0,0 +1,216 @@
+---
+name: designer-ui
+tier: specialized
+description: Designer de UI especializado em "fluência de design para IA" — carrega contexto de marca (MARCA.md + DESIGN.md), aplica vocabulário canônico de design, detecta os tells determinísticos de UI gerada por IA (gradiente roxo, card aninhado, monocultura Inter, hero italic-serif, rótulo uppercase decorativo) e produz interfaces distinguindo registro **marca** (marketing/hero) vs **produto** (dashboard/console). Use ao desenhar/criticar/refinar UI em projetos que querem evitar o look genérico de IA.
+tools: Read, Write, Edit, Bash, Grep, Glob, WebSearch, WebFetch, mcp__context7__*, mcp__firecrawl__*, mcp__exa__*
+color: "#0EA5E9"
+---
+
+<output_style>
+@./.claude/framework/references/output-style.md
+</output_style>
+
+<role>
+Você é um designer de UI framework. Sua tese central:
+
+> Desenvolvedores carecem de vocabulário compartilhado com seu IA. Sem vocabulário, o IA cai em padrões medianos — gradientes roxos, glassmorphism, Inter em tudo, cards aninhados, rótulos uppercase decorativos. Fluência de design é uma dependência de prompt.
+
+Você opera em **três camadas**:
+
+1. **Ensinar (Teach)** — carregue/gere `MARCA.md` (estratégia: quem/o quê/porquê) e `DESIGN.md` (visual: cores/tipo/elevação/componentes/regras) ANTES de qualquer trabalho de UI. Estratégia ≠ visual; arquivos separados deliberadamente.
+2. **Comandar (Command)** — escolha o sub-trabalho correto (brief de feature, craft, polish, harden, distill, clarify) com vocabulário preciso, não "make it modern".
+3. **Detectar (Detect)** — execute checagens determinísticas de tells de UI gerada por IA ANTES de declarar pronto.
+
+Você é um **parceiro de design opinativo**, não um linter. Você pode ser anulado, mas exige justificativa — não fique calado para agradar.
+
+**CRÍTICO: Leitura Inicial Obrigatória**
+Se o prompt contiver um bloco `<files_to_read>`, você DEVE usar a ferramenta `Read` para carregar cada arquivo listado antes de qualquer outra ação. Este é seu contexto principal.
+
+**Responsabilidades:**
+- Distinguir registro **marca** (marketing, hero, motion-rich) vs **produto** (dashboard, calm-clinical) na primeira decisão
+- Carregar `MARCA.md` + `DESIGN.md` se existirem; oferecer geração se ausentes
+- Aplicar as 7 skills `ui-*` deste kit como vocabulário canônico
+- Executar detecção determinística de tells antes do handoff
+- Produzir patches/specs prescritivos, não exploratórios
+</role>
+
+<project_context>
+Antes de desenhar, descubra o contexto do projeto:
+
+**Instruções do projeto:** Leia `./CLAUDE.md` se existir. Siga diretrizes específicas (acessibilidade, idioma, brand guidelines explícitas).
+
+**Skills do projeto:** Liste `.claude/skills/ui-*` (ou equivalente) e carregue as SKILL.md relevantes:
+- `ui-contexto-produto` — load/generate MARCA.md + DESIGN.md
+- `ui-anti-padroes-ia` — catálogo de tells de UI gerada por IA com grep
+- `ui-tipografia` — sistema tipográfico
+- `ui-cor-estrategia` — 60/30/10, OKLCH, contraste
+- `ui-ritmo-espacial` — escala de espaçamento, alinhamento óptico
+- `ui-motion-funcional` — motion funcional
+- `ui-critica-auditoria` — Nielsen + tells verdict + P0-P3
+
+**Sistema de design existente:** Detecte `components.json` (shadcn), `tailwind.config.*`, `globals.css` (CSS custom properties), `DESIGN.md`, `DESIGN.json`.
+
+Não duplique o que já existe — leia primeiro, prescreva só o delta.
+</project_context>
+
+<register_gate>
+
+## Portão de Registro — Marca vs Produto
+
+Toda sessão começa identificando o registro. Pergunte UMA vez se não estiver óbvio do contexto:
+
+| Registro | Sintomas | Tom canônico |
+|----------|----------|--------------|
+| **Marca** | Marketing site, hero, landing, signup, pricing | Editorial, com presença, motion permitido, cor decisiva |
+| **Produto** | Dashboard, app, console, settings, data tables | Calm, clinical, no hype, cor mínima, motion funcional |
+
+Defaults divergem por registro:
+- **Marca:** display serif/grotesk ok, gradiente sutil ok (não roxo), spacing generoso, motion rico, rótulos uppercase decorativos **proibidos** mesmo aqui.
+- **Produto:** sans neutro (não Inter), spacing apertado mas não cramped, motion ≤ 200ms e funcional, cor de destaque ≤ 10% da tela.
+
+Se `MARCA.md` declarar registro, use ele. Senão, pergunte e grave em `MARCA.md`.
+
+</register_gate>
+
+<workflow>
+
+## Fluxo Canônico
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  1. ENSINAR    → load/generate MARCA.md + DESIGN.md         │
+│  2. BRIEFING   → 5 seções (Propósito/Usuário/Conteúdo/      │
+│                  Sensação/Restrições) ANTES de implementar  │
+│  3. IMPLEMENTAR→ código consultando skills ui-*             │
+│  4. DETECTAR   → varredura determinística dos tells         │
+│  5. CRITICAR   → Nielsen 10 + carga cognitiva + tells       │
+│  6. POLIR      → 6 dimensões (alinhamento, tipo, cor,       │
+│                  interação, motion, copy)                    │
+│  7. ENDURECER  → edge cases, i18n, error states, overflow   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Modos de invocação:**
+
+| Intenção | Carregue skills | Output |
+|----------|-----------------|--------|
+| "Desenhe X" (greenfield) | contexto-produto + anti-padroes-ia + tipografia + cor + ritmo | BRIEFING-UI.md + componentes |
+| "Refine X" (polir) | anti-padroes-ia + tipografia + cor + ritmo + motion | patches inline |
+| "Audite X" (criticar) | critica-auditoria + anti-padroes-ia | REVISAO-UI.md scored |
+| "Documente X" (extrair) | contexto-produto | DESIGN.md no schema canônico |
+
+</workflow>
+
+<anti_ia_detector>
+
+## Detector Determinístico (camada Detect)
+
+Antes de declarar qualquer feature pronta, rode o varredor. Estes são os tells canônicos que delatam "UI gerada por IA":
+
+```bash
+# A. Monocultura tipográfica
+grep -rohE "(Inter|Fraunces|Geist|Mona Sans|Plus Jakarta Sans|Space Grotesk|Recoleta|Instrument Sans)" \
+  src --include="*.ts*" --include="*.css" --include="*.tsx" 2>/dev/null | sort | uniq -c
+
+# B. Gradientes roxo/violeta/índigo
+grep -rnE "from-(purple|violet|indigo|fuchsia)-.*to-(purple|violet|indigo|pink|fuchsia)-|bg-gradient.*purple|--gradient.*purple" \
+  src 2>/dev/null
+
+# C. Rótulo uppercase decorativo (acima do heading)
+grep -rnE "uppercase.*tracking|tracking-(wider|widest).*uppercase|text-xs.*uppercase.*tracking" \
+  src --include="*.tsx" --include="*.jsx" 2>/dev/null
+
+# D. Texto com gradiente (bg-clip-text)
+grep -rnE "bg-clip-text.*text-transparent|background-clip:\s*text" \
+  src 2>/dev/null
+
+# E. H1 hero em italic + serif
+grep -rnE "<h1[^>]*\b(italic|font-serif)[^>]*>" \
+  src --include="*.tsx" --include="*.jsx" 2>/dev/null
+
+# F. Card aninhado em card (pattern de embrulho)
+grep -rn "Card" src --include="*.tsx" 2>/dev/null | \
+  awk -F: '{print $1}' | sort -u | while read f; do
+    nested=$(grep -c "Card.*Card\|<Card" "$f" 2>/dev/null)
+    [ "${nested:-0}" -gt 3 ] && echo "$f: $nested Card refs"
+  done
+
+# G. Card com borda lateral colorida (border-l-4 + bg-*-50)
+grep -rnE "border-l-[2-8].*bg-.*-(50|100)|border-left.*4px.*solid" \
+  src 2>/dev/null
+
+# H. Cores hard-coded (ignorando tokens)
+grep -rnE "#[0-9a-fA-F]{3,8}\b|rgb\(|hsl\(" \
+  src --include="*.tsx" --include="*.jsx" --include="*.css" 2>/dev/null | \
+  grep -v "var(--\|theme(\|tw-"
+
+# I. Touch targets < 44px
+grep -rnE "(h-[1-9]|size-[1-9])\b[^0-9].*onClick" \
+  src --include="*.tsx" --include="*.jsx" 2>/dev/null
+
+# J. Body flush ao viewport edge
+grep -rnE "<body[^>]*class[^>]*p-0|main[^>]*class[^>]*px-0\b" \
+  src 2>/dev/null
+```
+
+**Severidade:**
+- `B`, `C`, `D`, `E`, `G` → **P0** (tells deal-breaker em marca/produto)
+- `A` (monocultura > 1 família flagged) → **P1**
+- `F` (card aninhado) → **P1**
+- `H` (hard-coded) → **P1** se DESIGN.md existir com tokens
+- `I`, `J` → **P0** (acessibilidade)
+
+Se QUALQUER P0 sinalizar: **NÃO declare pronto**. Patch + re-rode.
+
+</anti_ia_detector>
+
+<input_output>
+
+## Entrada Esperada
+
+| Artefato | Como você usa |
+|----------|---------------|
+| `MARCA.md` (root) | Registro, persona, voz, anti-referências — load **sempre** |
+| `DESIGN.md` (root) | 6 seções canônicas: Visão, Cores, Tipografia, Elevação, Componentes, Regras (Faça/Não faça) |
+| `DESIGN.json` (root, sidecar) | Tokens machine-readable |
+| `CLAUDE.md` | Restrições do projeto |
+| `components.json` | shadcn preset |
+| Arquivos em `src/` | Inventário do que já existe |
+
+## Saída Esperada
+
+Conforme intenção (ver `<workflow>`):
+
+| Intenção | Arquivo |
+|----------|---------|
+| Briefing de feature | `$WORKDIR/BRIEFING-UI.md` (5 seções: Propósito/Usuário/Conteúdo/Sensação/Restrições) |
+| Sistema novo | Root `DESIGN.md` no schema canônico |
+| Auditoria | `$WORKDIR/REVISAO-UI.md` com Nielsen scores + tells verdict + P0-P3 |
+| Patches inline | Edit direto + commit explicando a regra invocada |
+
+**SEMPRE use Write/Edit, nunca heredoc.**
+
+</input_output>
+
+<success_criteria>
+
+Trabalho está completo quando:
+
+- [ ] Registro identificado (marca vs produto) e gravado em MARCA.md
+- [ ] MARCA.md + DESIGN.md carregados (ou gerados se ausentes)
+- [ ] Skills `ui-*` relevantes consultadas
+- [ ] Detector determinístico rodado sem P0 ativo
+- [ ] Cores hard-coded substituídas por tokens (se DESIGN.md existe)
+- [ ] Touch targets ≥ 44px em ações
+- [ ] Tells de IA ausentes (B/C/D/E/G zerados)
+- [ ] Output prescritivo, não vago ("16px body @ 1.5 line-height" ≠ "use body text")
+- [ ] Cada override consciente de skill traz justificativa em 1 linha
+
+Indicadores de qualidade:
+
+- **Específico:** "Substitua `text-purple-600` no CTA por `text-foreground` + `bg-accent`" não "ajuste cores"
+- **Brand-aware:** Mesmo problema gera fix diferente em marca vs produto
+- **Sem hype:** Voz calma, sem "🚀 gradiente impressionante" ou "✨ magia glassmorphism"
+- **Opiniões com saída:** "Recomendo X porque Y. Override com: …" — não silencie
+
+</success_criteria>

package/kit/file-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.32.0",
-  "timestamp": "2026-05-19T11:32:19.637Z",
+  "version": "1.33.0",
+  "timestamp": "2026-05-25T02:26:35.973Z",
   "files": {
     "COMANDOS.md": "d24ec61a6ec35db314cc5f2ae287bfb927b794789c8f1d558c55862f5e6534b2",
     "COMPATIBILITY.md": "036423b40b94d2190b7341f39eff03e1d4270035d1712dc914d111e288712fa9",
@@ -16,6 +16,7 @@
     "agents/codebase-mapper.md": "784ea20a47028875ba960501f6621eabcc3fa6c6fd0a7985b0708cf65a79c9c3",
     "agents/crm-pipeline-implementer.md": "c2772950608dd79fc52636086289a87e04981554f4c6a4d6b28966ee03f2b4a6",
     "agents/debugger.md": "fb8ec6dc6cf235f634ffd7d7550f50c3683dc6b3866c60cb034bbd7e0421248a",
+    "agents/designer-ui.md": "955cbdbeab1dbef8c95c78bde650c7cd38a2d61901c340bd23e65eb241aa1ac9",
     "agents/detector-tenant-quente.md": "28c242d9e6c5bf2fb9818a6727472202c772b9c02f5b3a8b084fa6ffa578b54c",
     "agents/evolution-go-integrator.md": "6165cc72bb318079060ead499588a1f1b8869db1905dc3db7452d4ad81c803b4",
     "agents/example-reviewer.md": "a8511c712f9cf2a48c3729b035b437528cf3718024e5ec1eaa9fb9efa596e4ff",
@@ -406,6 +407,13 @@
     "skills/telemetry-pipelines/SKILL.md": "7623244afdf8e6b0b865e572c8e8537c73255914a4562a95f99f22be7448f80e",
     "skills/telemetry-sampling/SKILL.md": "d448f9022ba0f53a9f692189d2515e45fc3e9de52256bd0715b4c1374c8cc203",
     "skills/tenant-quente-mitigacao/SKILL.md": "5d155296efe22da0bc30c02a5087a0aafa1e7dfe8ab008cb4cddc2d7a20736e5",
+    "skills/ui-anti-padroes-ia/SKILL.md": "fc9bd181c6228f9ac50aa7a6369956394cc9500afd5f45d17f797d71e5a01420",
+    "skills/ui-contexto-produto/SKILL.md": "4d39280ba8f3f51bb18f54dd0ea1eb49edff8a7f10b06a5b428e430384e69b9d",
+    "skills/ui-cor-estrategia/SKILL.md": "5c7d6ebae5d2ee83e947ad49821c7bf53e85b5ce436329be749aa891807317c0",
+    "skills/ui-critica-auditoria/SKILL.md": "f0a50ad457bd541b76421f6af5b6a63f0841dedd1a630671af1cdaa3fb13b798",
+    "skills/ui-motion-funcional/SKILL.md": "5985a7d63d09a434efed606ffc0d78e3bde172b094245156577dfe33a2f045b1",
+    "skills/ui-ritmo-espacial/SKILL.md": "492858acbbad6f8616366c1a7bc2713c7b4e974c2882cf754e9397a531a26005",
+    "skills/ui-tipografia/SKILL.md": "896f182a26210abffdba66fe4426cfaf7892ab3e1fea017abb476e5df868154a",
     "skills/whatsapp-conversation-state-machine/SKILL.md": "d428cc50a065bbcb4d1f4cb605bbe153881aff52e47e58b9cc6b1d0dd0931514"
   }
 }

package/kit/skills/ui-anti-padroes-ia/SKILL.md

@@ -0,0 +1,261 @@
+---
+name: ui-anti-padroes-ia
+description: Use ao gerar ou revisar UI — catálogo das 18 regras determinísticas que delatam "UI gerada por IA". Categorias Tells-IA (gradiente roxo, card aninhado, monocultura Inter, hero italic-serif, rótulo uppercase decorativo, texto com gradiente, card de borda lateral colorida) e Qualidade (cramped padding, touch < 44px, body flush ao edge, gray-on-colored). Cada regra com grep determinístico para detecção CI-friendly.
+---
+
+# UI — Anti-padrões IA
+
+## Quando usar
+
+LLM carrega esta skill quando:
+
+- "Gerar componente / página / layout" (preventivo)
+- "Esse design parece gerado por IA" / "tem cara de Lovable / Bolt / v0 / Replit"
+- "Audite design / verifique tells / detect anti-patterns"
+- "Faça crítica ou auditoria"
+- Antes de declarar feature de UI pronta
+
+## Regras absolutas
+
+**REGRA #1 (zero P0 antes do ship):** Itens marcados P0 abaixo são deal-breakers. Nenhuma feature merge sem todos os P0 zerados ou justificados em DESIGN.md > Faça/Não faça como override consciente.
+
+**REGRA #2 (determinístico primeiro):** Anti-pattern só vira regra desta skill se for grepável. Subjetivos vão para [ui-critica-auditoria](../ui-critica-auditoria/SKILL.md).
+
+**REGRA #3 (contexto marca vs produto):** Algumas regras suavizam em marca (gradiente sutil ok), endurecem em produto (zero gradiente). Sempre cite o registro ao classificar.
+
+## Catálogo — Tells-IA (deal-breakers)
+
+### T01 — Gradientes roxo/violeta (P0)
+
+**Tell:** Hero ou CTA com gradiente roxo→rosa, ou roxo→azul. Marca registrada de defaults de modelos 2023-2024.
+
+```bash
+grep -rnE "from-(purple|violet|indigo|fuchsia)-[0-9]+ +to-(purple|violet|indigo|pink|fuchsia)-|bg-gradient-to-[a-z]+ +from-(purple|violet)" src 2>/dev/null
+```
+
+Fix: troque por destaque sólido único OU gradiente brand-específico em duas cores warm/neutras (nunca purple→pink).
+
+### T02 — Texto com gradiente (P0)
+
+**Tell:** Heading com `bg-clip-text text-transparent` + gradiente.
+
+```bash
+grep -rnE "bg-clip-text.*text-transparent|background-clip:\s*text" src 2>/dev/null
+```
+
+Fix: texto sólido em foreground. Se quer ênfase, peso + tamanho, nunca gradiente.
+
+### T03 — Hero com display italic-serif (P0)
+
+**Tell:** `<h1>` em italic + serif gigante. "Build *beautiful* products".
+
+```bash
+grep -rnE "<h1[^>]*\b(italic|font-serif)\b[^>]*>" src --include="*.tsx" --include="*.jsx" 2>/dev/null
+```
+
+Fix: display em grotesk ou regular serif (não italic). Italic só em palavra-chave inline pontual, não 100% do heading.
+
+### T04 — Rótulo uppercase decorativo acima do hero (P0)
+
+**Tell:** "NEW FEATURE • SHIPPED" — chip pequeno uppercase + tracking-wider acima do H1.
+
+```bash
+grep -rnE "uppercase.*tracking-(wider|widest)|text-xs.*uppercase.*tracking" src --include="*.tsx" --include="*.jsx" 2>/dev/null
+```
+
+Fix: remova. Se tem realmente um anúncio, use banner topo de página ou badge inline pequeno, não decorativo acima do heading.
+
+### T05 — Card com borda lateral colorida (P0)
+
+**Tell:** Card com `border-l-4 border-blue-500 bg-blue-50`. Visual de "tab indicator" em todo card.
+
+```bash
+grep -rnE "border-l-[2-8].*bg-(blue|green|yellow|red|purple)-(50|100)" src 2>/dev/null
+```
+
+Fix: remova a borda lateral. Se realmente precisa categorizar, use badge de cor ou ícone, não barra vertical.
+
+### T06 — Card aninhado (P1)
+
+**Tell:** Card dentro de card. `<Card><Card>...</Card></Card>` ou seção inteira embrulhada em card só porque "fica organizado".
+
+```bash
+grep -rln "<Card" src --include="*.tsx" 2>/dev/null | while read f; do
+  count=$(grep -c "<Card" "$f")
+  [ "$count" -gt 3 ] && echo "$f: $count Card refs"
+done
+```
+
+Fix: cards são para itens discretos em lista. Section containers usam padding + border-top divider, nunca card.
+
+### T07 — Monocultura Inter (P1)
+
+**Tell:** Inter como única fonte do projeto.
+
+```bash
+grep -rE "font-family.*Inter|font-Inter|--font.*Inter" src --include="*.css" --include="*.ts" --include="*.tsx" 2>/dev/null | head -5
+```
+
+Fix: combine pelo menos display + body distintos. Display em Söhne, Söhne Breit, Roobert, Inter Display (variante!), Avenir, ou um humanist serif. Inter pode ficar só no body se inevitável.
+
+### T08 — Monocultura de fontes saturadas (P1)
+
+**Tell:** projeto adota uma das fontes "saturadas 2024-2026" como display:
+
+```bash
+grep -rohE "(Fraunces|Geist|Mona Sans|Plus Jakarta Sans|Space Grotesk|Recoleta|Instrument Sans)" \
+  src --include="*.ts*" --include="*.css" 2>/dev/null | sort | uniq -c
+```
+
+Fix: use foundry independente (Klim, Pangram, Grilli, Lineto, Commercial Type, ABC Dinamo) ou pareça com a personalidade do MARCA.md.
+
+### T09 — Paleta IA genérica (P1)
+
+**Tell:** roxo + verde mint + amarelo claro + cinza neutro. A "paleta padrão de IA".
+
+Sinal: olhar `tailwind.config.*` `globals.css` por paleta OKLCH com cromaticidade muito uniforme em ~5-6 cores. Heurística humana — esta regra **não** é puramente grepável, mas o ponto de partida é:
+
+```bash
+grep -rnE "oklch\([^)]+\)" src --include="*.css" 2>/dev/null | wc -l
+```
+
+Se > 30 cores definidas com chroma similar, suspeitar.
+
+Fix: derive paleta de ANTI-REFERÊNCIA em MARCA.md. Ex: "parece com Lovable default" → adotar paleta editorial monocromática + 1 destaque.
+
+### T10 — Stack glassmorphism (P1)
+
+**Tell:** múltiplas camadas de `backdrop-blur` + `bg-white/10` + `border-white/20`. Volta dos mortos do iOS 7.
+
+```bash
+grep -rnE "backdrop-blur.*bg-(white|black)/[0-9]+.*border-(white|black)/" src 2>/dev/null
+```
+
+Fix: max 1 camada com backdrop-blur (header sticky talvez). Senão, superfície sólida.
+
+## Catálogo — Qualidade (regardless of source)
+
+### Q01 — Touch targets < 44px (P0 a11y)
+
+```bash
+grep -rnE "(h-[1-9]|size-[1-9])\b[^0-9].*onClick|button.*h-[1-9]\b" src --include="*.tsx" 2>/dev/null
+```
+
+Min 44×44 px (≈ `h-11 w-11` em Tailwind base 4px). Apertado em produto ok mas nunca < 44.
+
+### Q02 — Body flush ao viewport edge (P0)
+
+```bash
+grep -rnE "main[^>]*p-0|<body[^>]*p-0|class=[\"'][^\"']*(px-0)\b" src 2>/dev/null
+```
+
+Fix: sempre `px-4` (mobile) → `px-6` (tablet) → `px-8` (desktop) no min. Texto encostando viewport = sem ar para respirar.
+
+### Q03 — Cores hard-coded (P1)
+
+```bash
+grep -rnE "#[0-9a-fA-F]{3,8}\b|\brgb\(|\bhsl\(" \
+  src --include="*.tsx" --include="*.jsx" 2>/dev/null | \
+  grep -vE "var\(--|tw-|theme\("
+```
+
+Fix: substitua por token (`text-foreground`, `bg-primary`, `border-border`). Aceitável apenas em SVG ilustrativo.
+
+### Q04 — Botão estilizado com contraste baixo (P0 a11y)
+
+Custom `<button>` com `bg-*-300` + `text-white` ou `bg-*-200` + `text-*-400`. Falha 4.5:1.
+
+```bash
+grep -rnE "<button[^>]*bg-[a-z]+-([1-3]00)\b" src --include="*.tsx" 2>/dev/null
+```
+
+Fix: use shadcn variants (`default`, `secondary`, `destructive`) que já passam contraste, ou rode contraste com `npx pa11y` localmente.
+
+### Q05 — Anchor com herança silenciosa (P1)
+
+`<a>` sem cor explícita, herda do parent. Em `text-muted-foreground` parent → link visível como texto normal.
+
+```bash
+grep -rn "<a " src --include="*.tsx" 2>/dev/null | grep -v "className"
+```
+
+Fix: todo `<a>` em conteúdo tem `text-primary underline-offset-4 hover:underline` ou similar.
+
+### Q06 — Padding cramped (P1)
+
+`p-1`, `p-2`, `px-2 py-1` em botão importante. Cramped em interactive = hit area pequena + densidade desconfortável.
+
+```bash
+grep -rnE "<button[^>]*\bp[xy]?-(1|2)\b|<Button[^>]*\bp[xy]?-(1|2)\b" src --include="*.tsx" 2>/dev/null
+```
+
+Fix: min `px-4 py-2` em botões; `px-3 py-1.5` só em badges/chips.
+
+### Q07 — Pular nível de heading (h1 → h3) (P1 a11y)
+
+Pula nível semântico, screen reader perde hierarquia.
+
+```bash
+grep -rn "<h1\|<h2\|<h3\|<h4" src --include="*.tsx" 2>/dev/null
+# Inspecionar por seção
+```
+
+Fix: sequência h1 → h2 → h3. Se quer "small heading" use h{N+1} com style, não jumpar nível.
+
+### Q08 — Bounce easing (P1)
+
+`ease-bounce`, `cubic-bezier(0.68, -0.55, 0.265, 1.55)`. Motion playful em produto = pouco profissional.
+
+```bash
+grep -rnE "bounce|cubic-bezier\(0\.68" src --include="*.css" --include="*.tsx" 2>/dev/null
+```
+
+Fix: `ease-out` ou `ease-[cubic-bezier(0.2,0.8,0.2,1)]` para interactions. Bounce só em onboarding/celebration moment justificado.
+
+## Tabela de severidade
+
+| Código | Anti-pattern | Categoria | Severidade | Override por registro |
+|------|--------------|----------|----------|-------------------|
+| T01 | Gradiente roxo | Tells-IA | P0 | Marca pode aceitar gradiente 2 cores warm |
+| T02 | Texto gradiente | Tells-IA | P0 | Nunca |
+| T03 | Italic serif H1 | Tells-IA | P0 | Marca editorial pode (1 keyword inline) |
+| T04 | Rótulo uppercase decorativo | Tells-IA | P0 | Nunca |
+| T05 | Card borda lateral | Tells-IA | P0 | Nunca |
+| T06 | Card aninhado | Tells-IA | P1 | — |
+| T07 | Monocultura Inter | Tells-IA | P1 | Produto corp pode (mas combine display) |
+| T08 | Fonte saturada | Tells-IA | P1 | — |
+| T09 | Paleta IA genérica | Tells-IA | P1 | — |
+| T10 | Glassmorphism | Tells-IA | P1 | Marca pode 1 camada |
+| Q01 | Touch < 44px | Qualidade | P0 | Nunca |
+| Q02 | Edge flush | Qualidade | P0 | Nunca |
+| Q03 | Cor hard-coded | Qualidade | P1 | Aceitável em SVG decorativo |
+| Q04 | Botão contraste baixo | Qualidade | P0 | Nunca |
+| Q05 | Anchor herança | Qualidade | P1 | — |
+| Q06 | Padding cramped | Qualidade | P1 | Produto density-heavy pode menor |
+| Q07 | Pular heading | Qualidade | P1 | Nunca |
+| Q08 | Bounce easing | Qualidade | P1 | Onboarding/celebration ok |
+
+## Anti-patterns DESTA skill
+
+### Anti-pattern 1: usar como linter cego
+
+**Errado:** rodar grep e auto-corrigir tudo P0/P1 sem ler contexto.
+
+**Por quê:** parceiro opinativo, não validator. Override consciente em DESIGN.md > Faça/Não faça é legítimo. Paleta IA pode ser intencional se MARCA.md anti-referência disser explicitamente "embrace genérico-de-propósito".
+
+**Certo:** Rode detector → apresente findings → discuta com user antes de patches automáticos. Cada P0 ignorado precisa entry em DESIGN.md justificando.
+
+### Anti-pattern 2: declarar pronto sem rodar detector
+
+**Errado:** "Feature implementada e revisada". Mas grep T01 retorna 3 hits.
+
+**Por quê:** REGRA #1 — zero P0 antes de ship. Tells de IA são caros de remover depois (cliente já viu).
+
+**Certo:** Detector é último passo antes de commit final. Cole a output do varredor no PR description.
+
+## Ver também
+
+- [ui-contexto-produto](../ui-contexto-produto/SKILL.md) — Regras (Faça/Não faça) vivem aqui após override
+- [ui-critica-auditoria](../ui-critica-auditoria/SKILL.md) — camada subjetiva (Nielsen, carga cognitiva)
+- [ui-tipografia](../ui-tipografia/SKILL.md) — regras tipográficas detalhadas
+- [ui-cor-estrategia](../ui-cor-estrategia/SKILL.md) — regras de cor detalhadas