Proposta de Aprendizado (/learn)

Com base nas decisões de arquitetura e refinamentos implementados nesta sessão na página de planos e hospedagem (plano/index.html), identificamos padrões de engenharia e UI/UX de alto valor para serem consolidados nas skills de personalização.

🎯 Resumo das Aprendizagens

  1. Engine de Simulador de Briefing Interativo com Gating de Categorias (data-tier-gate):
    • Agrupamento de chips em categorias temáticas com dependência de nível (Fundações, Vendas/Conversão, Sistemas/IA).
    • Bloqueio/desbloqueio visual dinâmico com badge de restrição (🔒 Requer Rota Pro / Sob Medida).
    • Upgrade automático de rota em 1 clique ao interagir com categorias ou chips restritos.
    • Painel executivo de briefing em tempo real com meta-grid (Prazo, Infraestrutura Cloud, Checkpoint 20/80 e SLA), tags com remoção rápida (✕), cópia para área de transferência e montagem de mensagem formatada para o WhatsApp.
  2. Padrões de Navegação & Micro-Interações:
    • Sticky Navigation: Cabeçalho fixo com transição suave para o estado .scrolled (sombra de profundidade e contraste de borda ao rolar > 20px).
    • Floating Go-To-Top (#gotopBtn): Botão flutuante no canto inferior direito com animação de entrada/saída (rolagem > 300px) e retorno suave ao topo (behavior: 'smooth').
  3. Monitoramento & UX PWA:
    • Badge dinâmico de status de rede (PWA Conectado vs. Modo Offline com Cache Ativo).
    • Banner customizado A2HS (Add to Home Screen) com persistência de fechamento no localStorage.

📁 Arquivos a Atualizar

1. Atualizar a Skill artesdosul

Adicionar a seção “5. Interactive Simulator & Gating Engine” e “6. Navigation & Top UX”:

### 5. Interactive Simulator & Gating Engine
Para páginas de planos, serviços ou orçamentos:
- Organize chips em categorias temáticas com `data-tier-gate="essencial|profissional|sobmedida"`.
- Implemente gating dinâmico: categorias superiores ao plano ativo ficam com classe `.disabled`, badge de bloqueio e botão de desbloqueio com 1 clique.
- Painel de briefing executivo com meta-grid de estimativas (Prazo, Cloud, Pagamento 20/80, SLA), tags interativas removíveis (✕) e botão de cópia com feedback instantâneo.

### 6. Navigation & Scroll Polish
- **Sticky Nav**: Header com `position: sticky; top: 0; z-index: 100;` e classe `.scrolled` (box-shadow e borda reforçada após 20px de scroll).
- **Go-To-Top Flutuante**: Botão fixo no canto inferior direito (`bottom: 24px; right: 24px; z-index: 99;`), visível após 300px de scroll com `window.scrollTo({ top: 0, behavior: 'smooth' })`.

❓ Próximo Passo

Revise a proposta acima. Deseja aprovar a atualização da skill artesdosul com esses novos padrões?