testes/.agent/skills/design-system/SKILL.md

🎨 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.