dev-booster 1.4.0 → 1.6.0

package/template/.devbooster/hub/skills/frontend-design/anti-generic-guide.md

@@ -1,46 +1,46 @@
 # UI Design Skill — Anti-Generic Guide
-### Para Next.js + Tailwind CSS + shadcn/ui
+### For Next.js + Tailwind CSS + shadcn/ui
 
-> Leia este documento **antes** de escrever qualquer componente de UI.  
-> Ele não é uma lista de regras opcionais. É o contrato visual do projeto.
+> Read this document **before** writing any UI component.
+> This is not a list of optional rules. It is the visual contract of the project.
 
 ---
 
-## 1. O problema que você está sendo contratado para evitar
+## 1. The problem you are being hired to avoid
 
-Modelos de linguagem treinados em código público aprenderam com milhares de projetos que usam os mesmos templates: Tailwind UI, shadcn/ui boilerplates, v0.dev outputs. O resultado é uma "média estatística" do que existe — e essa média tem cara reconhecível:
+Language models trained on public code have learned from thousands of projects that use the same templates: Tailwind UI, shadcn/ui boilerplates, v0.dev outputs. The result is a "statistical average" of what exists — and this average has a highly recognizable face:
 
-- Grade de 3 colunas com cards idênticos
-- Ícone + título + parágrafo cinza repetido N vezes  
-- `border rounded-lg p-6 shadow-sm` em absolutamente tudo
-- Hierarquia tipográfica `text-2xl font-bold` → `text-sm text-muted-foreground` sem variação
-- Paleta: branco, cinza-100, cinza-800, uma cor de accent genérica
-- Fonte: Inter. Sempre Inter.
+- A 3-column grid with identical cards
+- Icon + title + gray paragraph repeated N times
+- `border rounded-lg p-6 shadow-sm` on absolutely everything
+- Typographic hierarchy: `text-2xl font-bold` → `text-sm text-muted-foreground` without variation
+- Palette: white, gray-100, gray-800, and one generic accent color
+- Font: Inter. Always Inter.
 
-**Interfaces geradas assim são corretas. Funcionam. E são completamente invisíveis.**
+**Interfaces generated like this are correct. They work. And they are completely invisible.**
 
 ---
 
-## 2. Antes de escrever uma linha de código
+## 2. Before writing a single line of code
 
-Responda mentalmente:
+Answer these questions mentally:
 
-1. **Qual é a hierarquia de informação?** O que o usuário precisa ver *primeiro*? O que é secundário? O que pode sumir?
-2. **Qual é o tom emocional?** Técnico/preciso? Quente/humano? Urgente? Contemplativo?
-3. **O que quebra o padrão aqui?** Um tamanho tipográfico inesperado, uma cor fora do grid, um elemento que não está dentro de um card.
-4. **Onde está a tensão visual?** Contraste de peso, escala, cor ou espaço que cria direção de leitura.
+1. **What is the information hierarchy?** What does the user need to see *first*? What is secondary? What can fade away?
+2. **What is the emotional tone?** Technical/precise? Warm/human? Urgent? Contemplative?
+3. **What breaks the pattern here?** An unexpected typographic size, a color outside the grid, an element that is not contained inside a card.
+4. **Where is the visual tension?** Contrast in weight, scale, color, or space that creates a reading direction.
 
-Se você não consegue responder essas perguntas, **não comece a codar**. Volte para o contexto do componente.
+If you cannot answer these questions, **do not start coding**. Go back to the context of the component.
 
 ---
 
-## 3. Padrões proibidos
+## 3. Prohibited patterns
 
 ### 3.1 Layout
 
-❌ **Grade uniforme de cards com mesmo peso visual**
+❌ **Uniform grid of cards with the same visual weight**
 ```tsx
-// PROIBIDO — todos os cards iguais, hierarquia zero
+// PROHIBITED — all cards look identical, zero hierarchy
 <div className="grid grid-cols-3 gap-6">
   <Card>...</Card>
   <Card>...</Card>
@@ -48,11 +48,11 @@ Se você não consegue responder essas perguntas, **não comece a codar**. Volte
 </div>
 ```
 
