@luanpdd/kit-mcp 1.34.0 → 1.36.0

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

@@ -1,261 +1,261 @@
----
-name: ui-anti-padroes-ia
-description: Use ao gerar/revisar UI — catalogo de 18 regras que delatam UI gerada por IA. Tells (gradiente roxo, card aninhado, monocultura Inter) + Qualidade (touch <44px, edge flush). Grep 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
+---
+name: ui-anti-padroes-ia
+description: Use ao gerar/revisar UI — catalogo de 18 regras que delatam UI gerada por IA. Tells (gradiente roxo, card aninhado, monocultura Inter) + Qualidade (touch <44px, edge flush). Grep 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