@luanpdd/kit-mcp 1.32.0 → 1.34.0

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

@@ -0,0 +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

package/kit/skills/ui-contexto-produto/SKILL.md

@@ -0,0 +1,248 @@
+---
+name: ui-contexto-produto
+description: Use ANTES de trabalho de UI — carrega/gera MARCA.md (marca vs produto, persona, voz, anti-refs) + DESIGN.md (Visao/Cores/Tipografia/Elevacao/Componentes/Regras). Bootstrap de fluencia de design IA.
+---
+
+# UI — Contexto de Produto (MARCA.md + DESIGN.md)
+
+## Quando usar
+
+LLM carrega esta skill quando:
+
+- "Desenhe / refine / audite UI" em projeto que ainda não tem brand spec
+- "Crie um DESIGN.md / MARCA.md / docs de design system"
+- "Onboard o IA no design deste projeto"
+- "Faça o ensino / extração de design"
+- Antes de invocar agente `designer-ui` pela primeira vez
+
+## Regras absolutas
+
+**REGRA #1 (separação de preocupações):** `MARCA.md` responde **estratégia** (quem/o quê/porquê). `DESIGN.md` responde **visual** (como aparenta). Nunca coloque cor, fonte ou pixel em MARCA.md. Nunca coloque persona ou tom de voz em DESIGN.md.
+
+**REGRA #2 (registro primeiro):** Primeira pergunta sempre é registro: **marca** (marketing, hero, motion-rich) vs **produto** (dashboard, calm-clinical). Tudo deriva disso.
+
+**REGRA #3 (específico, não adjetivo):** Recuse respostas genéricas. "Moderno e limpo" → reject. "Caloroso, mecânico, opinativo" → accept. Referências por **nome próprio**: "Linear sidebar density", não "técnico e limpo".
+
+**REGRA #4 (6 seções fixas):** DESIGN.md tem exatamente 6 seções, em ordem fixa, com nomes fixos. NÃO adicione Layout, Motion ou Responsivo como top-level — eles vivem dentro de Componentes ou Regras.
+
+**REGRA #5 (ancorado no codebase):** Modo scan lê tokens reais (CSS vars, Tailwind config, shadcn preset). Nunca invente valores que o codebase não suporta — marque como `<!-- RASCUNHO -->` se vier de prompt e não de código.
+
+## Template canônico — MARCA.md
+
+```markdown
+# MARCA.md
+
+> Contexto estratégico para parceiros de design IA. Visuais vivem em DESIGN.md.
+
+## Registro
+{marca | produto | híbrido — justifique em 1 linha}
+
+## Usuários
+- Primário: {persona específica, contexto, estado de espírito}
+  Exemplo: "SRE em on-call às 3h, debugando incidente, só mobile, janela de paciência 90s"
+- Secundário: {se houver}
+
+## Propósito
+{O que o produto faz, em 1 frase de no máximo 20 palavras. Sem "platform" ou "solution"}
+
+## Personalidade
+3-5 adjetivos. Exemplo: "Calmo, clínico, opinativo, mecânico, sem hype"
+Reject: "moderno, limpo, simples, intuitivo" (genéricos)
+
+## Referências
+- {Nome próprio + URL}. Ex: "Linear app — densidade de sidebar"
+- {Nome próprio + URL}. Ex: "Vercel dashboard — empty states"
+
+## Anti-referências
+- {Nome próprio + razão}. Ex: "Templates SaaS genéricos — sobreuso de cards"
+- {Nome próprio + razão}. Ex: "Hero Stripe 2014 — era do gradiente roxo"
+
+## Voz
+- Tom: {calmo | brincalhão | clínico | caloroso | mecânico | outro}
+- Tempo verbal: {presente padrão | passado para eventos}
+- Frases banidas: {liste 3-5. Ex: "alavancar", "seamless", "incrível"}
+
+## Acessibilidade
+- WCAG: {AA | AAA}
+- Locale: {pt-BR primário | en secundário | etc}
+- Sensibilidade a motion: {respeitar prefers-reduced-motion: sim/não — default sim}
+- Daltonismo: {protanopia/deuteranopia testados via tooling}
+
+## Restrições
+- {Técnica. Ex: "shadcn/ui locked", "Tailwind v4 OKLCH tokens"}
+- {Negócio. Ex: "deve parecer sério para pitch enterprise"}
+```
+
+## Template canônico — DESIGN.md
+
+```markdown
+# DESIGN.md
+
+> Sistema visual. Agentes IA leem isto antes de gerar UI. 6 seções, ordem fixa.
+
+## Visão
+{North Star em 2-3 frases. O "feeling" do produto traduzido em direção visual.}
+Exemplo: "Quietude editorial. Preto sobre creme, accent único, espaçamento generoso, motion apenas em mudança de estado."
+
+## Cores
+- Superfície (60%): `{token | hex}` — `--background`
+- Secundária (30%): `{token | hex}` — `--muted`
+- Destaque (10%): `{token | hex}` — reservada para: {liste elementos exatos. Ex: "apenas CTA primário"}
+- Destrutiva: `{token | hex}` — reservada para: confirmação de ação irreversível
+- Foreground / contraste: AA mín 4.5:1 em cada superfície
+Modo: {claro só | escuro só | ambos com pref do sistema}
+
+## Tipografia
+- Display ({nome próprio}): h1/h2 hero
+- Body ({nome próprio}): todo o resto
+- Mono ({nome próprio}): código, dados, tempo
+
+Tamanhos (exatos, máximo 4): {ex: 14, 16, 20, 32}
+Pesos (exatos, máximo 2): {ex: 400, 600}
+Altura de linha: body 1.5, heading 1.2
+Comprimento de linha: 50-75 chars body, 30-50 hero
+
+Banidas: {liste fontes proibidas. Ex: "Inter, Geist, Space Grotesk" se quer fugir do default genérico}
+
+## Elevação
+Filosofia: {flat | sombra sutil | dramático | nenhuma}
+Tokens:
+- `elev-0`: `none` — superfície rasa
+- `elev-1`: `{shadow value}` — cards, popovers
+- `elev-2`: `{shadow value}` — modais, command palette
+Anti-pattern: glassmorphism (`backdrop-blur` em ≥ 3 camadas) PROIBIDO
+
+## Componentes
+Notas breves de caráter por padrão. Não replique docs do shadcn — declare *o que é opinativo aqui*.
+- **Button**: {raio, peso, altura, caráter}. Ex: "Raio 4px afiado, semibold, h-10, sem sombra"
+- **Card**: {quando usar, quando NÃO}. Ex: "Apenas para itens de dados em lista. Nunca envolva uma seção em card. Nunca aninhe."
+- **Input**: {caráter}. Ex: "Apenas underline, sem borda, foco = border-bottom accent"
+- **Dialog**: {motion, tamanho, dismiss}. Ex: "Slide-from-bottom em mobile, scale central em desktop, ESC sempre dismissa"
+- **Toast**: {posição, duração, caráter}
+
+## Regras (Faça / Não faça)
+FAÇA:
+- {regra brand-específica. Ex: "Use cor de destaque APENAS em CTA primário por tela"}
+- {regra. Ex: "Body copy max 70ch — wrap container em 65ch"}
+
+NÃO FAÇA:
+- {anti-pattern relevante. Ex: "Sem gradiente em texto. Nunca."}
+- {anti-pattern brand. Ex: "Sem emoji em strings de UI fora de error toasts"}
+- {anti-pattern. Ex: "Nunca envolva headings em italic serif. Display é grotesk."}
+```
+
+## Sidecar — DESIGN.json
+
+Companion machine-readable. Tokens primários extraídos do codebase:
+
+```json
+{
+  "version": "1.0",
+  "tokens": {
+    "color": {
+      "surface": "oklch(0.99 0 0)",
+      "muted": "oklch(0.94 0.005 240)",
+      "accent": "oklch(0.55 0.18 28)"
+    },
+    "typography": {
+      "display": "Söhne Breit",
+      "body": "Söhne",
+      "sizes": [14, 16, 20, 32],
+      "weights": [400, 600]
+    },
+    "spacing": [4, 8, 16, 24, 32, 48, 64],
+    "radius": { "default": 4, "pill": 9999 }
+  }
+}
+```
+
+## Workflow
+
+### Modo Scan (codebase existe)
+
+1. `Grep` por `tailwind.config.*`, `globals.css`, `:root {` para extrair tokens
+2. `Read` `components.json` (shadcn) para preset
+3. `Glob` `src/components/**` para inventário
+4. Apresentar valores detectados → pedir confirmação para Visão + notas de caráter
+5. Gerar MARCA.md (via entrevista) + DESIGN.md (via scan + confirmação)
+
+### Modo Rascunho (greenfield)
+
+1. Entrevista de 5-8 minutos. Perguntas mínimas:
+   - Registro (marca vs produto)?
+   - Usuário primário em 1 frase com contexto + estado de espírito?
+   - 3-5 adjetivos de personalidade (não-genéricos)?
+   - 2-3 referências **nomeadas** com URL?
+   - 2 anti-referências **nomeadas**?
+   - Locale + nível WCAG?
+2. Scaffold DESIGN.md com comentários `<!-- RASCUNHO -->` em valores não-extraídos
+3. Marcar para revisão pós-implementação inicial
+
+## Anti-patterns
+
+### Anti-pattern 1: misturar estratégia e visual
+
+**Errado (MARCA.md):**
+```markdown
+## Personalidade
+Moderno, limpo, com #4F46E5 primário
+```
+
+**Por quê:** REGRA #1 — cor pertence a DESIGN.md. MARCA.md fica fora de sincronia quando rebrand.
+
+**Certo:** "Personalidade: Mecânico, opinativo" em MARCA.md. "#4F46E5" em DESIGN.md > Cores > Destaque.
+
+### Anti-pattern 2: respostas adjetivais genéricas
+
+**Errado:**
+```markdown
+## Referências
+- Apps SaaS modernos
+- Design systems limpos
+```
+
+**Por quê:** REGRA #3 — sem nome próprio, IA volta ao default genérico ("dribbble médio").
+
+**Certo:**
+```markdown
+## Referências
+- [Linear](https://linear.app) — densidade de sidebar + gravidade do command palette
+- [Klim Type Foundry](https://klim.co.nz) — hero editorial quieto
+```
+
+### Anti-pattern 3: criar Layout/Motion/Responsivo como seção top-level em DESIGN.md
+
+**Errado:**
+```markdown
+## Visão
+## Cores
+## Tipografia
+## Layout            ← não!
+## Motion            ← não!
+## Responsivo        ← não!
+```
+
+**Por quê:** REGRA #4 — schema canônico tem 6 seções fixas. Layout/motion/responsivo são propriedades dos Componentes ou regras em Faça/Não faça. Agentes IA downstream esperam o schema fixo.
+
+**Certo:** Embuta em Componentes ("Dialog: slide-from-bottom em mobile, scale central em desktop") ou Regras ("FAÇA: respeitar prefers-reduced-motion").
+
+### Anti-pattern 4: MARCA.md sem anti-referências
+
+**Errado:**
+```markdown
+## Referências
+- Linear
+## Personalidade
+- Limpo
+```
+(sem anti-referências)
+
+**Por quê:** IA tende a regressão à média. Sem "NÃO se parecer com X", o output gravita para template SaaS médio mesmo com referências fortes.
+
+**Certo:** sempre 2+ anti-referências nomeadas com razão.
+
+## Ver também
+
+- [ui-anti-padroes-ia](../ui-anti-padroes-ia/SKILL.md) — catálogo de tells a evitar (alimenta seção Não faça de DESIGN.md)
+- [ui-tipografia](../ui-tipografia/SKILL.md) — preenche seção Tipografia
+- [ui-cor-estrategia](../ui-cor-estrategia/SKILL.md) — preenche seção Cores