@riligar/agents-kit 1.20.0 → 1.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.agent/rules/naming-conventions.md +17 -17
  2. package/.agent/skills/riligar-design-system/SKILL.md +97 -32
  3. package/.agent/skills/riligar-design-system/assets/theme.js +29 -15
  4. package/.agent/skills/riligar-design-system/references/anti-patterns.md +67 -18
  5. package/.agent/skills/riligar-design-system/references/design-system.md +125 -61
  6. package/.agent/skills/riligar-design-system/references/master-patterns.md +181 -13
  7. package/.agent/skills/riligar-design-system/references/visual-references.md +103 -43
  8. package/.agent/skills/riligar-dev-database/SKILL.md +15 -15
  9. package/.agent/skills/riligar-dev-database/references/connection.md +6 -8
  10. package/.agent/skills/riligar-dev-database/references/queries.md +25 -29
  11. package/.agent/skills/riligar-dev-database/references/schema.md +32 -18
  12. package/.agent/skills/riligar-dev-manager/SKILL.md +29 -29
  13. package/.agent/skills/riligar-infra-stripe/SKILL.md +46 -42
  14. package/.agent/skills/riligar-infra-stripe/references/stripe-database.md +62 -68
  15. package/package.json +1 -1
package/.agent/rules/naming-conventions.md CHANGED
@@ -4,18 +4,18 @@ Consistent naming across all RiLiGar projects.
4
4
 
5
5
  ## Quick Reference
6
6
 
7
- | Element | Convention | Example |
8
- | --- | --- | --- |
9
- | Components | PascalCase | `UserProfile`, `NavBar` |
10
- | Functions | camelCase | `getUserData`, `handleSubmit` |
11
- | Variables | camelCase | `userName`, `isLoading` |
12
- | Constants | SCREAMING_SNAKE | `API_URL`, `MAX_RETRIES` |
13
- | Files (components) | PascalCase | `UserProfile.jsx` |
14
- | Files (utilities) | camelCase | `formatDate.js` |
15
- | Directories | kebab-case | `user-profile/`, `api-utils/` |
16
- | CSS classes | kebab-case | `nav-bar`, `user-card` |
17
- | Database tables | snake_case | `user_profiles`, `order_items` |
18
- | API endpoints | kebab-case | `/api/user-profiles`, `/api/order-items` |
7
+ | Element | Convention | Example |
8
+ | ------------------ | --------------- | ---------------------------------------- |
9
+ | Components | PascalCase | `UserProfile`, `NavBar` |
10
+ | Functions | camelCase | `getUserData`, `handleSubmit` |
11
+ | Variables | camelCase | `userName`, `isLoading` |
12
+ | Constants | SCREAMING_SNAKE | `API_URL`, `MAX_RETRIES` |
13
+ | Files (components) | PascalCase | `UserProfile.jsx` |
14
+ | Files (utilities) | camelCase | `formatDate.js` |
15
+ | Directories | kebab-case | `user-profile/`, `api-utils/` |
16
+ | CSS classes | kebab-case | `nav-bar`, `user-card` |
17
+ | database tables | snake_case | `user_profiles`, `order_items` |
18
+ | API endpoints | kebab-case | `/api/user-profiles`, `/api/order-items` |
19
19
 
20
20
  ## Components
21
21
 
@@ -59,8 +59,8 @@ const MAX_RETRY_ATTEMPTS = 3
59
59
  const DEFAULT_PAGE_SIZE = 20
60
60
 
61
61
  // Bad
62
- const apiBaseUrl = 'https://api.example.com' // camelCase
63
- const maxRetryAttempts = 3 // camelCase
62
+ const apiBaseUrl = 'https://api.example.com' // camelCase
63
+ const maxRetryAttempts = 3 // camelCase
64
64
  ```
65
65
 
66
66
  ## Booleans
@@ -131,10 +131,10 @@ src/
131
131
  └── api.js
132
132
  ```
133
133
 
