Guidelines
Regras para desenvolvedores e AI Builders.
AI Builder Rules
Do
- Usar tokens semânticos (bg-background)
- Importar de @/components/ui/*
- Usar @tabler/icons-react
- Seguir templates de página
- font-heading para títulos
- aria-label em icon-only buttons
Don't
- Hardcodar cores (bg-white, text-gray-500)
- Usar HTML nativo onde há componente
- Usar lucide-react ou react-icons
- Criar componentes customizados desnecessários
- Remover focus ring (outline-none)
- Pular Label em form inputs
// Contexto para AI prompts:
// Framework: Next.js 14, React 18, TypeScript
// Styling: Tailwind CSS 3.4 + Morada tokens
// Components: @/components/ui/* (shadcn)
// Icons: @tabler/icons-react
// Fonts: Outfit (font-heading), Lato (font-body)Acessibilidade
WCAG 2.1 nível AA.
| Regra | Detalhe |
|---|---|
| Contraste texto | Mínimo 4.5:1 (normal) ou 3:1 (grande) |
| Teclado | Todos interativos via Tab, focus ring visível |
| Semântica | Tags HTML semânticas, headings em ordem |
| Labels | Todo input com label associado |
| ARIA | aria-label em icon buttons, aria-invalid em erros |
| Cor | Nunca usar cor como único indicador |
Dark Mode
Ativado via classe .dark no html.
// Correto — adapta ao tema
<div className="bg-background text-foreground border-border" />
// Errado — nao adapta
<div className="bg-white text-gray-900 border-gray-200" />Ícones
Exclusivamente @tabler/icons-react.
| Contexto | Tamanho | Classe |
|---|---|---|
| Dentro de botão | 16px | h-4 w-4 |
| Menu/sidebar | 20px | h-5 w-5 |
| Feature icon | 24px | h-6 w-6 |
| Ilustração | 32-48px | h-8 w-8 a h-12 w-12 |