-✅ **Hierarquia explícita — um elemento domina**
+✅ **Explicit hierarchy — one element dominates**
 ```tsx
-// Um item principal (grande), outros secundários (menores)
+// One main item (large), other secondary ones (smaller)
 <div className="grid grid-cols-3 gap-6">
-  <div className="col-span-2 row-span-2">...</div> {/* ancora visual */}
+  <div className="col-span-2 row-span-2">...</div> {/* visual anchor */}
   <Card className="...">...</Card>
   <Card className="...">...</Card>
 </div>
@@ -60,22 +60,22 @@ Se você não consegue responder essas perguntas, **não comece a codar**. Volte
 
 ---
 
-❌ **Card dentro de Card dentro de Card**
+❌ **Card inside a Card inside a Card**
 ```tsx
-// PROIBIDO — caixas aninhadas sem propósito
+// PROHIBITED — nested boxes without a valid purpose
 <Card>
   <CardContent>
-    <Card> {/* por quê? */}
-      <Card> {/* sério? */}
+    <Card> {/* why? */}
+      <Card> {/* seriously? */}
 ```
 
-✅ **Use separação visual sem container**
+✅ **Use visual separation without containers**
 ```tsx
-// Divida com espaço, tipografia ou borda — não com mais boxes
+// Divide using space, typography, or borders — not with more boxes
 <div className="space-y-6">
   <section>
     <h3 className="text-xs font-medium uppercase tracking-widest text-muted-foreground mb-3">
-      Seção
+      Section
     </h3>
     <div className="space-y-2">...</div>
   </section>
@@ -84,169 +84,169 @@ Se você não consegue responder essas perguntas, **não comece a codar**. Volte
 
 ---
 
-❌ **Ícone flutuante genérico acima de cada heading**
+❌ **Generic floating icon above every heading**
 ```tsx
-// PROIBIDO — esse padrão grita "template"
+// PROHIBITED — this pattern screams "template"
 <div className="flex flex-col items-center text-center">
   <div className="rounded-full bg-primary/10 p-3 mb-4">
     <Icon className="h-6 w-6 text-primary" />
   </div>
-  <h3 className="font-semibold">Título</h3>
-  <p className="text-sm text-muted-foreground">Descrição genérica</p>
+  <h3 className="font-semibold">Title</h3>
+  <p className="text-sm text-muted-foreground">Generic description</p>
 </div>
 ```
 
-✅ **Integre o ícone no fluxo tipográfico ou elimine-o**
+✅ **Integrate the icon into the typographic flow or eliminate it**
 ```tsx
 <div>
   <h3 className="font-semibold flex items-center gap-2">
     <Icon className="h-4 w-4 opacity-50" />
-    Título
+    Title
   </h3>
-  <p className="text-sm text-muted-foreground mt-1 pl-6">Descrição</p>
+  <p className="text-sm text-muted-foreground mt-1 pl-6">Description</p>
 </div>
 ```
 
 ---
 
-### 3.2 Tipografia
+### 3.2 Typography
 
-❌ **Escala homogênea — tudo `text-sm` ou tudo `text-base`**
+❌ **Homogeneous scale — everything is `text-sm` or everything is `text-base`**
 
-✅ **Contraste de escala intencional**
+✅ **Intentional scale contrast**
 ```tsx
-// Crie tensão: um elemento muito grande, outro muito pequeno
+// Create tension: one very large element, another very small one
 <div>
   <span className="text-[11px] font-medium uppercase tracking-[0.15em] text-muted-foreground">
-    Receita mensal
+    Monthly Revenue
   </span>
-  <p className="text-4xl font-bold tracking-tight mt-1">R$ 48.320</p>
-  <p className="text-sm text-muted-foreground mt-1">↑ 12% vs mês anterior</p>
+  <p className="text-4xl font-bold tracking-tight mt-1">$ 48,320</p>
+  <p className="text-sm text-muted-foreground mt-1">↑ 12% vs last month</p>
 </div>
 ```
 
-❌ **`font-semibold` como único grau de ênfase**
+❌ **`font-semibold` as the only degree of emphasis**
 