134
- ## Database and API
134
+ ## database and API
135
135
 
136
136
  ```javascript
137
- // Database tables - snake_case
137
+ // database tables - snake_case
138
138
  // user_profiles, order_items, payment_transactions
139
139
 
140
140
  // API endpoints - kebab-case
@@ -162,7 +162,7 @@ const htmlContent = '<div>...</div>'
162
162
  const xmlParser = new Parser()
163
163
 
164
164
  // Bad
165
- const userID = 123 // ID should be Id
165
+ const userID = 123 // ID should be Id
166
166
  const APIURL = '/api' // Should be ApiUrl
167
167
  const HTMLContent = '<div>...</div>'
168
168
  ```
package/.agent/skills/riligar-design-system/SKILL.md CHANGED
@@ -1,55 +1,120 @@
1
1
  ---
2
2
  name: riligar-design-system
3
- description: Especialista no Sistema Visual da RiLiGar. Use para: (1) Criação de interfaces web e mobile (Light/Dark Mode), (2) Implementação de componentes UI (Mantine Only), (3) Garantir estética minimalista "Content-First", (4) Aplicar tokens de design via Mantine Theme.
3
+ description: Especialista no Sistema Visual Zen da RiLiGar. Use para: (1) Criação de interfaces com estética "Content over Chrome", (2) Aplicar hierarquia massiva via Big Type Metrics, (3) Diferenciar contextos Zen Stage (impacto) e Zen Dense (densidade), (4) Implementar componentes UI (Mantine Only), (5) Garantir padrão monocromático e palco central limpo.
4
4
  ---
5
5
 
6
- # RiLiGar Design System Expert
6
+ # 🏮 RiLiGar Zen Design System
7
7
 
8
- Você é um especialista em design e interface seguindo as diretrizes da RiLiGar. Sua missão é garantir que qualquer código gerado use **APENAS** a API do Mantine 8, sem CSS customizado ou inline.
8
+ Você é um especialista em design e interface seguindo a filosofia **Zen** da RiLiGar. Sua missão é garantir que qualquer código gerado siga os princípios do Zen e use **APENAS** a API do Mantine 8, sem CSS customizado ou inline.
9
9
 
10
- ## Filosofia: "Content-First" & "Theme-Aware"
10
+ > _"O Zen não é sobre o que você coloca, é sobre o que você decide não colocar."_
11
11
 
12
- A interface deve ser invisível e funcionar perfeitamente em Light e Dark Mode.
12
+ ---
13
+
14
+ ## A Filosofia Zen: 3 Pilares
15
+
16
+ ### 1. Content over Chrome
17
+
18
+ A interface **não compete** com a informação. Botões, bordas e sombras são reduzidos ao mínimo absoluto. Se um elemento não ajuda na leitura do dado, ele é removido sem piedade.
19
+
20
+ ### 2. The Stage (O Palco)
21
+
22
+ Cada visualização é tratada como um **palco teatral**:
23
+
24
+ - O cabeçalho é o "anúncio" → Subtítulo leve (Small Caps, 10-12px, fw 800) + Título pesado (48-72px, fw 900)
25
+ - O conteúdo é a "performance" → Centro da tela limpo, focado, sem distrações laterais
26
+ - O `ZenLayout` garante essa fundação: container `size="xl"`, padding vertical generoso (`py={80}`)
27
+
28
+ ### 3. Hierarquia Massiva
29
+
30
+ Dados não são exibidos — são **declarados**. Números se tornam declarações de design:
31
+
32
+ - **Big Type Metrics**: fw 900, fz 64-120px, lh 1
33
+ - **Labels**: fw 800, fz 10-12px, uppercase, letter-spacing 1.5px, cor gray.4
34
+ - **Títulos**: fw 900, fz 48-72px, letter-spacing -0.04em
35
+
36
+ ---
37
+
38
+ ## Dois Contextos de Aplicação
39
+
40
+ O agente **DEVE** identificar o contexto antes de gerar qualquer interface:
41
+
42
+ ### 🎭 Zen Stage (Impacto Teatral)
43
+
44
+ **Quando usar:** Landing pages, dashboards de métricas, onboarding, telas de apresentação.
13
45
 
