kennedys0/taste-style-retro-terminal

Use esta skill solo después de que un usuario elija explícitamente o una configuración de proyecto confirmada lo especifique. Para solicitudes de UI nuevas no explicadas, use un selector de estilo como [estilo] en lugar de decidir el gusto del usuario aquí. La marca existente, la accesibilidad y las anulaciones del usuario tienen prioridad sobre todos los ejemplos a continuación. La siguiente guía de estilo no es un permiso para comenzar a codificar la UI antes de la selección de estilo.

Pack de estilo: Terminal Retro

ID: retro-terminal
Firma: Lenguaje visual auténtico de consola de desarrollador CRT, resplandor de fósforo, estructura tabular monoespaciada y utilidad moderna basada en teclado.

Este es un pack de estilo, no un valor predeterminado obligatorio. Cárguelo solo después de una selección explícita o un estilo de proyecto confirmado y aplicable. Las instrucciones del proyecto pueden anular elecciones individuales. Preserve la accesibilidad, la utilidad y las restricciones de marca. Las fuentes son sugerencias, no dependencias obligatorias. Una página negra simple con texto verde sin estilo no califica como Terminal Retro.

Buen ajuste / compensaciones

• Funciona bien para: Portafolios de desarrolladores, paneles de control CLI en la nube, herramientas de ciberseguridad y devops, consolas de monitoreo de sistemas y experiencias de codificación creativa.
• Tenga cuidado con: Audiencias de consumidores no técnicas que pueden encontrar desconocidos los diseños de datos monoespaciados estrictos o las metáforas de terminal.
• Direcciones de referencia:
  • Ámbar CRT clásico: Fondo negro obsidiana (#0C0D0E) con fósforo ámbar cálido (#FFB000), sutiles líneas de escaneo ráster y etiquetas crema de alto contraste.
  • Verde fósforo Matrix: Lienzo de grafito profundo (#0A0F0D) con verde fósforo eléctrico (#33FF33), títulos de ventana entre corchetes y flujos de registro nítidos.
  • Cian Cyberdeck: Terminal de alta tecnología con cian luminoso (#00F0FF), bordes nítidos de dibujo de cuadros (┌─┐) y etiquetas de atajos de teclado ([ESC]).

Puerta de fidelidad de terminal retro — obligatorio

Antes de llamar completa a una página de terminal retro, la ventana gráfica de apertura debe leerse visiblemente como una consola de terminal o panel de comandos real y funcional. Si un usuario eligió este estilo, un sitio web oscuro común con fuente monoespaciada es un FRACASO, incluso si las clases CSS contienen terminal.

Una implementación exitosa de terminal retro demuestra todos los siguientes elementos:

1. Brillo de fósforo y luminancia de alto contraste: El texto y los indicadores activos exhiben una sutil radiación de fósforo (text-shadow: 0 0 6px currentColor), con la salida principal pasando el contraste WCAG AA contra fondos obsidiana.
2. Superposición sutil de líneas de escaneo CRT: Las superficies presentan un patrón de líneas de escaneo horizontal estático controlado (repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px)) que agrega profundidad de pantalla genuina sin afectar la legibilidad de los caracteres.
3. Estructura de diseño ASCII / entre corchetes: Los encabezados de ventana, marcos de panel y barras de estado usan reglas nítidas de 1px, caracteres de cuadro ASCII (┌─┐) o insignias entre corchetes ([SYS_OK], [MODE: CLI]).
4. Indicador y prompt de comando auténtico: Las interfaces presentan una línea de prompt de shell activa (visitor@terminal:~$) con un cursor de bloque sólido (█) y un estilo distinto de historial de comandos.
5. Alineación tabular monoespaciada: El contenido se alinea estrictamente a lo largo de columnas de caracteres monoespaciados para marcas de tiempo, códigos de estado, ID de proceso y lecturas de datos.

Prueba de primera ventana gráfica: En una captura de pantalla de escritorio, identifique el prompt de terminal, el brillo de fósforo, el ráster de líneas de escaneo y los marcos de consola entre corchetes sin leer el título de la página. Si parece un blog oscuro genérico, agregue la superposición de líneas de escaneo y la estructura de prompt de terminal.

Excepción explícita de líneas de escaneo de terminal retro — se permite el brillo de fósforo

Anulación específica de terminal retro: La precaución universal contra la mediocridad sobre superposiciones decorativas o texturas de pantalla NO DEBE interpretarse como una prohibición de líneas de escaneo sutiles, brillo de fósforo o líneas de prompt de shell aquí. Estas son propiedades habilitadoras del material, esenciales para la estética de la consola CRT.

• Tratamientos de material permitidos: Bordes de dibujo de cuadros monoespaciados, brillo de texto de fósforo (0 0 6px), superposiciones de ráster de líneas de escaneo estáticas, píldoras de estado entre corchetes y cursores de bloque parpadeantes/sólidos.
• Límite contra la mediocridad: Cada línea de comando o acción debe ser utilizable. No inunde las pantallas con caracteres de matriz descendente ilegibles, errores de arranque de terminal falsos o fragmentos de código decorativos estáticos que se hacen pasar por una UI funcional.
• Interpretación contra la mediocridad: Evalúe los elementos de terminal por claridad de comando, legibilidad y productividad del desarrollador, no prohibiendo marcos monoespaciados. Eliminar líneas de escaneo y líneas de prompt para satisfacer una heurística plana genérica es una regresión de diseño.

Tipografía y escritura

Monoespaciada de alta legibilidad: JetBrains Mono, IBM Plex Mono, Fira Code, o monoespaciada del sistema (ui-monospace, monospace). Cuerpo principal: 14–15 px; encabezados: 20–32 px con peso negrita (700) y estilo de corchetes en mayúsculas (### [SYSTEM_OVERVIEW]). Mantenga una alineación de cuadrícula de caracteres estricta.

Dirección de color

• Modo oscuro (Fósforo CRT obsidiana):
  • Base del lienzo: Negro obsidiana (#0C0D0E o #080A08).
  • Paneles de superficie: Carbón pizarra profundo (#14171A o #111613).
  • Acento de fósforo (Elija uno):
    • Ámbar clásico: #FFB000 (brillo: rgba(255, 176, 0, 0.45))
    • Verde fósforo: #33FF33 (brillo: rgba(51, 255, 51, 0.45))
    • Cian cyber: #00F0FF (brillo: rgba(0, 240, 255, 0.45))
  • Bordes: 1px solid rgba(255, 176, 0, 0.25) o #2A2F35.
  • Líneas de escaneo: Líneas ráster oscuras translúcidas (repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)).
• Modo claro (Teletipo de pergamino antiguo):
  • Base del lienzo: Marfil de papel cálido (#F4F1EA).
  • Paneles de superficie: Avena cálida (#E8E4DA).
  • Inversión de fósforo (Elija uno):
    • Ámbar quemado oscuro: #5C3A00
    • Verde terminal profundo: #0F4D19
    • Tinta carbón: #111613
  • Bordes: 1px solid #D5D0C3.
  • Líneas de escaneo: Atenuadas o desactivadas (none o textura de papel sutil).
• Estados semánticos: Rojo de error (#FF5555 oscuro / #B91C1C claro), Amarillo de advertencia (#FFCC00 oscuro / #B45309 claro), Verde menta de éxito (#50FA7B oscuro / #047857 claro).
• Acoplamiento de tema y regla anti-colisión: En modo claro, los acentos de fósforo brillante DEBEN invertirse a tinta carbón/ámbar oscuro de alto contraste (#111613 o #5C3A00). Poner ámbar brillante #FFB000 o verde neón #33FF33 sobre un lienzo de papel claro es una colisión de contraste inmediata y estrictamente prohibido.

Diseño y geometría

Las esquinas son afiladas o mínimas (0px–4px); bordes de panel de terminal sólidos de 1px; ritmo vertical ajustado (cuadrícula de línea monoespaciada de 4px/8px). Los paneles modelan multiplexores de terminal modulares (estilo tmux/screen).

Superficies, profundidad, textura

• Pantalla de terminal: Fondo negro profundo con superposición de ráster de líneas de escaneo estáticas.
• Panel de consola: Borde sólido de 1px (1px solid rgba(255, 176, 0, 0.3) o #2A2F35) con sombra interior sutil.
• Cursor activo: Cursor de bloque con pulso de 1s o estado activo sólido.

Anatomía e interacción de componentes

• Línea de prompt de comando: user@system:~$ command --flag con entrada funcional y resultados de retorno claros.
• Botón / Acción de terminal: Botón de corchete delineado ([ EXECUTAR ] o [ CANCELAR ]) con inversión de color al pasar el ratón (background: currentColor; color: #000;).
• Flujo de registro de datos: Filas tabulares con marca de tiempo, etiqueta de nivel de registro y mensaje.
• Atajos de teclado: Indicadores de tecla entre corchetes ([⌘+K], [ENTER]) con alternativas de clic de puntero claras.

Animación

Cambios de estado inmediatos de forma predeterminada (0–80 ms). Efecto de escritura de caracteres opcional y omitible solo para introducciones de héroe. Respete prefers-reduced-motion inmediatamente.

Receta opcional de Anime.js v4

• Decisión de animación: Revelación de escritura de caracteres monoespaciados o barrido de escaneo de terminal; mantenga una velocidad de fotogramas estable.
• Duración inicial: 100 ms por bloque de token (0 = inmediato); ajuste a la tarea y preferencia del usuario.
• Evitar: Vibración de pantalla, ondas de distorsión artificiales, bucles de parpadeo perpetuo.
• Dependencia: CSS/nativo de forma predeterminada. Use Anime.js v4 solo si la interacción solicitada lo justifica. Siga references/motion-engine.md de Taste Engine cuando esté disponible; la skill independiente sigue los principios de movimiento reducido y sin bucle decorativo anteriores.

Escritura de UI y microcopy

Preciso, técnico e impulsado por comandos. Ejemplos: deploy --prod, status: healthy, 4 processes running. Evite el marketing paternalista.

Tokens iniciales (sugerencias, no un tema completo)

Token	Valor predeterminado modo oscuro	Valor predeterminado 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

Los tokens representan una dirección y no están garantizados como copia y pega para cada paleta/plataforma. Defina --taste-term-* a nivel de proyecto, asegure el contraste de color y adapte a través de tokens de tema en lugar de dispersar valores literales.

Composición de héroe (primera ventana gráfica completa)

Cuando un portafolio/landing/página de inicio orientado al público tiene un héroe: use una composición de encabezado+héroe de una pantalla visible. Base la altura en min-height: 100svh con respaldo 100vh, restando el encabezado real solo cuando está en flujo normal; deje que el héroe se expanda para la accesibilidad y las pantallas móviles cortas. No aplique esto a paneles privados u otras pantallas de tareas; las anulaciones directas del usuario ganan. Dirección específica del estilo: Construya la primera ventana gráfica como una sesión de consola interactiva auténtica con un banner de bienvenida ASCII, un resumen de estado del sistema y una línea de prompt funcional. No simule lluvia de matriz falsa o bucles de fallo ilegibles. Consulte el enrutador references/hero-layout.md cuando esté presente. El uso independiente sigue los mismos principios de capacidad de respuesta y contra la mediocridad.

Puerta de calidad específica del estilo

• Haga: Verifique el alto contraste del texto contra el lienzo (WCAG AA); asegúrese de que se preserve la alineación monoespaciada; proporcione alternativas de clic para todos los atajos de teclado; pruebe la legibilidad de las líneas de escaneo; verifique el cambio de modo oscuro/claro para que los colores de fósforo se inviertan a tinta oscura de alto contraste sobre fondos claros.
• No haga: No trate un tema oscuro simple como terminal retro; evite animaciones de fallo ilegibles; no presente indicaciones de consola falsas no interactivas que confundan a los usuarios; evite colisiones de tema en modo claro como texto verde neón o ámbar claro sobre pergamino.
• Confirme la consistencia en escritorio y móvil; enfoque de teclado visible (:focus-visible); estados de carga, vacío, deshabilitado, error y éxito; comportamiento de movimiento reducido (prefers-reduced-motion).
• No inyecte suposiciones específicas de estilo en proyectos no relacionados. Al combinar estilos, nombre explícitamente el estilo principal y las características prestadas.

Puerta universal contra la mediocridad (autocontenida)

Cada elemento debe ganarse su lugar. Contenido antes que decoración. No decore la incertidumbre. No invente saldos, métricas, testimonios, usuarios, logotipos, aprobación, estado verificado/en vivo/en línea, actividad falsa o confirmaciones de éxito; use estados honestos de vacío/carga/error en su lugar. Los datos de demostración son aceptables solo si se solicitan y etiquetan visiblemente.

No agregue capas decorativas de tarjeta dentro de tarjeta: una superficie anidada debe representar un límite de interacción o información distinto. Evite cuadrículas de 3 características generadas automáticamente, paneles de 4 estadísticas, afirmaciones de héroe falsas, gráficos sin propósito, spam de insignias/chips/iconos, arte decorativo no relacionado y bucles aleatorios solo para llenar la ventana gráfica. Prefiera agrupar con tipografía, espaciado, alineación y divisores. Los pares iguales necesitan un equilibrio visual intencional.

Redacción contra la mediocridad: sin afirmaciones genéricas como "Desbloquee su potencial", "Experimente el futuro", "Acelere su flujo de trabajo", "sin problemas" o equivalentes traducidos. Los encabezados deben comunicar el contenido real, las CTA deben nombrar la acción y el texto de vacío/error/éxito debe describir estados reales y próximos pasos. Evite la urgencia falsa, los recuentos inventados, la exageración de IA vaga, los emojis gratuitos y los muros de mayúsculas inaccesibles. Adapte la redacción a este estilo y al idioma del usuario sin cambiar la verdad.

Integridad de contraste de tema y modo: Cuando un usuario solicita modo oscuro o modo claro (o construye un selector de tema), los colores de fondo y primer plano DEBEN invertirse en pares sincronizados en todas las superficies, texto, bordes, entradas e insignias semánticas. Nunca deje texto negro sobre fondo oscuro, texto blanco sobre fondo blanco o píldoras de estado ilegibles de bajo contraste. Todos los estados deben cumplir con el contraste WCAG AA (mínimo 4.5:1 para texto normal/cuerpo, 3:1 para titulares grandes y límites interactivos).

Capacidad de respuesta y animación: componga para móvil deliberadamente, verifique etiquetas largas, estados de enfoque y contraste accesible; sin recorte de texto para adaptarse a un diseño moderno. Estático de forma predeterminada; use la animación para interacciones significativas, respete las preferencias de movimiento reducido, evite la decoración de rebote/flotante/pulso sin un estado real.

Finalización del bloque de hallazgos críticos/altos: los datos/estado fabricados, las acciones rotas, los controles inaccesibles/recortados, el texto engañoso, las colisiones de contraste de tema o las fallas significativas en móvil deben solucionarse. Informe lo que realmente se verificó; no afirme pruebas que no se ejecutaron.

No es un veto estético: los colores expresivos, las sombras, los degradados, los diseños de tarjetas o los tratamientos decorativos son legítimos cuando son partes intencionales de la estética seleccionada y pasan las comprobaciones de usabilidad. No fuerce silenciosamente el minimalismo.

Contra la mediocridad: específico del estilo

Entorno CLI auténtico, no fondo de pantalla de hacker.

• Rechazar: Tarjetas oscuras genéricas disfrazadas de terminal, indicaciones de consola decorativas no funcionales, superposiciones de líneas de escaneo cegadoras, texto neón sobre fondos de papel claro y bucles de lluvia de matriz ilegibles.
• En su lugar: Proporcione jerarquía monoespaciada real, líneas de comando funcionales o datos tabulares alineados, estado de sistema dinámico, encabezados entre corchetes y un prompt de shell funcional con cursor parpadeante.

...

[truncado para traducción]