-✅ **Use o sistema completo: peso + tamanho + cor + espaçamento + opacidade**
+✅ **Use the complete system: weight + size + color + spacing + opacity**
 ```tsx
-// Hierarquia sem usar negrito em tudo
-<p className="text-sm font-medium">Label</p>          // primário
-<p className="text-sm text-muted-foreground">Desc</p> // secundário  
-<p className="text-xs opacity-50">Metadata</p>        // terciário
+// Hierarchy without relying entirely on bold text
+<p className="text-sm font-medium">Label</p>          // primary
+<p className="text-sm text-muted-foreground">Desc</p> // secondary  
+<p className="text-xs opacity-50">Metadata</p>        // tertiary
 ```
 
 ---
 
-❌ **Inter como fonte padrão por inércia**
+❌ **Inter as the default font out of pure inertia**
 
-✅ **Escolha com intenção** — ou use o que está no `tailwind.config`, ou questione se deve adicionar uma fonte display para headings:
+✅ **Choose with intention** — either use what is defined in `tailwind.config`, or question whether a display font should be added for headings:
 ```tsx
-// No tailwind.config.ts — fonts com personalidade
+// In tailwind.config.ts — fonts with personality
 fontFamily: {
-  sans: ['Geist', 'system-ui', 'sans-serif'],     // corpo
-  display: ['Cal Sans', 'serif'],                   // headings grandes
-  mono: ['Geist Mono', 'monospace'],               // código/dados
+  sans: ['Geist', 'system-ui', 'sans-serif'],      // body text
+  display: ['Cal Sans', 'serif'],                  // large headings
+  mono: ['Geist Mono', 'monospace'],               // code/data
 }
 ```
 
 ---
 
-### 3.3 Cor
+### 3.3 Color
 
-❌ **Paleta de 50 tons de cinza + uma cor de brand genérica**
+❌ **A palette of 50 shades of gray + one generic brand color**
 
-✅ **Cor com função editorial**
-- Use cor para criar *hierarquia*, não apenas *identidade*
-- Uma cor quente num contexto frio chama atenção — use isso
-- `text-muted-foreground` é para informação *realmente* secundária, não para tudo que não é título
+✅ **Color with an editorial function**
+- Use color to create *hierarchy*, not just *identity*
+- A warm color in a cold context grabs attention — use this to your advantage
+- `text-muted-foreground` is for *truly* secondary information, not just anything that isn't a title
 
-❌ **`#000000` ou `#ffffff` puros**
+❌ **Pure `#000000` or `#ffffff`**
 
-✅ **Neutros com matiz** — cinzas levemente azulados, quentes ou frios dependem do tom do produto:
+✅ **Tinted neutrals** — slightly blue, warm, or cold grays depending on the product's tone:
 ```css
-/* Em vez de gray puro, use slate (frio/técnico) ou zinc (neutro) ou stone (quente) */
---foreground: 224 71% 4%;    /* quase preto com matiz azul */
---background: 210 20% 98%;   /* quase branco com matiz frio */
+/* Instead of pure gray, use slate (cold/tech), zinc (neutral), or stone (warm) */
+--foreground: 224 71% 4%;    /* nearly black with a blue tint */
+--background: 210 20% 98%;   /* nearly white with a cold tint */
 ```
 
 ---
 
-### 3.4 Espaço e ritmo
+### 3.4 Space and Rhythm
 
-❌ **`gap-6` e `p-6` em tudo, uniformemente**
+❌ **`gap-6` and `p-6` on everything, uniformly**
 
-✅ **Espaço como hierarquia** — mais espaço = mais importância
+✅ **Space as hierarchy** — more space = more importance
 ```tsx
-// Seções principais: espaço generoso
-// Elementos relacionados: espaço comprimido
-<div className="space-y-16">          {/* entre seções */}
-  <section className="space-y-8">    {/* dentro da seção */}
-    <header className="space-y-2">  {/* dentro do header */}
+// Main sections: generous spacing
+// Related elements: compressed spacing
+<div className="space-y-16">          {/* between sections */}
+  <section className="space-y-8">     {/* inside the section */}
+    <header className="space-y-2">    {/* inside the header */}
 ```
 
 ---
 