14
- - **Estrutura:** Whitespace e alinhamento preciso.
15
- - **Estética:** Monocromática, funcional, estilo Notion/Linear.
16
- - **Técnica:** Zero CSS files. Zero `style={{}}`. Tudo via Props.
46
+ - Tipografia massiva (Big Type Metrics 64px+)
47
+ - Inputs minimalistas (unstyled, apenas `border-bottom`)
48
+ - Padding vertical generoso (80px)
49
+ - Container centralizado size XL
50
+ - Máximo de respiro, mínimo de elementos
51
+
52
+ ### 📊 Zen Dense (Densidade Admin)
53
+
54
+ **Quando usar:** Painéis admin, tabelas, formulários CRUD, configurações.
55
+
56
+ - Densidade de dados estilo Notion/Linear
57
+ - Inputs com borda completa (compactos, 32px)
58
+ - Tabelas com padding tight (`py-xs`)
59
+ - Foco em escaneabilidade e eficiência
60
+
61
+ **Importante:** Ambos os contextos compartilham a mesma alma — monocromia, Content over Chrome, zero ornamentos. A diferença está no **ritmo** e na **escala tipográfica**.
62
+
63
+ ---
17
64
 
18
65
  ## Guia de Referência
19
66
 
20
- Para atingir a excelência:
67
+ Para atingir a excelência Zen:
21
68
 
22
- - **[Excellence Patterns](references/master-patterns.md)**: Código "Gold Standard" usando Mantine Props. **Sempre use como base.**
23
- - **[Theme Config](assets/theme.js)**: Configuração do tema com suporte a Dark Mode automático.
24
- - **[Visual references](references/visual-references.md)**: Mapeamento de nuances estéticas.
25
- - **[Anti-patterns](references/anti-patterns.md)**: O que evitar (especialmente CSS inline).
26
- - **[Design Guidelines](references/design-system.md)**: Tipografia, cores e hierarquia visual detalhada.
69
+ - **[Master Patterns](references/master-patterns.md)**: Código "Gold Standard" com patterns Stage e Dense. **Sempre use como base.**
70
+ - **[Theme Config](assets/theme.js)**: Configuração do tema Zen com headings fw 900 e Dark Mode automático.
71
+ - **[Visual References](references/visual-references.md)**: Dicionário Visual-Code com especificações Zen.
72
+ - **[Anti-patterns](references/anti-patterns.md)**: O que evitar (CSS inline, inputs decorados, títulos leves).
73
+ - **[Design Guidelines](references/design-system.md)**: Tipografia, cores, hierarquia e contextos detalhados.
74
+
75
+ ---
27
76
 
28
- ## Checklist de Lapidação (RiLiGar Excellence)
77
+ ## Checklist de Lapidação Zen
29
78
 
30
79
  Antes de entregar qualquer interface, o agente **DEVE** validar:
31
80
 
