chore(agent): documentar obrigatoriedade de Google Sans e @lucide/vue em rules e skills de UX
This commit is contained in:
parent
20663b7f6a
commit
eaf2cb600c
2 changed files with 10 additions and 11 deletions
|
|
@ -17,10 +17,11 @@ Usado nos módulos voltados a empresas privadas e gestão corporativa.
|
|||
|
||||
### Características
|
||||
|
||||
- **Framework UI:** Vuetify (Vue 3) / `eli-vue`
|
||||
- **Cores:** paleta própria definida no tema Vuetify do projeto
|
||||
- **Tipografia:** controlada pelo tema Vuetify
|
||||
- **Componentes:** componentes Vuetify (`v-btn`, `v-card`, `v-data-table`, etc.)
|
||||
- **Framework UI:** Vuetify (Vue 3) / `eli-vue` ou Tailwind CSS v4 (módulos verdes e-Licencie `#688c00`)
|
||||
- **Cores:** paleta própria definida no tema do projeto (`#688c00` verde floresta e-Licencie)
|
||||
- **Tipografia Obrigatória:** **`Google Sans`** (Variable Font 100–900 carregada via `@font-face` do MinIO Paiol: `https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf` e `GoogleSans-Italic-VariableFont_GRAD,opsz,wght.ttf`). Proibido uso de fontes genéricas ou `font-mono` em badges/valores (usar `tabular-nums` com `Google Sans`).
|
||||
- **Iconografia Obrigatória:** **`@lucide/vue`** exclusivamente. É proibido usar `lucide-vue-next`, `@mdi/font`, SVGs inline ou caracteres Unicode/ASCII (`└`, `➔`) como ícones visuais.
|
||||
- **Componentes:** componentes Vuetify (`v-btn`, `v-card`, `v-data-table`, etc.) ou componentes modulares Vue 3
|
||||
- **Estilo visual:** moderno, tech, voltado a usabilidade corporativa
|
||||
|
||||
### Quando aplicar
|
||||
|
|
|
|||
|
|
@ -139,11 +139,11 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Em mobile, os elementos empilham verticalmente sem quebra visual?
|
||||
- [ ] Modais têm largura proporcional ao conteúdo?
|
||||
|
||||
#### Tipografia
|
||||
#### Tipografia — Google Sans (obrigatório)
|
||||
|
||||
- [ ] Tamanhos de fonte seguem a escala: 12px (caption), 14px (body), 16px (subtitle), 20px (title), 24px (heading)?
|
||||
- [ ] Textos longos usam `line-height: 1.5` para legibilidade?
|
||||
- [ ] Labels de formulário são visualmente distintos do conteúdo preenchido?
|
||||
- [ ] A fonte **`Google Sans`** (Variable Font 100–900 via `@font-face` de `https://paiol.idz.one/estaticos/GoogleSans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf`) está aplicada em todo o sistema (`--font-sans` e `--eli-font-family`)?
|
||||
- [ ] Proibido `font-mono` em contadores, códigos e valores: usar `tabular-nums` com `Google Sans`.
|
||||
- [ ] Escala: 12px (caption), 14px (body), 16px (subtitle), 20px (title), 24px (heading); `line-height: 1.5` em textos longos.
|
||||
|
||||
#### Acessibilidade básica
|
||||
|
||||
|
|
@ -169,9 +169,7 @@ Ao implementar melhorias, seguir os padrões do ecossistema:
|
|||
Todos os ícones do projeto devem vir exclusivamente da biblioteca **`@lucide/vue`** (dependência já instalada no `package.json`).
|
||||
|
||||
**Proibido**:
|
||||
- SVG inline manual (hardcoded no template)
|
||||
- Ícones de `@mdi/font` ou Material Design Icons em componentes do projeto
|
||||
- Bibliotecas alternativas (Font Awesome, Heroicons, etc.)
|
||||
- `lucide-vue-next`, `@mdi/font`, Font Awesome, Heroicons, SVGs inline manuais ou caracteres ASCII/Unicode (`└`, `➔`) como ícones.
|
||||
|
||||
**Como usar**:
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue