46 lines
1.3 KiB
Markdown
46 lines
1.3 KiB
Markdown
# 🎨 Skill: Design System Enforcer (PlatformSistemas)
|
|
|
|
## 🎯 Objetivo
|
|
Garantir que todas as alterações no frontend respeitem os novos padrões de "Engenharia de Elite": Tipografia Fluida, Coordenação de Layout e Mobile-First.
|
|
|
|
---
|
|
|
|
## 🔡 Regras de Tipografia
|
|
|
|
### ❌ PROIBIDO
|
|
- Usar `px` fixos para `font-size`.
|
|
- Usar `vw` puro para texto.
|
|
- Usar valores mágicos ou hardcoded.
|
|
|
|
### ✅ OBRIGATÓRIO
|
|
- Usar variáveis CSS de escala fluida:
|
|
- `var(--text-xs)`
|
|
- `var(--text-sm)`
|
|
- `var(--text-base)`
|
|
- `var(--text-lg)`
|
|
- `var(--text-xl)`
|
|
- `var(--text-2xl)`
|
|
- `var(--text-3xl)`
|
|
- Usar `clamp()` para novos tamanhos customizados.
|
|
|
|
---
|
|
|
|
## 🏗️ Regras de Layout (Coordenação)
|
|
|
|
### ❌ PROIBIDO
|
|
- Usar larguras fixas para o conteúdo principal que não considerem a sidebar.
|
|
- Definir `z-index` arbitrário.
|
|
|
|
### ✅ OBRIGATÓRIO
|
|
- Usar variáveis de coordenação:
|
|
- `--sidebar-width-expanded` (240px)
|
|
- `--sidebar-width-collapsed` (80px)
|
|
- `--header-height` (64px)
|
|
- Padding/Margin de containers principais deve ser coordenado com `--sidebar-width`.
|
|
|
|
---
|
|
|
|
## 📱 Regras Mobile-First
|
|
- Sempre testar se a alteração mantém o layout travado no mobile (`user-scalable=no`).
|
|
- Priorizar containers com `min-h` e `max-h-[80vh]` para evitar quebras em telas pequenas.
|