kennedys0/taste-style-skeuomorphism

Use este skill apenas após um usuário escolher explicitamente ou uma configuração de projeto confirmada especificá-lo. Para solicitações de UI novas e não explicadas, use um seletor de estilo como em vez de decidir o gosto do usuário aqui. Existências de marca, acessibilidade e substituições do usuário superam todos os exemplos abaixo. O seguinte guia de estilo não é permissão para começar a codificar UI antes da seleção de estilo.

Pacote de estilo: Skeuomorfismo

ID: skeuomorphism
Assinatura: Controles digitais emprestam affordances tangíveis de objetos físicos, maquinário industrial e hardware analógico.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o apenas após seleção explícita ou estilo de projeto confirmado aplicável. Instruções do projeto podem substituir escolhas individuais. Preserve acessibilidade, utilidade e restrições de marca. Fontes são sugestões, não dependências obrigatórias. Um cartão plano com um gradiente sutil não qualifica como Skeuomorfismo.

Boa adequação / trade-offs

• Funciona bem para: Software de produção musical e sintetizadores, ferramentas de áudio, simuladores especializados, widgets de painéis táteis, instrumentos digitais criativos e experiências táteis lúdicas.
• Cuidado com: Tabelas densas de dados transacionais ou formulários empresariais móveis onde texturas de hardware físico ornamentadas criam confusão visual.
• Direções de referência:
  • Alumínio Industrial Escovado / Hardware de Estúdio: Chassis de prata ou gunmetal usinados com reflexos metálicos radiais, mostradores serrilhados, poços de indicador rebaixados e interruptores mecânicos nítidos.
  • Instrumento de Precisão Matte Fosco: Base composta de grafite profundo / mate com tipografia branca gravada, indicadores de status LED gema e interruptores físicos tipo balancim.

Portão de fidelidade material skeuomórfico — obrigatório

Antes de considerar uma página skeuomórfica completa, a viewport de abertura deve ler visivelmente como um instrumento físico e tangível ou interface de hardware. Se um usuário escolheu este estilo, um cartão plano com cantos arredondados padrão e um único gradiente é uma FALHA, mesmo que as classes CSS contenham skeuo.

Uma implementação skeuomórfica bem-sucedida demonstra todos os seguintes:

1. Direção do Modelo de Luz & Destaques Especulares: As superfícies aderem a uma única fonte de luz consistente (tipicamente de cima para baixo): bordas superiores capturam um destaque de luz especular nítido de 1px (box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35)), enquanto bordas inferiores projetam sombras de queda físicas.
2. Superfícies de Material Refletivo com Múltiplas Paradas: Botões, painéis frontais e interruptores tipo balancim usam gradientes lineares ou radiais com múltiplas paradas simulando alumínio escovado, plástico fosco ou metal anodizado. Preenchimentos de cor única sólida falham.
3. Polaridade Gravada ou Rebaixada: Exibições de texto, controles deslizantes e poços de medidor são visualmente encaixados no chassi usando sombras internas profundas (box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6)), distinguindo claramente os controles que se movem dos recipientes que os abrigam.
4. Curso Mecânico na Interação: Botões pressionam fisicamente para dentro do chassi no clique (transform: translateY(1.5px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);), imitando mecanismos de interruptor com mola real.
5. Affordances Analógicos Legíveis: Mostradores e controles deslizantes físicos incluem leituras digitais claras ou marcas de escala numérica rotuladas, garantindo acessibilidade de teclado e entrada de dados exata.

Teste da primeira viewport: Em uma captura de tela de desktop, identifique o chassi físico, os destaques de bisel especular, os poços rebaixados e os controles de hardware táteis sem ler o título da página. Se parecer puramente digital e plano, fortaleça os reflexos do gradiente e os destaques de bisel.

Exceção explícita de material skeuomórfico — reflexos de hardware são permitidos

Substituição específica do skeuomorfismo: A precaução universal anti-slop contra gradientes decorativos, texturas ou sombras NÃO DEVE ser interpretada como uma proibição de gradientes de material com múltiplas paradas, reflexos metálicos, bordas biseladas ou curso físico aqui. Estas são propriedades de habilitação de material, essenciais para comunicar affordance mecânica.

• Tratamentos de material permitidos: Gradientes metálicos lineares/radiais com múltiplas paradas, biséis de destaque de 1px, canais de poço rebaixados, bordas de botão serrilhadas e luzes de status LED gema.
• Limite anti-slop: Cada metáfora mecânica deve corresponder a uma ação real e funcional. Não decore telas com parafusos falsos, botões ornamentais que não giram ou medidores estáticos que exibem medidas fabricadas.
• Interpretação anti-slop: Avalie detalhes skeuomórficos por affordance tátil, utilidade funcional e legibilidade, não contando paradas de gradiente de cor. Remover biséis físicos para satisfazer uma heurística plana genérica é uma regressão de design.

Tipografia e escrita à máquina

