Ajit-ApTech/premium-glass-android

Vidro Premium para Android

Objetivo: uma interface que pareça calma, espacial e cara. O vidro é um material para os controles que flutuam sobre o conteúdo. Não é um estilo para espalhar por toda parte. Teste de sucesso: as pessoas dizem "parece limpo e em camadas", nunca "alguém colocou desfoque em tudo".

Este skill controla material, hierarquia, profundidade, movimento e acessibilidade. A própria marca do projeto controla identidade e texto. Os valores de marca padrão estão em assets/tokens.json (manter a paleta) e podem ser substituídos.

0. Segurança e escopo

• Trabalhe apenas dentro do projeto selecionado pelo usuário. Não leia segredos, chaves ou variáveis de ambiente. Não faça requisições de rede ou instale pacotes; se uma biblioteca for necessária, nomeie-a e deixe o usuário decidir.
• Não sobrescreva arquivos existentes sem ser solicitado; proponha primeiro (seção 2).
• Use apenas conteúdo de exemplo fictício.
• Nunca use fontes da Apple (San Francisco), SF Symbols, logotipos da Apple ou cromo do iOS. Use Inter e ícones Material Symbols/Lucide.
• Fatos marcados com (VERIFICAR) podem ficar desatualizados (APIs, versões). Peça ao usuário para confirmá-los.

1. As cinco regras duras

1. O conteúdo nunca é vidro. Cartões, linhas de listas, formulários, fundos de página e mídia permanecem opacos ou com superfície suave.
2. Vidro apenas na camada flutuante: pílula de navegação inferior, barra superior sobre conteúdo rolante, botão de ação flutuante, folhas inferiores e menus, campo de busca, toasts/snackbars, pequenos chips flutuantes.
3. Nunca vidro sobre vidro. Dentro de uma superfície de vidro, separe itens com preenchimentos, divisores ou opacidade.
4. Legibilidade supera aparência. O texto do corpo precisa de 4.5:1 (texto grande e ícones 3:1) sobre o pior cenário de fundo. Execute scripts/contrast_check.py.
5. Toda superfície de vidro tem um fallback sólido (Android antigo, Reduzir transparência, alto contraste, economia de bateria, desfoque desabilitado pelo dispositivo).

Pergunta de portão antes de aplicar vidro a qualquer elemento: "Qual função funcional este material comunica?" Respostas válidas: flutua sobre conteúdo rolante; é temporário ou contextual; deve permanecer acessível enquanto o conteúdo se move sob ele. Sem resposta = sem vidro.

2. Fluxo de trabalho

1. Inspecionar: plataforma, min/target SDK, tema/tokens existentes, estrutura de navegação, necessidades de acessibilidade, metas de desempenho. Liste perguntas em aberto em vez de adivinhar.
2. Mapa de camadas (antes de qualquer código): tabela de elementos -> camada (conteúdo / estrutura / flutuante) -> vidro sim/não -> nível -> motivo. Apresente-o com o plano.
3. Tokens: comece de assets/tokens.json; ajuste as cores da marca; execute novamente a verificação de contraste para cada nível em ambos os modos.
4. Construa com os modelos em assets/GlassTheme.kt e as orientações em references/compose-implementation.md.
5. Verifique com references/review-checklist.md e scripts/audit_compose.py. Relate evidências (valores de contraste, contagem de camadas de vidro por tela, capturas de tela de fallback). Não afirme que uma verificação passou sem evidências.

3. Níveis de material (valores iniciais, dp)

Nível	Uso	Desfoque	Preenchimento (escuro)	Preenchimento (claro)
nenhum	conteúdo, cartões, listas, fundos	-	-	-
fino	controles com apenas ícone ou rótulo grande	16	tinta @ 0.55	branco @ 0.55
regular	pílula de navegação, barra superior, busca, FAB, toasts	24	tinta @ 0.66	branco @ 0.70
grosso	folhas, menus, diálogos, sobreposições com muito texto	32	tinta @ 0.78	branco @ 0.82
véu	escurecimento atrás de folhas modais	0-8	preto @ 0.20-0.45	preto @ 0.20-0.45
Detalhes e números de contraste verificados: references/tokens.md. Os preenchimentos são tingidos com a cor da tinta da superfície, não branco puro, para que o texto do modo escuro sobreviva a fundos claros.

4. Verificação da realidade Android (leia antes de prometer qualquer coisa)