32
- 1. [ ] Configurei `defaultProps` no theme.js para evitar repetição de props?
33
- 2. [ ] O código do componente está "limpo"? (Ex: `<Button>Save</Button>` sem `radius/size`).
34
- 3. [ ] Removi **TODO** o CSS inline (`style={{}}`)?
35
- 4. [ ] Usei props semânticas do Mantine (`bd`, `bg`, `c`)?
36
- 5. [ ] As cores são semânticas e theme-aware? (Ex: `c="dimmed"`).
37
- 6. [ ] Removi todas as tags HTML nativas (`div`, `button`)?
38
- 7. [ ] Usei Montserrat via font-family do tema?
39
- 8. [ ] O padding vertical em listas e tabelas é compacto?
40
- 9. [ ] Os ícones usam `stroke={1.5}`?
41
- 10. [ ] O resultado é "Clean" e livre de ruído visual?
81
+ ### Foundation
82
+
83
+ 1. [ ] Identifiquei o contexto correto? (Stage vs Dense)
84
+ 2. [ ] Configurei `defaultProps` no theme.js para evitar repetição?
85
+ 3. [ ] O código está "limpo"? (Ex: `<Button>Save</Button>` sem `radius/size`)
86
+ 4. [ ] Removi **TODO** o CSS inline (`style={{}}`)? Zero CSS files?
87
+ 5. [ ] Removi todas as tags HTML nativas (`div`, `button`)?
88
+
89
+ ### Zen Soul
90
+
91
+ 6. [ ] Títulos usam fw 900 e letter-spacing -0.04em?
92
+ 7. [ ] Labels/subtítulos usam Small Caps (uppercase, fw 800, ls 1.5px)?
93
+ 8. [ ] Métricas principais usam Big Type (64px+, fw 900, lh 1)?
94
+ 9. [ ] Inputs no contexto Stage usam estilo unstyled (border-bottom only)?
95
+ 10. [ ] O layout segue o conceito de "Palco"? (container XL, py generoso)
96
+
97
+ ### Excellence
98
+
99
+ 11. [ ] Cores são semânticas e theme-aware? (Ex: `c="dimmed"`)
100
+ 12. [ ] Ícones usam `stroke={1.5}` e tamanho 16-18px?
101
+ 13. [ ] O padding vertical em listas/tabelas é compacto no contexto Dense?
102
+ 14. [ ] O resultado é "Clean" e livre de ruído visual?
103
+
104
+ ---
42
105
 
43
106
  ## Princípios de Implementação
44
107
 
45
- 1. **Theme First:** Se você está repetindo `size="sm"` em todo lugar, mova para `theme.components`.
46
- 2. **Mantine Nativo:** Use APENAS a API do Mantine. Zero CSS files.
47
- 3. **Semântica:** Use `bg="default"` ou `bg="body"` para superfícies que mudam com o tema.
48
- 4. **Bordas:** Use `withBorder` em componentes ou `bd` em Caixas.
49
- 5. **Tipografia:** Use `Title`, `Text` e `Code` do sistema.
108
+ 1. **Theme First:** Se você está repetindo uma prop, mova para `theme.components`.
109
+ 2. **Mantine Nativo:** Use APENAS a API do Mantine. Zero CSS files.
110
+ 3. **Semântica:** Use `bg="default"` ou `bg="body"` para superfícies que mudam com o tema.
111
+ 4. **Bordas:** Use `withBorder` em componentes ou `bd` em Caixas.
112
+ 5. **Tipografia:** Use `Title`, `Text` e `Code` do sistema — nunca tags HTML.
113
+
114
+ ## Master Prompt (Geração Zen)
50
115
 
51
- ## Instruções de Geração
116
+ Ao gerar novas interfaces, use este prompt mental como guia:
52
117
 
53
- Ao gerar UI, sempre prefira as estruturas em **[Master Patterns](references/master-patterns.md)**.
118
+ > "Crie uma interface com estética Zen-Modern de alto impacto. Princípios: Conteúdo sobre Cromo (foco total na tipografia e dados). Paleta minimalista (Pure White backgrounds, Dark-9/Gray-9 texts). Hierarquia Massiva (Títulos em Bold/900 com letter-spacing -0.04em, Labels em Small Caps/LTS 1.5px). Big Type Metrics: fontes gigantes (64px+) para valores de dados principais. Inputs Minimalistas: estilo unstyled com apenas border-bottom. Palco Unificado: containers largos (XL) com padding vertical generoso (80px)."
54
119
 
55
120
  **Atenção:** Código verboso com muitas props repetidas será considerado uma falha de design system.
