usage-monitor: Skill for Claude Code

Usage Monitor — opções visuais em HTML

O usuário escolhe mudança visual vendo, nunca no escuro: duas rodadas de visual feito direto no Kotlin foram recusadas ("muito 2D", "disco chamativo"), e todas as rodadas com opções lado a lado saíram escolhidas de primeira. O objetivo dele é a HUD "mais bonita, tema espacial", sem perder a leitura do dado. Esta skill recebe o que mudar e quantas opções (ex.: /usage-monitor-visual-options animação do balão 5) e entrega N protótipos animados lado a lado, no tema vigente, para ele escolher — e só depois disso vem o Compose.

Sem número no pedido, faça 5. Com menos de 3, faça 3.

1. Antes de desenhar

1. Ler o tema vigente e o histórico do que já foi escolhido e recusado — a tabela no fim desta skill é a fonte. Não reproponha uma opção já recusada com o mesmo nome ou o mesmo gesto.
2. Ler a seção da tela em docs/hud-notch.md (HUD) ou em docs/presentation.md (demais telas), e o contrato da primitiva em docs/design-system/components/**/*.prompt.md. A skill usage-monitor-design tem a precedência.
3. Olhar o que existe hoje no código (tempo, curva, o que anima) — vira o card "Hoje (referência)", tracejado, quando a mudança substitui algo.
4. Se o usuário mandou print, reproduzir o conteúdo real dele (textos, contas, valores) no mockup.

2. Regras de criação (valem para toda opção)

• Vocabulário Gargantua: luz quente (--gargantua-gold #E8AE63, --gargantua-hot #FFF0CB, --gargantua-ember #B4501E), núcleo escuro (#030508), plasma com núcleo claro, clarão, ondas finas, lente, disco com Doppler (quente de um lado, brasa do outro). Cada opção nomeada por um fenômeno ("B3 · Jato relativístico", "D5 · Horizonte de eventos") com prefixo de letra da rodada.
• Dado nunca anima errado: comprimento de barra/arco não cresce por efeito, número não passa do valor (sem overshoot/rebote), cor nunca informa sozinha. Efeito é por cima do dado, não no lugar dele.
• Cenário discreto: o usuário recusou efeito "chamativo" (disco forte, 6 faixas). Efeito não compete com o dado nem com o cometa azul de sessão.
• Finito por padrão: transição tem duração em ms (tipicamente 180–800). Animação infinita só se o pedido for de estado contínuo, e ela mora atrás de AppMotionPolicy.continuous no app.
• "Reduzir animações" = corte seco em todas; diga isso no texto.
• Geometria não muda por quadro: nada de janela ou notch redimensionando; revelar é recorte ou desenho por cima.
• Opções distintas entre si no gesto (não cinco variações de fade). Se duas ficarem parecidas, troque uma.
• Mesma animação aplicada a todas as superfícies pedidas (ex.: balão da conta e da engrenagem).
• Opções só quando competem pelo mesmo lugar. Quando o pedido é um produto com várias peças complementares (rodada AG, modo terminal), a galeria de opções soltas confunde: mostre a proposta fechada, tela por tela, e deixe a escolha para o que de fato disputa a mesma tela.