-## 4. Padrões que funcionam (use com consciência)
+## 4. Patterns that work (use consciously)
 
-### 4.1 Âncora visual
-Todo layout precisa de um elemento que domine — tamanho, cor ou posição. O olho precisa saber *onde começar*.
+### 4.1 Visual Anchor
+Every layout needs an element that dominates — through size, color, or position. The eye must know *where to begin*.
 
-### 4.2 Assimetria intencional
-`col-span-2` + `col-span-1` cria mais tensão visual do que `col-span-1` repetido. Use.
+### 4.2 Intentional Asymmetry
+`col-span-2` + `col-span-1` creates more visual tension than a repeated `col-span-1`. Use it.
 
-### 4.3 Linha de base e alinhamento de dados
-Para dados numéricos, alinhe à direita. Para listas de texto, alinhe à esquerda. Nunca centralize tabelas.
+### 4.3 Baseline and Data Alignment
+For numerical data, align to the right. For text lists, align to the left. Never center tables.
 
-### 4.4 Densidade variada
-Uma seção densa (muita informação, espaço comprimido) ao lado de uma seção arejada cria ritmo. Evite densidade uniforme.
+### 4.4 Varied Density
+A dense section (high information density, compressed space) placed next to an airy section creates rhythm. Avoid uniform density across the page.
 
-### 4.5 Bordas como separação, não como decoração
+### 4.5 Borders as separation, not decoration
 ```tsx
-// Borda como divisor tipográfico — sem shadow, sem rounded excessivo
+// Border as a typographic divider — no shadows, no excessive rounded corners
 <div className="border-t pt-4 mt-4">
 ```
 
 ---
 
-## 5. Checklist antes de entregar um componente
+## 5. Pre-delivery Checklist
 
-Antes de finalizar, responda:
+Before finalizing a component, ask yourself:
 
-- [ ] Consigo identificar claramente o elemento de maior hierarquia visual?
-- [ ] Tem algum `<Card>` que poderia ser substituído por espaço + tipografia?
-- [ ] A escala tipográfica tem pelo menos 3 níveis distintos de peso/tamanho?
-- [ ] Existe ao menos um elemento que quebra a simetria da grade?
-- [ ] As cores têm função (hierarquia/atenção/estado) ou são só decoração?
-- [ ] Se alguém ver este componente por 3 segundos, saberá o que fazer?
-- [ ] Este componente poderia ter saído do v0.dev sem alteração? **(se sim, revise)**
+- [ ] Can I clearly identify the element with the highest visual hierarchy?
+- [ ] Is there a `<Card>` that could be replaced by negative space + typography?
+- [ ] Does the typographic scale have at least 3 distinct levels of weight/size?
+- [ ] Is there at least one element that breaks the symmetry of the grid?
+- [ ] Do colors serve a function (hierarchy/attention/state), or are they purely decorative?
+- [ ] If someone looks at this component for 3 seconds, will they know what to do?
+- [ ] Could this component have come straight out of v0.dev without any changes? **(If yes, revise it)**
 
 ---
 
-## 6. Referência rápida — Tailwind classes problemáticas vs melhores alternativas
+## 6. Quick Reference — Problematic Tailwind classes vs Better alternatives
 
-| Padrão genérico | Por que é ruim | Alternativa |
+| Generic Pattern | Why it fails | Alternative |
 |---|---|---|
-| `rounded-lg` em tudo | Uniformidade falsa de "modernidade" | Varie: `rounded-none`, `rounded-sm`, `rounded-2xl` com intenção |
-| `shadow-sm` em todo card | Profundidade sem significado | Use sombra só para elementos elevados de verdade (modals, dropdowns) |
-| `text-muted-foreground` em desc | Torna tudo secundário igualmente | Use opacidade gradual: `opacity-70`, `opacity-50` |
-| `p-6` universal | Grade mecânica | Padding assimétrico: `px-6 py-4`, `pt-8 pb-4 px-6` |
-| `gap-6` universal | Sem ritmo | Varie espaço por nível hierárquico |
-| `font-semibold` para ênfase | Único grau de ênfase disponível | Combine `font-medium` + tamanho maior OU cor diferente |
+| `rounded-lg` everywhere | Fake uniformity trying to look "modern" | Vary intentionally: `rounded-none`, `rounded-sm`, `rounded-2xl` |
+| `shadow-sm` on every card | Depth without meaning | Use shadows only for truly elevated elements (modals, dropdowns) |
+| `text-muted-foreground` in desc | Makes everything equally secondary | Use gradual opacity: `opacity-70`, `opacity-50` |
+| Universal `p-6` | Mechanical grid | Asymmetrical padding: `px-6 py-4`, `pt-8 pb-4 px-6` |
+| Universal `gap-6` | Lack of rhythm | Vary spacing based on the hierarchical level |
+| `font-semibold` for emphasis | Only one degree of emphasis used | Combine `font-medium` + larger size OR a different color |
 
 ---
 
