@luanpdd/kit-mcp 1.32.0 → 1.33.0

package/kit/skills/ui-ritmo-espacial/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: ui-ritmo-espacial
+description: Use ao definir spacing, padding, layout, grid ou alinhamento — escala canônica em base 4 (4/8/16/24/32/48/64/96), alinhamento óptico ≠ matemático (ícones, glifos), breathing room obrigatório no viewport edge, container width via ch unit em texto, evita arbitrary values [13px] e padding cramped em interactive.
+---
+
+# UI — Ritmo Espacial
+
+## Quando usar
+
+LLM carrega esta skill quando:
+
+- "Espaçamento parece estranho / cramped / inconsistente"
+- "Alinhar elementos / grid / layout"
+- "Padding em botão / card / dialog"
+- "Container width / max-width"
+- "Optical alignment" / "está 1px off"
+- Preenchendo seção **Componentes** com spacing rules
+
+## Regras absolutas
+
+**REGRA #1 (escala base-4):** Spacing apenas em múltiplos de 4. Permitidos: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128`. **Proibidos:** valores arbitrários `[13px]`, `[27px]`, `[1.7rem]`. Se você precisa de um, problema é de escala não documentada.
+
+**REGRA #2 (3 níveis de densidade):**
+- **Densa** (`gap-1`/`p-2`/`px-3`): tables, data grids, command palettes
+- **Padrão** (`gap-4`/`p-4`/`px-6`): cards, forms, sections
+- **Generosa** (`gap-8`/`p-8`/`px-12`): heroes, marketing, empty states
+
+Misturar densa + generosa na mesma seção = ritmo quebrado.
+
+**REGRA #3 (no edge flush):** Texto e UI sempre com padding lateral mínimo `px-4` (mobile) → `px-6` (tablet) → `px-8` (desktop). Conteúdo nunca encosta na viewport.
+
+**REGRA #4 (container width em ch):** Containers de texto têm `max-width` em `ch` unit (50-75ch body). Container de UI em `max-w-7xl` (1280px) ou `max-w-5xl` (1024px) padrão.
+
+**REGRA #5 (alinhamento óptico):** Ícones e glifos têm bounding box que ≠ shape óptico. Centralização matemática vê desalinhada. Compense: setas/triângulos shift -1 ou -2 px na direção oposta da ponta. Texto + ícone vertical alinha pela `cap-height`, não pela baseline.
+
+## Escala canônica
+
+```js
+// tailwind.config.js — restrinja explicit, esconda o resto
+module.exports = {
+  theme: {
+    spacing: {
+      '0': '0',
+      'px': '1px',
+      '0.5': '2px',  // só para borders/dividers
+      '1': '4px',
+      '2': '8px',
+      '3': '12px',
+      '4': '16px',
+      '5': '20px',
+      '6': '24px',
+      '8': '32px',
+      '10': '40px',
+      '12': '48px',
+      '16': '64px',
+      '20': '80px',
+      '24': '96px',
+      '32': '128px',
+    }
+  }
+}
+```
+
+Não inclua `7`, `9`, `11`, `14`, etc — força escolha de uma escala vizinha em vez de "tô em dúvida, vou de meio termo".
+
+## Patterns canônicos
+
+### Padding interno por componente
+
+| Componente | Padding | Notas |
+|------------|---------|-------|
+| Button (padrão) | `px-4 py-2` (h-10) | min 44px touch target |
+| Button (sm) | `px-3 py-1.5` (h-9) | minimum, densidade-tight |
+| Button (lg) | `px-6 py-3` (h-12) | CTA hero |
+| Input | `px-3 py-2` (h-10) | espaço para focus ring outside |
+| Card (padrão) | `p-6` | conteúdo respira |
+| Card (denso) | `p-4` | em lista de muitos |
+| Dialog | `p-6` (mobile) / `p-8` (desktop) | conteúdo central |
+| Badge / Chip | `px-2 py-0.5` | exceção à base-4, ok |
+| Section (vertical) | `py-16` (mobile) / `py-24` (desktop) | hero/marketing |
+| Section (vertical, produto) | `py-8` / `py-12` | denso |
+
+### Container patterns
+
+```tsx
+// Layout shell
+<div className="min-h-screen">
+  <header className="border-b">
+    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16 flex items-center">
+      {/* nav */}
+    </div>
+  </header>
+
+  <main>
+    {/* Marketing section */}
+    <section className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+      <h1 className="max-w-[18ch] text-balance text-6xl">…</h1>
+      <p className="max-w-[50ch] mt-6 text-lg text-muted-foreground">…</p>
+    </section>
+
+    {/* Produto dashboard */}
+    <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">…</div>
+    </section>
+
+    {/* Prose article */}
+    <article className="mx-auto max-w-prose px-4 sm:px-6 py-12">
+      {/* max-w-prose = 65ch */}
+    </article>
+  </main>
+</div>
+```
+
+### Ritmo vertical em prose
+
+```tsx
+<article className="prose">
+  <h1 className="mb-8">…</h1>        {/* h1 + spacing maior abaixo */}
+  <h2 className="mt-12 mb-4">…</h2>  {/* h2 separa seções */}
+  <p className="mb-4 leading-7">…</p>{/* p body */}
+  <ul className="my-4 space-y-2">…</ul>
+</article>
+```
+
+Regra: spacing acima de heading > spacing abaixo. Senão heading "flutua" no meio.
+
+### Alinhamento óptico
+
+```tsx
+// Texto + ícone: align pelo center vertical, não baseline
+<button className="inline-flex items-center gap-2">
+  <ArrowRight className="size-4 -translate-y-px" />  {/* -1px opcional para cap-height match */}
+  <span>Próximo</span>
+</button>
+
+// Heading + ícone decorativo: ícone alinha pelo x-height, não top
+<h2 className="flex items-baseline gap-2">
+  <Sparkles className="size-5 translate-y-1" />  {/* push down to baseline-ish */}
+  <span>Feature</span>
+</h2>
+
+// Pill button: padding horizontal mais leve que vertical estaria — compense
+<button className="rounded-full px-4 py-2">  {/* px-4 não px-3 — pill rouba H */}
+  Ação
+</button>
+```
+
+## Anti-patterns
+
+### Anti-pattern 1: arbitrary values salpicados
+
+**Errado:**
+```tsx
+<div className="p-[13px] mt-[27px] gap-[18px]">…</div>
+```
+
+**Por quê:** REGRA #1 — escala se desfaz. Outro dev vê `13px` e adiciona `15px` ao lado. Em 6 meses ninguém sabe o que é "spacing default".
+
+**Certo:** `p-3 mt-6 gap-4` (12/24/16, todos na escala). Se realmente precisa de um valor fora, adicione ao theme em vez de inline.
+
+### Anti-pattern 2: padding cramped em interactive
+
+**Errado:** `<button className="px-2 py-1">Salvar</button>`
+
+**Por quê:** Q06 — touch hit area pequena + densidade desconfortável. Botão difícil de clicar.
+
+**Certo:** `px-4 py-2` mínimo. Botão denso `px-3 py-1.5` apenas em toolbar.
+
+### Anti-pattern 3: section sem padding lateral em mobile
+
+**Errado:**
+```tsx
+<section className="max-w-7xl mx-auto py-16">
+  <h1 className="text-4xl">Title</h1>  {/* encosta na borda em mobile */}
+</section>
+```
+
+**Por quê:** REGRA #3 — texto sem ar para respirar + acessibilidade em landscape narrow.
+
+**Certo:**
+```tsx
+<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+```
+
+### Anti-pattern 4: hero text sem max-width
+
+**Errado:**
+```tsx
+<h1 className="text-6xl">Build amazing products with our platform today</h1>
+```
+
+**Por quê:** REGRA #4 — line-length destruído em widescreen, leitura interrompida.
+
+**Certo:**
+```tsx
+<h1 className="text-6xl max-w-[18ch] text-balance leading-tight">
+  Build amazing products
+</h1>
+```
+
+### Anti-pattern 5: misturar densidades sem motivo
+
+**Errado:**
+```tsx
+<Card className="p-2">  {/* densa */}
+  <CardHeader className="p-8">  {/* generosa */}
+    <CardTitle>...</CardTitle>
+  </CardHeader>
+  <CardContent className="p-4">  {/* padrão */}
+    ...
+  </CardContent>
+</Card>
+```
+
+**Por quê:** REGRA #2 — ritmo quebrado, agente IA depois não sabe qual densidade replicar.
+
+**Certo:** uma densidade por componente. Card denso = todo o card `p-4` máximo. Card padrão = todo o card `p-6`.
+
+### Anti-pattern 6: alinhar centro com texto
+
+**Errado:**
+```tsx
+<div className="flex items-center">
+  <Icon />
+  <h2>Heading</h2>
+</div>
+```
+
+Pixel-perfect: ícone tem `cap-height` diferente do texto.
+
+**Certo:**
+```tsx
+<div className="flex items-baseline gap-2">  {/* ou items-center + ícone -translate-y-px */}
+  <Icon className="translate-y-0.5" />
+  <h2>Heading</h2>
+</div>
+```
+
+## Detecção
+
+```bash
+# Arbitrary spacing values
+grep -rnE "(p|m|gap|space)-(x|y)?-\[[0-9]+(px|rem)\]" src --include="*.tsx" 2>/dev/null
+
+# Edge flush
+grep -rnE "max-w-7xl.*mx-auto.*py-" src --include="*.tsx" 2>/dev/null | grep -v "px-"
+
+# Botão cramped
+grep -rnE "<(button|Button)[^>]*\bp[xy]?-(1|2)\b" src --include="*.tsx" 2>/dev/null
+
+# Hero sem max-w em ch
+grep -rnE "text-(5xl|6xl|7xl|8xl|9xl)" src --include="*.tsx" 2>/dev/null | grep -v "max-w-\["
+```
+
+## Ver também
+
+- [ui-anti-padroes-ia](../ui-anti-padroes-ia/SKILL.md) — Q02 (edge flush), Q06 (padding cramped)
+- [ui-tipografia](../ui-tipografia/SKILL.md) — line-length em ch
+- [ui-contexto-produto](../ui-contexto-produto/SKILL.md) — escala vai em DESIGN.json

