Skill: UI/UX Reflex Premium

Esta skill define a identidade visual "Biodiagnóstico 2.0". Ela deve ser utilizada para garantir consistência estética, usabilidade (acessibilidade) e o "feeling" premium em todas as telas da aplicação.

🎨 Princípios de Design

1. •Glassmorphism: Uso de transparências e blur em modais e overlays para profundidade.
2. •Respiro Visual: Espaçamentos generosos baseados em múltiplos de 4 (utilizando a classe Spacing).
3. •Micro-interações: Botões e elementos clicáveis devem reagir suavemente ao hover e clique (escalonamento, brilho).
4. •Legibilidade: Contraste alto usando Color.DEEP para títulos e Color.TEXT_PRIMARY para o corpo.
5. •Motion System: Animações não devem ser aleatórias. Use transition_duration="200ms" para interações rápidas e 300ms para entradas de página com transition_timing_function="ease-in-out".

🛠️ Ferramentas e Tokens

Os tokens estão definidos no arquivo biodiagnostico_app/biodiagnostico_app/styles.py.

• •Cores: Color.PRIMARY (#4CAF50), Color.DEEP (#1B5E20), Color.BACKGROUND (#F8F9FA).
• •Sombras: Design.SHADOW_MD para cards padrão, Design.SHADOW_LG para elementos flutuantes.
• •Raio de Borda: Design.RADIUS_LG (12px) é o padrão para inputs e botões.

📝 Como Implementar Componentes

Sempre verifique a pasta examples/ nesta skill para snippets prontos de:

• •glass_card.py: Cards com efeito de vidro.
• •premium_button.py: Botões com gradiente e animação.
• •data_table.py: Tabelas formatadas para leitura de dados médicos.
• •advanced_data_table.py: Tabela complexa com badges, ações e scroll.
• •metric_card_chart.py: Card de métrica com gráfico sparkline embutido.
• •pdf_export_template.py: Modal de configuração para exportação de relatórios.

🚨 Regras Inegociáveis

1. •Acessibilidade: Todo input deve ter min_height="44px".
2. •Consistência: Nunca use cores hexadecimais soltas; use sempre a classe Color.
3. •Animação: Toda página deve carregar com uma animação de fadeInUp.
4. •Layout Oficial: Novas páginas devem, por padrão, ser integradas ao authenticated_layout() ou conter a navbar() e o fundo Color.BACKGROUND para evitar o aspecto de "página solta".
5. •Harmonia: O uso de GLASS_STYLE deve ser moderado (modais/overlays). Cards de dashboard devem preferir Color.SURFACE sólido com _hover para profundidade.
6. •Acessibilidade ARIA: Sempre que usar um ícone como botão sem texto, adicione aria_label="Descrição da ação".

🎨 Ferramentas de Design (Scripts)

Use esses "fiscais" para garantir que o app continue lindo e rápido:

1. •

   Auditoria Visual (O Fiscal):

   • •Comando: py .agent/skills/ui-ux-reflex-premium/scripts/auditoria_visual.py
   • •Função: Garante que ninguém usou cores fora do padrão (Hex soltos).
2. •

   Alinhador Automático (O Alinhador):

   • •Comando: py .agent/skills/ui-ux-reflex-premium/scripts/alinhador_auto.py
   • •Função: Verifica se o "respiro" entre os elementos segue os tokens Spacing.
3. •

   Otimizador de Imagens (O Otimizador):

   • •Comando: py .agent/skills/ui-ux-reflex-premium/scripts/otimizador_img.py
   • •Função: Diminui o peso das imagens em assets/ para carregamento instantâneo.
4. •

   Verificador de Contraste (O Verificador):

   • •Comando: py .agent/skills/ui-ux-reflex-premium/scripts/check_contraste.py
   • •Função: Garante que o texto está legível (WCAG AA). ⚠️ A paleta atual pode ter problemas de contraste.
5. •

   Gerador de Ícones (O Artesão):

   • •Comando: py .agent/skills/ui-ux-reflex-premium/scripts/gerador_icones.py
   • •Função: Cria automaticamente favicons e ícones mobile na pasta assets.

👁️ Check de Referência Visual

Antes de entregar, compare o código com as imagens de referência do projeto (Dashboard e Controle de Qualidade):

• •O cabeçalho está alinhado?
• •A cor de fundo é a correta (#F8F9FA)?
• •O respiro (padding) condiz com o site real?