kennedys0/taste-style-retro-terminal

Use esta skill somente após um usuário escolher explicitamente ou uma configuração de projeto confirmada a especificar. Para novas solicitações de UI não explicadas, use um seletor de estilo como em vez de decidir o gosto do usuário aqui. Marca existente, acessibilidade e substituições do usuário têm precedência sobre todos os exemplos abaixo. O guia de estilo a seguir não é permissão para iniciar codificação de UI antes da seleção de estilo.

Pacote de estilo: Retro Terminal

ID: retro-terminal
Assinatura: Linguagem visual autêntica de console de desenvolvedor CRT, brilho de fósforo, estrutura tabular monoespaçada e utilidade moderna orientada a teclado.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o somente após seleção explícita ou estilo de projeto confirmado aplicável. As 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. Uma página preta simples com texto verde sem estilo não se qualifica como Retro Terminal.

Boa adequação / compensações

• Funciona bem para: Portfólios de desenvolvedores, painéis de nuvem CLI, ferramentas de cybersecurity e devops, consoles de monitoramento de sistemas e experiências de codificação criativa.
• Cuidado com: Públicos consumidores não técnicos que podem achar layouts de dados monoespaçados rígidos ou metáforas de terminal desconhecidas.
• Direções de referência:
  • Âmbar CRT Clássico: Fundo preto obsidiana (#0C0D0E) com fósforo âmbar quente (#FFB000), linhas de varredura sutis e rótulos creme de alto contraste.
  • Verde Fósforo Matrix: Tela grafite escura (#0A0F0D) com verde fósforo elétrico (#33FF33), títulos de janela entre colchetes e fluxos de log nítidos.
  • Ciano Cyberdeck: Terminal de alta tecnologia com ciano luminoso (#00F0FF), bordas nítidas de desenho de caixas (┌─┐) e tags de atalho de teclado ([ESC]).

Portão de fidelidade retro terminal — obrigatório

Antes de considerar uma página retro-terminal completa, a janela de abertura deve ser visivelmente lida como um console de terminal ou painel de comando real e funcional. Se um usuário escolheu este estilo, um site escuro comum com fonte monoespaçada é uma FALHA, mesmo que as classes CSS contenham terminal.

Uma implementação retro-terminal bem-sucedida demonstra todos os seguintes itens:

1. Brilho de Fósforo e Luminância de Alto Contraste: Texto e indicadores ativos exibem radiação de fósforo sutil (text-shadow: 0 0 6px currentColor), com saída primária passando contraste WCAG AA contra fundos obsidiana.
2. Sobreposição Sutil de Linhas de Varredura CRT: As superfícies apresentam um padrão de linhas de varredura horizontais estático e controlado (repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px)) que adiciona profundidade genuína de exibição sem prejudicar a legibilidade dos caracteres.
3. Estrutura de Moldura ASCII / Entre Colchetes: Cabeçalhos de janela, molduras de painel e barras de status usam regras nítidas de 1px, caracteres de caixa ASCII (┌─┐) ou emblemas entre colchetes ([SYS_OK], [MODE: CLI]).
4. Prompt de Comando e Cursor Autênticos: As interfaces apresentam uma linha de prompt de shell ativa (visitor@terminal:~$) com um cursor de bloco sólido (█) e estilo distinto de histórico de comandos.
5. Alinhamento Tabular Monoespaçado: O conteúdo se alinha estritamente ao longo de colunas de caracteres monoespaçados para timestamps, códigos de status, IDs de processo e leituras de dados.

Teste de primeira janela: Em uma captura de tela de desktop, identifique o prompt do terminal, o brilho de fósforo, a linha de varredura e os quadros de console entre colchetes sem ler o título da página. Se parecer um blog escuro genérico, adicione a sobreposição de linhas de varredura e a estrutura do prompt do terminal.

Exceção explícita de linhas de varredura retro-terminal — brilho de fósforo é permitido

Substituição específica retro-terminal: A precaução universal anti-slop contra sobreposições decorativas ou texturas de tela NÃO DEVE ser interpretada como uma proibição de linhas de varredura sutis, brilho de fósforo ou linhas de prompt de shell aqui. Estas são propriedades de habilitação de material, essenciais para a estética do console CRT.

• Tratamentos de material permitidos: Bordas de desenho de caixa monoespaçadas, brilho de texto de fósforo (0 0 6px), sobreposições de linhas de varredura estáticas, pílulas de status entre colchetes e cursores de bloco piscando/sólido.
• Limite anti-slop: Toda linha de comando ou ação deve ser utilizável. Não inunde telas com caracteres de matrix caindo ilegíveis, erros de boot de terminal falsos ou trechos de código decorativos estáticos disfarçados de UI funcional.
• Interpretação anti-slop: Avalie elementos de terminal por clareza de comando, legibilidade e produtividade do desenvolvedor, não proibindo molduras monoespaçadas. Remover linhas de varredura e linhas de prompt para satisfazer uma heurística plana genérica é uma regressão de design.

Tipografia e digitação

Monoespaçada de alta legibilidade: JetBrains Mono, IBM Plex Mono, Fira Code ou monoespaçada do sistema (ui-monospace, monospace). Corpo primário: 14–15 px; títulos: 20–32 px com peso negrito (700) e estilo entre colchetes maiúsculo (### [SYSTEM_OVERVIEW]). Mantenha alinhamento estrito da grade de caracteres.

Direção de cor

• Modo Escuro (Fósforo CRT Obsidiana):
  • Base da Tela: Preto obsidiana (#0C0D0E ou #080A08).
  • Painéis de Superfície: Ardósia-carvão escuro (#14171A ou #111613).
  • Acento de Fósforo (Escolha Um):
    • Âmbar Clássico: #FFB000 (brilho: rgba(255, 176, 0, 0.45))
    • Verde Fósforo: #33FF33 (brilho: rgba(51, 255, 51, 0.45))
    • Ciano Cyber: #00F0FF (brilho: rgba(0, 240, 255, 0.45))
  • Bordas: 1px solid rgba(255, 176, 0, 0.25) ou #2A2F35.
  • Linhas de Varredura: Linhas raster escuras translúcidas (repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)).
• Modo Claro (Teletipo Pergaminho Vintage):
  • Base da Tela: Marfim de papel quente (#F4F1EA).
  • Painéis de Superfície: Aveia quente (#E8E4DA).
  • Inversão de Fósforo (Escolha Um):
    • Âmbar Queimado Escuro: #5C3A00
    • Verde Terminal Profundo: #0F4D19
    • Tinta Carbono: #111613
  • Bordas: 1px solid #D5D0C3.
  • Linhas de Varredura: Discretas ou desligadas (none ou textura de papel sutil).
• Status Semânticos: Vermelho Erro (#FF5555 escuro / #B91C1C claro), Amarelo Aviso (#FFCC00 escuro / #B45309 claro), Verde Sucesso (#50FA7B escuro / #047857 claro).
• Acoplamento de Tema e Regra Anticolisão: No modo claro, acentos de fósforo brilhante DEVEM inverter para tinta carbono/âmbar escuro de alto contraste (#111613 ou #5C3A00). Colocar âmbar brilhante #FFB000 ou verde neon #33FF33 em tela de papel claro é uma colisão de contraste imediata e estritamente proibida.

Layout e geometria

Os cantos são retos ou mínimos (0px–4px); bordas de painel de terminal sólidas de 1px; ritmo vertical apertado (grade de linhas monoespaçadas de 4px/8px). Os painéis modelam multiplexadores de terminal modulares (estilo tmux/screen).

Superfícies, profundidade, textura

• Tela do Terminal: Fundo preto profundo com sobreposição de linhas de varredura estáticas.
• Painel do Console: Borda sólida de 1px (1px solid rgba(255, 176, 0, 0.3) ou #2A2F35) com sombra interna sutil.
• Cursor Ativo: Cursor de bloco com pulso de 1s ou estado ativo sólido.

Anatomia do componente e interação

• Linha de Prompt de Comando: user@system:~$ command --flag com entrada funcional e resultados de retorno claros.
• Botão / Ação do Terminal: Botão de colchete ([ EXECUTE ] ou [ CANCEL ]) com inversão de cor ao passar o mouse (background: currentColor; color: #000;).
• Fluxo de Log de Dados: Linhas tabulares com timestamp, tag de nível de log e mensagem.
• Atalhos de Teclado: Indicadores de tecla entre colchetes ([⌘+K], [ENTER]) com fallbacks de clique de ponteiro claros.

Movimento

Alterações de estado imediatas por padrão (0–80 ms). Efeito de digitação de caractere opcional e ignorável apenas para introduções de herói. Respeite prefers-reduced-motion imediatamente.

Receita opcional Anime.js v4

• Decisão de movimento: Revelação de digitação de caractere monoespaçado ou varredura de barra de terminal; mantenha a taxa de quadros estável.
• Duração inicial: 100ms por bloco de token (0 = imediato); ajuste à tarefa e preferência do usuário.
• Evite: vibração de tela, ondas de distorção artificiais, loops de oscilação perpétuos.
• Dependência: CSS/nativo por padrão. Use Anime.js v4 somente se a interação solicitada justificar. Siga o references/motion-engine.md do Taste Engine quando disponível; skill independente segue os princípios de movimento reduzido e sem loop decorativo acima.

Escrita de UI e microcópia

Precisa, técnica e orientada a comandos. Exemplos: deploy --prod, status: healthy, 4 processes running. Evite conversa de marketing paternalista.

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

Token	Padrão modo escuro	Padrão modo claro
--taste-term-bg	#0c0d0e	#f4f1ea
--taste-term-surface	#14171a	#e8e4da
--taste-term-text	#ffb000	#5c3a00
--taste-term-amber	#ffb000	#5c3a00
--taste-term-glow	0 0 6px rgba(255, 176, 0, 0.45)	none
--taste-term-border	1px solid rgba(255, 176, 0, 0.25)	1px solid #d5d0c3
--taste-term-scanline	repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)	none
--taste-term-radius	2px	2px
--taste-term-font-mono	JetBrains Mono, IBM Plex Mono, monospace	JetBrains Mono, IBM Plex Mono, monospace
--taste-term-motion-duration	80ms	80ms

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

Composição do herói (primeira janela completa)

Quando um portfólio/landing page/página inicial voltado ao público tem um herói: use uma composição de cabeçalho + herói de uma tela visível. Altura base em min-height: 100svh com fallback 100vh, subtraindo o real cabeçalho somente quando ele está no fluxo normal; deixe o herói expandir para acessibilidade e telas móveis curtas. Não aplique isso a painéis privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica de estilo: Construa a primeira janela como uma sessão de console interativa autêntica com banner ASCII de boas-vindas, resumo de status do sistema e uma linha de prompt funcional. Não simule chuva de matrix falsa ou loops de glitch ilegíveis. Veja o roteador references/hero-layout.md quando presente. O uso independente segue os mesmos princípios responsivos e anti-slop.

Portão de qualidade específico de estilo

• Faça: Verifique alto contraste de texto contra a tela (WCAG AA); garanta que o alinhamento monoespaçado seja preservado; forneça fallbacks de clique para todos os atalhos de teclado; teste a legibilidade das linhas de varredura; verifique a alternância de modo escuro/claro para que as cores de fósforo invertam para tinta escura de alto contraste em fundos claros.
• Não faça: Não trate um tema escuro simples como retro-terminal; evite animações de glitch ilegíveis; não apresente prompts de console falsos não interativos que confundam os usuários; evite colisões de tema de modo claro, como texto verde neon ou âmbar claro em pergaminho.
• 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 incertezas. Não invente saldos, métricas, depoimentos, usuários, logotipos, aprovação, status verificado/online/ao vivo, atividade falsa ou confirmações de sucesso; use estados honestos de vazio/carregamento/erro. Dados de demonstração são aceitáveis somente se solicitados e visivelmente rotulados.

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

Redação anti-slop: nenhuma afirmação genérica "Desbloqueie seu potencial", "Experimente o futuro", "Acelere seu fluxo de trabalho", "integrado" ou equivalentes traduzidos. Os títulos devem comunicar o conteúdo real, os CTAs devem nomear a ação e o texto vazio/erro/sucesso deve descrever estados reais e próximos passos. Evite urgência falsa, contagens inventadas, hype de IA vago, emojis gratuitos e paredes de maiúsculas inacessíveis. 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 solicita modo escuro ou modo claro (ou constrói 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 corpo/texto normal, 3:1 para grandes títulos e limites interativos).

Responsivo e movimento: componha móvel deliberadamente, verifique rótulos longos, estados de foco e contraste acessível; sem corte de texto para caber em um layout moderno. Estático por padrão; use movimento para interações significativas, respeite preferências de movimento reduzido, evite decoração de salto/flutuação/pulso sem um estado real.

Bloco de conclusão de descobertas Críticas/Alta: status/dados fabricados, ações quebradas, controles inacessíveis/cortados, texto enganoso, colisões de contraste de tema ou falha móvel significativa devem ser corrigidos. Relate o que foi realmente verificado; não reivindique testes que não foram executados.

Não é um veto estético: cores expressivas, sombras, gradientes, layouts de cartão ou tratamentos decorativos são legítimos quando são partes intencionais da estética selecionada e passam nas verificações de usabilidade. Não force silenciosamente o minimalismo.

Anti-slop: específico de estilo

Ambiente CLI autêntico, não papel de parede de hacker.

• Rejeite: Cartões escuros genéricos disfarçados de terminal, prompts de console decorativos não funcionais, sobreposições de linhas de varredura ofuscantes, texto neon em fundos de papel claro e loops de chuva matrix ilegíveis.
• Em vez disso: Forneça hierarquia monoespaçada real, linhas de comando funcionais ou guias

… [truncado para tradução]