package/kit/skills/ui-tipografia/SKILL.md

@@ -0,0 +1,211 @@
+---
+name: ui-tipografia
+description: Use ao escolher fontes, tamanhos, pesos ou hierarquia tipográfica — sistema canônico Display + Body + Mono distintos (sem monocultura Inter), max 4 tamanhos × 2 pesos, line-height 1.5 body / 1.2 heading, line-length 50-75ch body / 30-50ch hero, banidas Fraunces/Geist/Mona Sans/Plus Jakarta Sans/Space Grotesk/Recoleta/Instrument Sans em produto novo (fontes saturadas no default IA).
+---
+
+# UI — Tipografia
+
+## Quando usar
+
+LLM carrega esta skill quando:
+
+- "Que fonte uso?" / "Escolher tipografia"
+- "Hierarquia tipográfica" / "type scale"
+- "Heading parece genérico" / "tipo parece acidental"
+- Preenchendo seção **Tipografia** de DESIGN.md
+- Editando `tailwind.config.*` font tokens
+
+## Regras absolutas
+
+**REGRA #1 (3 famílias distintas):** Sistema canônico tem **display + body + mono**, três tipos visualmente distintos. Inter como todas as três = monocultura (T07).
+
+**REGRA #2 (max 4 sizes × 2 weights):** Exatamente 3-4 tamanhos em uso ativo, máximo 2 pesos. Se você precisa de mais, há um problema de hierarquia, não de escala tipográfica.
+
+**REGRA #3 (line-length real):** Body 50-75 chars per line. Hero 30-50 chars. Container width = `ch` unit, não pixel. Texto que estica viewport inteira = ilegível.
+
+**REGRA #4 (line-height por contexto):** Body 1.5, headings 1.2, mono/code 1.4. Não 1.6 "para respirar" (afrouxa demais).
+
+**REGRA #5 (defaults banidos em produto novo):** Fraunces, Geist, Mona Sans, Plus Jakarta Sans, Space Grotesk, Recoleta, Instrument Sans — saturadas no default IA. Use só com justificativa em MARCA.md (ex: "Geist intencional para match com infra cloud space").
+
+## Escala canônica
+
+### Type scale (em px, base 16)
+
+| Nome | px | uso |
+|------|----|----|
+| `xs` | 12 | Microcopy, labels secundárias, badges |
+| `sm` | 14 | UI controls, table cells, dense lists |
+| `base` | 16 | Body padrão, paragraphs |
+| `lg` | 20 | Lead paragraph, dialog title |
+| `xl` | 24 | h3 |
+| `2xl` | 32 | h2 |
+| `4xl` | 48 | h1 (produto) |
+| `6xl` | 72 | h1 (hero marca) |
+
+**Use 3-4 destas em ativo.** Esconda o resto do Tailwind via `fontSize` override no config.
+
+### Pesos
+
+Apenas 2 pesos por família:
+- **Body:** `400` (regular) + `600` (semibold para emphasis)
+- **Display:** `400` (regular) + `700` (bold) OU peso único caracteristicamente forte
+
+Pesos proibidos sem justificativa: `300` (light), `100` (thin) — fica frágil em LCD comum + baixa legibilidade.
+
+### Line-height
+
+```css
+--lh-tight: 1.1;    /* hero 6xl+ */
+--lh-heading: 1.2;  /* h1, h2 */
+--lh-snug: 1.35;    /* lg lead */
+--lh-body: 1.5;     /* base body */
+--lh-mono: 1.4;     /* code */
+```
+
+### Line-length
+
+```css
+.prose { max-width: 65ch; }      /* body content */
+.hero { max-width: 18ch; }       /* big heading */
+.lead { max-width: 50ch; }       /* large intro paragraph */
+```
+
+`ch` unit > pixel para textos. Em mono use `30em`.
+
+## Pareamentos canônicos (com nome próprio)
+
+### Marca editorial
+- Display: **GT Sectra** (Grilli Type) ou **Söhne Breit** (Klim)
+- Body: **Söhne** (Klim) ou **Inter Display**
+- Mono: **JetBrains Mono** ou **Berkeley Mono**
+
+### Produto calm/clinical
+- Display: **Söhne Breit** (Klim) ou **ABC Diatype** (Dinamo)
+- Body: **Söhne** ou **ABC Diatype**
+- Mono: **JetBrains Mono**
+
+### Produto warm/playful
+- Display: **GT Maru** (Grilli) ou **Söhne Schmal**
+- Body: **GT Walsheim** ou **Söhne**
+- Mono: **MD IO** (Mass-Driver)
+
+### Editorial serif moment
+- Display: **Tiempos Headline** (Klim) ou **GT Sectra**
+- Body: **Tiempos Text** ou **Söhne**
+- Mono: **JetBrains Mono**
+
+### Free / open-source fallback (justificar em MARCA.md)
+- Display: **Manrope** (free) ou **Inter Display** (free variante!)
+- Body: **Inter** OK como único free se for **apenas** body
+- Mono: **JetBrains Mono** (free)
+
+> **Inter no display** é sempre tell de IA. Inter Display (variante distinta) é aceitável.
+
+## Hierarquia — patterns
+
+### Hierarquia por size + weight + color (3 alavancas)
+
+```tsx
+// Bom — 3 alavancas, claramente diferenciado
+<h2 className="text-2xl font-semibold text-foreground">Section</h2>
+<p className="text-sm font-normal text-muted-foreground">Caption</p>
+
+// Ruim — só size, peso body, muddy
+<h2 className="text-base text-foreground">Section</h2>
+<p className="text-sm text-foreground">Caption</p>
+```
+
+### Widow/orphan em heading
+
+Last word sozinho em line = widow. Use `text-wrap: balance` ou `&nbsp;` no penúltimo separator.
+
+```tsx
+<h1 className="text-balance">Build better software with one calm tool</h1>
+```
+
+### Letter-spacing
+
+- Display tamanhos grandes (`4xl`+): `tracking-tight` (-0.01em) ou `-0.02em`
+- Body: default `tracking-normal`
+- All-caps: `tracking-wider` mas SOMENTE em badge pequena (rótulo uppercase decorativo acima de heading é proibido — ver T04 em anti-padroes-ia)
+
+## Anti-patterns
+
+### Anti-pattern 1: 6+ tamanhos diferentes em uma tela
+
+**Errado:** `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl` todos numa página.
+
+**Por quê:** REGRA #2 — hierarquia inflacionada, agente IA depois perde sinal sobre o que é importante.
+
+**Certo:** restringir a 4. Se "preciso de mais", problema é decisão de info architecture, não de tipo.
+
+### Anti-pattern 2: Inter em display + body + mono
+
+**Errado:**
+```css
+:root {
+  --font-display: Inter;
+  --font-sans: Inter;
+  --font-mono: Inter;
+}
+```
+
+**Por quê:** T07 — monocultura é tell #1 de "IA gerou isto".
+
+**Certo:** display + body distintos, mesmo que ambos sans. Mono é monospace, sempre distinto.
+
+### Anti-pattern 3: weight `300` para hero
+
+**Errado:** `<h1 className="font-light text-6xl">Build it</h1>`
+
+**Por quê:** thin no display falha em retina baixa + perde presença. Era moda 2015-2018, agora datado.
+
+**Certo:** `font-medium` ou `font-semibold`. Hero quer presença, não fragilidade.
+
+### Anti-pattern 4: body em 14px porque "fica clean"
+
+**Errado:** `<body class="text-sm">`
+
+**Por quê:** 14px body falha em legibilidade > 40 anos + cansa em sessões longas. AA exige 16px effective.
+
+**Certo:** 16px body min. 14px só em controls densos, tables, captions.
+
+### Anti-pattern 5: hero text estica viewport
+
+**Errado:**
+```tsx
+<h1 className="text-7xl">Build something amazing with our platform today and ship faster than ever</h1>
+```
+
+**Por quê:** REGRA #3 — line-length destruído, leitura interrompida múltiplas vezes.
+
+**Certo:** wrap container 18-25ch + balance:
+```tsx
+<h1 className="text-7xl max-w-[18ch] text-balance leading-[1.05] tracking-tight">
+  Ship faster.
+</h1>
+<p className="text-lg max-w-[50ch] mt-4 text-muted-foreground">
+  Sub-headline com contexto em line-length confortável.
+</p>
+```
+
+## Detecção
+
+```bash
+# tamanhos em uso (deveria ser 3-4)
+grep -rohE "text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)\b" src --include="*.tsx" 2>/dev/null | sort -u | wc -l
+
+# pesos em uso (deveria ser 2)
+grep -rohE "font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b" src --include="*.tsx" 2>/dev/null | sort -u
+
+# Inter monocultura
+grep -rohE "Inter\b" src --include="*.css" --include="*.ts" 2>/dev/null | wc -l
+
+# defaults banidos
+grep -rohE "(Fraunces|Geist|Mona Sans|Plus Jakarta Sans|Space Grotesk|Recoleta|Instrument Sans)" src 2>/dev/null
+```
+
+## Ver também
+
+- [ui-anti-padroes-ia](../ui-anti-padroes-ia/SKILL.md) — T03, T04, T07, T08 detalhados
+- [ui-contexto-produto](../ui-contexto-produto/SKILL.md) — onde Display/Body/Mono são declarados

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luanpdd/kit-mcp",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "Generic infrastructure to ship YOUR personal kit of agents/commands/skills as an MCP server, with cross-IDE sync (Claude Code, Cursor, Codex, Gemini, Windsurf, Antigravity, Copilot, Trae).",
   "type": "module",
   "bin": {