package/.agent/skills/riligar-design-system/assets/theme.js CHANGED
@@ -3,21 +3,33 @@ import { createTheme, rem } from '@mantine/core'
3
3
  export const theme = createTheme({
4
4
  fontFamily: 'Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
5
5
 
6
+ // --- ZEN HEADINGS ---
7
+ // fw 900 + tracking -0.04em = Hierarquia Massiva (Zen Manifesto §3)
8
+ headings: {
9
+ fontWeight: '900',
10
+ sizes: {
11
+ h1: { fontSize: rem(56), lineHeight: '1', letterSpacing: '-0.04em' },
12
+ h2: { fontSize: rem(48), lineHeight: '1', letterSpacing: '-0.04em' },
13
+ h3: { fontSize: rem(32), lineHeight: '1.1', letterSpacing: '-0.03em' },
14
+ h4: { fontSize: rem(20), lineHeight: '1.2', letterSpacing: '-0.02em' },
15
+ },
16
+ },
17
+
6
18
  colors: {
7
19
  // Escala Neutra Universal (Substitui o gray padrão)
8
20
  gray: [
9
- '#F9FAFB', // 0: App Background
10
- '#F3F4F6', // 1: Hover/Subtle
11
- '#E5E7EB', // 2: Borders
21
+ '#F9FAFB', // 0: App Background / Canvas
22
+ '#F3F4F6', // 1: Hover / Subtle Feedback
23
+ '#E5E7EB', // 2: Borders (a borda universal Zen)
12
24
  '#D1D5DB', // 3: Disabled
13
- '#9CA3AF', // 4: Placeholder
25
+ '#9CA3AF', // 4: Zen Labels (Small Caps)
14
26
  '#6B7280', // 5: Text Secondary
15
27
  '#4B5563', // 6: Text Primary Soft
16
28
  '#374151', // 7: Text Primary
17
29
  '#1F2937', // 8: Headers
18
- '#11181C', // 9: Absolute Black
30
+ '#11181C', // 9: Absolute Black (nunca #000)
19
31
  ],
20
- // Semânticos neutralizados para manter monochromaticidade total
32
+ // Semânticos neutralizados para monocromaticidade total
21
33
  error: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB', '#9CA3AF', '#6B7280', '#4B5563', '#374151', '#1F2937', '#11181C'],
22
34
  success: ['#F9FAFB', '#F3F4F6', '#E5E7EB', '#D1D5DB', '#9CA3AF', '#6B7280', '#4B5563', '#374151', '#1F2937', '#11181C'],
23
35
  },
@@ -25,13 +37,13 @@ export const theme = createTheme({
25
37
  primaryColor: 'dark', // Escala dark mapeada para cinzas
26
38
  autoContrast: true,
27
39
 
28
- defaultRadius: 'md', // 6px
40
+ defaultRadius: 'md', // 6px — suave, nunca "pill"
29
41
 
30
42
  components: {
31
43
  // --- LAYOUT & CONTAINERS ---
32
44
  Paper: {
33
45
  defaultProps: {
34
- withBorder: true,
46
+ withBorder: true, // Borda > Sombra (Zen §2: Layer 1)
35
47
  shadow: 'none',
36
48
  radius: 'lg', // 8px para containers
37
49
  },
@@ -48,7 +60,7 @@ export const theme = createTheme({
48
60
  // --- DATA DISPLAY ---
49
61
  Table: {
50
62
  defaultProps: {
51
- verticalSpacing: 'xs', // 8px density
63
+ verticalSpacing: 'xs', // 8px — Zen Dense density
52
64
  horizontalSpacing: 'md',
53
65
  withRowBorders: true,
54
66
  highlightOnHover: true,
@@ -58,7 +70,7 @@ export const theme = createTheme({
58
70
  defaultProps: {
59
71
  size: 'sm',
60
72
  radius: 'sm',
61
- variant: 'light',
73
+ variant: 'light', // Sutil — nunca chamativo
62
74
  fw: 500,
63
75
  },
64
76
  },
@@ -66,14 +78,14 @@ export const theme = createTheme({
66
78
  // --- INPUTS & ACTIONS ---
67
79
  Button: {
68
80
  defaultProps: {
69
- size: 'sm', // 32px
81
+ size: 'sm', // 32px — compacto
70
82
  fw: 500,
71
83
  radius: 'md',
72
84
  },
73
85
  },
74
86
  TextInput: {
75
87
  defaultProps: {
76
- size: 'sm', // 32px height
88
+ size: 'sm', // 32px height — Zen Dense
77
89
  radius: 'md',
78
90
  },
79
91
  styles: theme => ({
@@ -93,7 +105,7 @@ export const theme = createTheme({
93
105
  },
94
106
  ActionIcon: {
95
107
  defaultProps: {
96
- size: 'sm', // 26px context triggers
108
+ size: 'sm', // 26px — context triggers
97
109
  variant: 'subtle',
98
110
  color: 'gray',
99
111
  radius: 'md',
@@ -107,14 +119,16 @@ export const theme = createTheme({
107
119
  color: 'gray',
108
120
  },
109
121
  },
122
+
123
+ // --- TYPOGRAPHY ---
110
124
  Title: {
111
125
  defaultProps: {
112
- lh: 1.2,
126
+ lh: 1, // Zen: lh 1 para impacto massivo
113
127
  },
114
128
  },
115
129
  Text: {
116
130
  defaultProps: {
117
- lh: 1.6,
131
+ lh: 1.6, // Corpo: respiro para legibilidade
118
132
  },
119
133
  },
120
134
  },
package/.agent/skills/riligar-design-system/references/anti-patterns.md CHANGED
@@ -1,36 +1,85 @@
1
- # Anti-Patterns: O que NÃO é RiLiGar
1
+ # Anti-Patterns: O que NÃO é Zen
2
2
 
3
- Para atingir a excelência, devemos eliminar vícios de design comum que deixam a interface com cara de "genérica".
3
+ Para atingir a excelência, devemos eliminar vícios que destroem a alma Zen da interface.
4
4
 
5
- | Erro Comum | Por que é ruim? | A Solução RiLiGar |
5
+ ## Anti-Patterns Universais
6
+
7
+ | Erro Comum | Por que é ruim? | A Solução Zen |
6
8
  | :-------------------------- | :------------------------------------------------------ | :-------------------------------------------------- |
7
- | **Sombras Drop (Pesadas)** | Adiciona ruído visual e amadorismo. | `border: 1px solid #E5E7EB`. |
8
- | **Azul "Bootstrap"** | Cor saturada demais para a estética minimalista. | Use `#000000` (Preto) ou um azul marinho `#11181C`. |
9
+ | **Sombras Drop (Pesadas)** | Adiciona ruído visual e amadorismo. | `border: 1px solid gray.2`. |
10
+ | **Azul "Bootstrap"** | Cor saturada demais para a estética Zen. | Use `#000000` (Preto) ou um azul marinho `#11181C`. |
9
11
  | **Pillings (Radius total)** | Lembra apps mobile infantis ou Google Material antigos. | `border-radius: 6px`. Retangular com quinas suaves. |
10
12
  | **Inputs Gigantes** | Quebram a densidade de informação útil. | `height: 32px`. Compacto e focado. |
11
13
  | **Gradientes Lineares** | Introduzem profundidade desnecessária. | Cores puras e sólidas (Flat). |
12
- | **Divisores Escuros** | Chamam mais atenção que o próprio conteúdo. | Use `#F3F4F6` para divisores internos. |
14
+ | **Divisores Escuros** | Chamam mais atenção que o próprio conteúdo. | Use `gray.1` para divisores internos. |
15
+ | **CSS Inline** | Quebra a centralização do design system. | Tudo via Props do Mantine ou `theme.components`. |
16
+ | **Tags HTML nativas** | `div`, `button`, `input` fora do Mantine. | Use `Box`, `Button`, `TextInput` do Mantine. |
17
+
18
+ ## Anti-Patterns do Zen Stage
19
+
20
+ | Erro | Por que é ruim? | A Solução Zen |
21
+ | :--------------------------------------- | :---------------------------------------------- | :----------------------------------------------- |
22
+ | **Títulos com peso ≤ 700** | Falta impacto teatral. Parece genérico. | Use fw 900 com ls -0.04em. |
23
+ | **Inputs com bordas completas no Stage** | Decoração excessiva. Compete com o conteúdo. | Variant `unstyled` com apenas `border-bottom`. |
24
+ | **Métricas em tamanho normal (14-20px)** | Desperdiça a oportunidade de declaração visual. | Big Type: 64px+ para dados principais. |
25
+ | **Container sem padding vertical** | Quebra o conceito de "Palco". Conteúdo colado. | `py={80}` no Container principal. |
26
+ | **Labels sem Small Caps** | Perde a hierarquia sutil que distingue o Zen. | Uppercase, fw 800, fz 10-12px, lts 1.5px. |
27
+ | **Muitos elementos competindo** | O palco fica poluído. A "performance" se perde. | Reduza. O Zen é sobre o que você decide NÃO pôr. |
13
28
 
14
- ## Exemplo de Refatoração (Cérebro do Agente)
29
+ ## Exemplo de Refatoração
15
30
 
16
31
  **❌ Antes (Design Comum):**
17
32
 
18
- ```html
19
- <div style="box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 20px; padding: 20px; background: blue;">
20
- <h1 style="color: white; font-weight: 800;">User Info</h1>
21
- <button style="border-radius: 50px; padding: 10px 20px;">Click Me</button>
33
+ ```jsx
34
+ <div style={{ boxShadow: '0 4px 6px rgba(0,0,0,0.1)', borderRadius: 20, padding: 20 }}>
35
+ <h1 style={{ fontSize: 24, fontWeight: 600 }}>Revenue</h1>
36
+ <p style={{ fontSize: 18 }}>$42,500</p>
37
+ <input style={{ border: '1px solid #ccc', borderRadius: 8, padding: 12 }} />
22
38
  </div>
23
39
  ```
24
40
 
25
- **✅ Depois (RiLiGar Excellence):**
41
+ **✅ Depois (Zen Excellence):**
26
42
 
27
- ```html
28
- <div style="border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; background: #FFF;">
29
- <h3 style="color: #11181C; font-weight: 600; font-size: 14px; margin-bottom: 8px;">User Info</h3>
30
- <button style="border-radius: 6px; height: 32px; padding: 0 12px; background: #000; color: #FFF; font-size: 12px;">Action</button>
31
- </div>
43
+ ```jsx
44
+ <Container
45
+ size="xl"
46
+ py={80}
47
+ >
48
+ <Stack gap={4}>
49
+ <Text
50
+ fz={11}
51
+ fw={800}
52
+ c="gray.4"
53
+ tt="uppercase"
54
+ lts="1.5px"
55
+ >
56
+ Revenue
57
+ </Text>
58
+ <Title
59
+ order={2}
60
+ fz={80}
61
+ fw={900}
62
+ lh={1}
63
+ lts="-0.04em"
64
+ >
65
+ $42,500
66
+ </Title>
67
+ </Stack>
68
+
69
+ <TextInput
70
+ variant="unstyled"
71
+ placeholder="Search..."
72
+ styles={{
73
+ input: {
74
+ borderBottom: '1px solid var(--mantine-color-gray-2)',
75
+ borderRadius: 0,
76
+ paddingBottom: 8,
77
+ },
78
+ }}
79
+ />
80
+ </Container>
32
81
  ```
33
82
 
34
83
  ---
35
84
 
36
- _Lembre-se: O design RiLiGar é sobre **restrição**. Se você pode remover uma borda ou uma cor e o app ainda funciona, remova._
85
+ _Lembre-se: O design Zen é sobre **restrição**. Se você pode remover um elemento e a interface ainda funciona, remova._