Sans técnica utilitária ou mono de exibição: IBM Plex Sans, DIN Next, Roboto Mono ou sans do sistema. Rótulos de controle: 11–13px maiúsculo com tracking (letter-spacing: 0.08em); medidores de exibição: mono LCD/LED de alto contraste (16–24px). Alto contraste contra painéis escuros (pelo menos 4.5:1).

Direção de cor

• Modo Escuro (Chassi Escuro Gunmetal Anodizado):
  • Base do Chassi: Ardósia usinada / gradiente gunmetal anodizado (linear-gradient(180deg, #323741 0%, #262A32 100%)).
  • Destaques de Superfície: Linha fina especular branca (rgba(255, 255, 255, 0.40)).
  • Poços de Inserção Rebaixados: Cavidade preta profunda (#141619 a #181A1E).
  • Rótulos de Controle: Tipografia branca/prata gravada nítida (#F3F4F6).
• Modo Claro (Alumínio Escovado / Chassi Prata):
  • Base do Chassi: Alumínio usinado / gradiente prata (linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)).
  • Destaques de Superfície: Linha fina especular branca (rgba(255, 255, 255, 0.85)).
  • Poços de Inserção Rebaixados: Cavidade de ardósia rebaixada suave (#D1D5DB com sombra interna).
  • Rótulos de Controle: Tinta carvão gravada profunda (#1F2937 ou #111827).
• Acentos Físicos: Âmbar de sinal (#FFAE00), verde aviação (#10B981) ou cobalto de estúdio (#2563EB).
• Indicadores LED: Cores gema nítidas com brilho ativo distinto vs estado inativo escuro.
• Regra de Acoplamento de Tema & Anti-Colisão: No modo de chassi skeuomórfico claro, rótulos gravados e texto de controle DEVEM inverter para carvão profundo (#1F2937). Deixar rótulos brancos em um chassi de alumínio/prata escovado produz texto invisível e é estritamente proibido.

Layout e geometria

As formas dos componentes mapeiam estritamente suas metáforas físicas: mostradores rotativos, botões de pressão táteis, interruptores tipo balancim e medidores segmentados. Raios de canto de 4–12px em painéis; raios circulares para botões. Evite aplicar peles de hardware a parágrafos de texto genéricos.

Superfícies, profundidade, textura

• Painel do Chassi: Gradiente linear com múltiplas paradas (linear-gradient(180deg, #323741 0%, #262A32 100%)) com destaque superior de 1px e sombra de queda inferior.
• Botão de Pressão Físico: Borda biselada com destaque superior, superfície de botão radial e depressão ativa nítida.
• Poço / Display Rebaixado: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);

Anatomia e interação do componente

• Botão de Pressão Tátil: Acabamento de alumínio usinado, rótulo gravado branco, retorno mecânico de mola na liberação.
• Interruptor Balancim / Alternador: Alternador físico de estado duplo com sombra projetada visível no lado ativo.
• LCD / Leitura de Dados Rebaixado: Tela rebaixada com valor monoespaçado, grade raster sutil e alto contraste.
• Mostrador Rotativo / Controle Deslizante: Indicador de posição tátil com semântica de controle deslizante ARIA e suporte a teclas de seta do teclado.
• Luz de Status LED: Lente gema circular pequena com brilho radiante quando ativo (box-shadow: 0 0 8px currentColor).

Movimento

Resposta mecânica de 140–200 ms. Depressão física direta de 1–2px no clique. Sem overshoot saltitante de desenho animado; o movimento deve parecer ponderado e amortecido.

Receita opcional Anime.js v4

• Decisão de movimento: Mola amortecida ou depressão mecânica linear na pressão; rotação precisa para mostradores.
• Duração inicial: 160ms (0 = imediato); ajustar à tarefa e preferência do usuário.
• Evitar: oscilação perpétua, agitação de agulha não solicitada, elementos flutuantes.
• Dependência: CSS/nativo por padrão. Use Anime.js v4 apenas se a interação solicitada justificar. Siga references/motion-engine.md do Taste Engine quando disponível; o skill autônomo segue os princípios de movimento reduzido e sem loop decorativo acima.

Redação de UI e microcópia

Técnico, preciso e conciso. Exemplos: "Master Output", "Bypass", "Channel 01", "Gain: +3.5 dB". Evite jargão de marketing falante em painéis de instrumentos.

Tokens iniciais (sugestões, não um tema completo)

Token	Padrão chassi escuro	Padrão chassi claro
--taste-skeuo-chassis-bg	linear-gradient(180deg, #323741 0%, #262a32 100%)	linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%)
--taste-skeuo-chassis-border	1px solid rgba(0, 0, 0, 0.8)	1px solid rgba(0, 0, 0, 0.15)
--taste-skeuo-chassis-highlight	inset 0 1px 0 rgba(255, 255, 255, 0.25)	inset 0 1px 0 rgba(255, 255, 255, 0.90)
--taste-skeuo-text	#f3f4f6	#1f2937
--taste-skeuo-btn-bg	linear-gradient(180deg, #3c424f 0%, #2a2e37 100%)	linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%)
--taste-skeuo-btn-bevel	inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50)	inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20)
--taste-skeuo-btn-shadow	0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40)	0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)
--taste-skeuo-well-inset	inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12)	inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80)
--taste-skeuo-led-active	#10b981	#059669
--taste-skeuo-led-glow	0 0 10px rgba(16, 185, 129, 0.75)	0 0 8px rgba(5, 150, 105, 0.45)
--taste-skeuo-radius-panel	12px	12px
--taste-skeuo-font-mono	IBM Plex Mono, ui-monospace, monospace	IBM Plex Mono, ui-monospace, monospace
--taste-skeuo-motion-duration	160ms	160ms

Os tokens representam uma direção e não são garantidos como copiar-e-colar para cada paleta/plataforma. Defina --taste-skeuo-* no nível do projeto, garanta contraste de cor e adapte via tokens do tema em vez de espalhar valores literais.

Composição hero (primeira viewport completa)

Quando um portfólio/landing page/homepage público tem um hero: use uma composição cabeçalho+hero de uma tela visível. Altura base em min-height: 100svh com fallback 100vh, subtraindo o real cabeçalho apenas quando ele está no fluxo normal; deixe o hero expandir para acessibilidade e telas móveis curtas. Não aplique isso a dashboards privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica de estilo: Trate a primeira viewport como um console de controle mestre autêntico ou placa frontal de instrumento de assinatura; forneça controles funcionais e um CTA principal inequívoco. Não polua a tela com parafusos não funcionais, cabos decorativos ou medidores analógicos desconectados. Veja as referências references/hero-layout.md do roteador quando presente. O uso autônomo segue os mesmos princípios de anti-slop e responsivos.

Portão de qualidade específico de estilo

• Faça: Verifique destaque especular consistente de cima para baixo em todos os controles; garanta que os estados de pressão mecânica deprimam suavemente; forneça leituras numéricas junto com mostradores/controles deslizantes; teste foco do teclado; verifique a troca de modo escuro/claro para que chassi, destaques de bisel, poços e tipografia de rótulo se adaptem em pares acoplados.
• Não faça: Não trate um tema escuro simples como skeuomórfico; não adicione parafusos decorativos não funcionais ou agulhas analógicas falsas que não se conectam a dados reais; evite texto ilegível de baixo contraste em painéis escuros ou rótulos brancos em painéis claros de prata.
• Confirme consistência desktop e móvel; foco de teclado visível (:focus-visible); estados de carregamento, vazio, desabilitado, erro e sucesso; comportamento de movimento reduzido (prefers-reduced-motion).
• Não injete suposições específicas de estilo em projetos não relacionados. Ao combinar estilos, nomeie explicitamente o estilo primário e os recursos emprestados.

Portão universal anti-slop (autocontido)

Cada elemento deve merecer seu lugar. Conteúdo antes da decoração. Não decore incerteza. Não invente saldos, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/ao vivo/online, atividade falsa ou confirmações de sucesso; use estados vazios/de carregamento/de erro honestos. Dados de demonstração são aceitáveis apenas se solicitados e visivelmente rotulados.

Não adicione camadas decorativas cartão-dentro-do-cartão: uma superfície aninhada deve representar um limite de interação ou informação distinto. Evite grades de 3 recursos geradas automaticamente, dashboards de 4 estatísticas, afirmações falsas no hero, gráficos sem propósito, spam de emblemas/chips/ícones, arte decorativa não relacionada e loops aleatórios apenas para preencher a viewport. Prefira agrupar com tipografia, espaçamento, alinhamento e divisores. Pares iguais precisam de equilíbrio visual intencional.

Redação anti-slop: nenhum "Desbloqueie seu potencial", "Experimente o futuro", "Acelere seu fluxo de trabalho", afirmações de "perfeito" ou equivalentes traduzidos genéricos. Cabeçalhos devem comunicar conteúdo real, CTAs devem nomear a ação e texto vazio/erro/sucesso deve descrever estados reais e próximos passos. Evite urgência falsa, contagens inventadas, hype vago de IA, emoji gratuito e paredes inacessíveis de letras maiúsculas. Adapte o texto a este estilo e ao idioma do usuário sem alterar a verdade.

Integridade de contraste de tema e modo: Quando um usuário solicitar modo escuro ou modo claro (ou construir um alternador de tema), as cores de fundo e primeiro plano DEVEM inverter em pares sincronizados em todas as superfícies, texto, bordas, entradas e emblemas semânticos. Nunca deixe texto preto em fundo escuro, texto branco em fundo branco ou pílulas de status ilegíveis de baixo contraste. Todos os estados devem atender ao contraste WCAG AA (mínimo 4.5:1 para texto normal/corpo, 3:1 para títulos grandes e limites interativos).

Responsivo e movimento: componha móvel deliberadamente, verifique rótulos longos, foco...