-## 7. Filosofia de base
+## 7. Core Philosophy
 
-> Uma interface *correta* é aquela que funciona.  
-> Uma interface com *assinatura* é aquela que o usuário reconhece sem ver o logo.
+> A *correct* interface is one that works.  
+> A *signature* interface is one that the user recognizes without seeing the logo.
 
-A diferença não está em usar ferramentas diferentes. Está em fazer escolhas intencionais em vez de escolhas estatisticamente seguras.
+The difference isn't in using different tools. It lies in making intentional choices instead of statistically safe ones.
 
-**O shadcn/ui é um ponto de partida, não um destino.**  
-Modifique os componentes. Quebre os defaults. Use as primitivas do Radix diretamente quando o wrapper do shadcn estiver te limitando.
+**shadcn/ui is a starting point, not a destination.**  
+Modify the components. Break the defaults. Use Radix primitives directly when the shadcn wrapper starts limiting you.
 
-A interface mais genérica possível é aquela onde o desenvolvedor nunca questionou o default.
+The most generic interface possible is the one where the developer never questioned the default settings.
 
 ---
 
-*Versão 1.0 — Baseado em análise de padrões recorrentes de AI-generated UI com Next.js + Tailwind + shadcn/ui*
+*Version 1.0 — Based on pattern analysis of AI-generated UI with Next.js + Tailwind + shadcn/ui*

package/template/.devbooster/rules/{COMERCIAL.md → COMMERCIAL.md}

@@ -18,12 +18,12 @@
 - What are the main objections and how to counter them?
 - What are the core sales arguments (Time saving, cost reduction, etc)?
 
-**STEP 3: Generate Elite Rule (OUTPUT IN PT-BR):**
-Rewrite this entire file (COMERCIAL.md) in **PORTUGUESE (PT-BR)**. You MUST create a high-impact commercial guide following the 'Pattern Reference' below. Use persuasive language (Copywriting), focus on benefits instead of features, and define the brand's 'tone of voice'. The goal is to provide a guide that could be used by a marketing or sales team to position the product accurately."
+**STEP 3: Generate Elite Rule:**
+Rewrite this entire file (COMMERCIAL.md) in the **USER'S NATIVE LANGUAGE**. You MUST create a high-impact commercial guide following the 'Pattern Reference' below. Use persuasive language (Copywriting), focus on benefits instead of features, and define the brand's 'tone of voice'. The goal is to provide a guide that could be used by a marketing or sales team to position the product accurately."
 
 ---
 
-## 🏗️ EXPECTED STRUCTURE (IN PORTUGUESE)
+## 🏗️ EXPECTED STRUCTURE (IN USER'S NATIVE LANGUAGE)
 1. **O que é o Produto**: Definição comercial (o que ele vende de verdade).
 2. **Promessa e Posicionamento**: Headlines e subheadlines magnéticas.
 3. **Público-Alvo e Dores**: Quem compra e qual problema estamos resolvendo.
@@ -66,4 +66,4 @@ O empresário sente que 'trabalha para a empresa' e não o contrário. Ele não
 
 1. Scan the project as instructed.
 2. Analyze the commercial and positioning patterns.
-3. Overwrite this entire file with the project-specific commercial documentation **IN PORTUGUESE (PT-BR)**.
+3. Overwrite this entire file with the project-specific commercial documentation in the **USER'S NATIVE LANGUAGE**.