• Modifier.blur() / RenderEffect desfocam o conteúdo do próprio elemento, não o que está atrás dele. O desfoque de fundo real precisa de uma biblioteca (Haze é Apache-2.0 e suporta Compose no Android) ou desfoque de janela para diálogos. Os nomes de API de bibliotecas mudam entre versões: leia o README da versão instalada (VERIFICAR).
• Efeitos de desfoque precisam do Android 12 (API 31) ou superior (VERIFICAR). Abaixo disso, use a superfície de fallback sólida.
• Folhas inferiores modais e diálogos vivem em uma janela separada, então o desfoque de fundo na composição pode não ver o conteúdo atrás deles. Use desfoque de fundo de janela onde for suportado e verifique WindowManager.isCrossWindowBlurEnabled (VERIFICAR), caso contrário, use uma folha grossa quase opaca com um véu.
• Desfoque sobre um gradiente plano é invisível; o vidro precisa de estrutura por trás (conteúdo, imagens ou um brilho suave deliberado). Caso contrário, custa desempenho por nada.
• Orçamento: no máximo 2-3 camadas de desfoque simultâneas por tela (1-2 em celulares de baixo custo). Nunca desfoque itens de lista ou telas inteiras. Não anime o raio de desfoque em superfícies grandes; anime alfa ou transformação.
• Teste em um celular de baixo custo (3-4 GB de RAM) em uma build tipo release.

5. Modos de acessibilidade (implementar todos)

• Reduzir transparência (ajuste no aplicativo + sistema "remover animações"/alto contraste): troque vidro por tokens de superfície sólida com uma borda visível de 1 dp.
• Fonte grande (200%) e TalkBack: nenhuma informação apenas em cor; rótulos em controles apenas com ícone; ordem de foco sensata.
• Movimento reduzido: substitua movimento por desvanecimentos; mantenha feedback de estado.
• Alvos de toque de pelo menos 48 dp. Gestos (deslizar) sempre têm um botão ou alternativa customActions.

6. Componentes

Especificações para pílula de navegação, barra superior, FAB, folhas, campo de busca, chips, cartões, linhas deslizáveis, pilha de triagem, entrada de chat, chips de valor mascarado: references/components.md. Use um raio por função (chip 999, controle 16, cartão 24, pílula de navegação 28, folha 32); raio aninhado = raio externo - preenchimento.

7. Movimento

Molas 250-350 ms, desvanecimentos curtos 150 ms, sem ultrapassagem elástica. Toque háptico no limite de deslize. Estado pressionado: escala 0.97 mais um realce suave. Respeite movimento reduzido.

8. Modo de geração de imagem (telas de referência)

Quando solicitado a criar prompts de maquete, siga references/image-prompts.md: uma tela por prompt, bloco de estilo autocontido, texto exato na tela, vidro apenas na camada flutuante, "cartões são opacos", barra de status do Android, sem elementos Apple. Seis prompts de telas trabalhadas estão na referência. Lembre ao usuário que geradores distorcem texto pequeno e devanagari; use saídas como referências de layout e clima, depois reconstrua no Figma/Compose.

9. Modo de revisão

Quando solicitado a revisar um design ou código: classifique cada elemento por camada, conte camadas de vidro por tela, execute o script de auditoria (python scripts/audit_compose.py <src>), execute o script de contraste, depois liste descobertas por gravidade com a correção de references/review-checklist.md.

10. Expectativas de saída

Para qualquer tarefa, indique: o que é vidro e por quê; qual nível; evidência de contraste; fallbacks; qualquer coisa aproximada ou não verificada. Mantenha as alterações no escopo: não redesenhe UX não relacionada; liste problemas não relacionados separadamente.

Referências e arquivos

• references/principles.md - Princípios derivados da Apple e fontes
• references/tokens.md - Tabelas de tokens e resultados de contraste verificados
• references/compose-implementation.md - Arquitetura Compose, trechos, fallbacks, desempenho
• references/components.md - Especificações e estados de componentes
• references/image-prompts.md - Modelo de prompt e fluxo de trabalho
• references/review-checklist.md - Portões de qualidade e anti-padrões
• scripts/contrast_check.py, scripts/audit_compose.py - Verificadores locais (sem rede)
• assets/tokens.json, assets/GlassTheme.kt (opcional: adicione o conjunto de 45 prompts de tela Retain como assets/retain-screen-prompts.md)