maylogger/roc-aesthetic

Habilidad UIUX de Estética ROC「華國美學」

roc-aesthetic sigue siendo el identificador interno de la habilidad para enrutamiento e instalación.

Usa este archivo como el punto de entrada único para la generación, modificación, revisión y diagnóstico de estilo de frontend UIUX de la era ROC taiwanesa「華國美學」.

Esta habilidad es para agentes que necesitan crear interfaces que parezcan sistemas de información pública taiwaneses, sitios de portal antiguos, páginas de anuncios de bajo presupuesto, paneles de mantenimiento de proveedores parcheados y capas visuales cívicas improvisadas.

No es un filtro nostálgico, un generador de parodias ni una máquina de UI aleatoriamente rota. Es una disciplina de diseño:

• Preserva estructuras de información densas y operativas.
• Elige tablas, marcos, barras laterales y secciones con bordes antes que tarjetas limpias.
• Introduce pequeñas inconsistencias acumuladas sin dañar la usabilidad.
• Escribe texto chino tradicional burocrático sincero cuando se necesita copia UI.
• Rechaza el pulido moderno SaaS a menos que el usuario lo solicite explícitamente.

Enrutamiento de Intenciones

Clasifica primero la solicitud del usuario, luego abre y sigue el conjunto más pequeño de archivos de reglas útil. Resuelve archivos con Glob para que la habilidad funcione ya sea que esté instalada globalmente o utilizada desde este repositorio. No asumas una ruta absoluta.

Archivos de entrada principales:

• Cualquier generación, modificación o revisión de frontend UI -> Glob **/SYSTEM_PROMPT.md, luego Glob **/prompts/style.md
• Filosofía / por qué esto no debe convertirse en parodia -> Glob **/rules/philosophy.md
• Anti-modernismo / prompt negativo / eliminar pulido SaaS -> Glob **/rules/anti-modernism.md

Dimensiones visuales y de interacción:

• Diseño / estructura de página / panel / portal / navegación -> Glob **/rules/layout.md
• Espaciado / densidad / ritmo incómodo / huecos inconsistentes -> Glob **/rules/spacing.md
• Microimperfecciones / deriva de 1px / sensación de legado parcheado -> Glob **/rules/micro-imperfections.md
• Tipografía / pila de fuentes / texto irregular / encabezado WordArt -> Glob **/rules/typography.md
• Paleta de colores / azul ROC / amarillo de advertencia / deriva del mismo color -> Glob **/rules/colors.md
• Botones / brillantes / biselados / controles de sistema antiguo -> Glob **/rules/buttons.md
• Tablas / cuadrículas administrativas / filas densas -> Glob **/rules/tables.md
• Banners / tiras de anuncios / ticker / encabezado de campaña -> Glob **/rules/banners.md
• Imágenes / baja resolución / comprimidas / recortes incómodos -> Glob **/rules/imagery.md

Rédacción:

• Cualquier texto UI, localización, etiquetas, eslóganes, avisos, redacción de CTA o copia en chino tradicional -> Glob **/rules/copywriting.md

Reglas de Enrutamiento

1. No respondas solo desde este archivo cuando exista un archivo de reglas coincidente.
2. Abre SYSTEM_PROMPT.md y prompts/style.md antes de realizar trabajo sustancial de frontend UI.
3. Abre rules/copywriting.md cada vez que generes, traduzcas o reescribas texto UI visible.
4. Para tareas de UI combinadas, lee solo los archivos de reglas necesarios para la superficie solicitada. Ejemplo: una página de inicio de portal gubernamental con formularios debería usar diseño, espaciado, tipografía, colores, botones, tablas, banners y redacción.
5. Si el usuario solicita una revisión, diagnostica dónde la UI se volvió demasiado moderna, demasiado vacía, demasiado consistente o demasiado irónica antes de sugerir cambios.
6. Si el usuario pide hacer algo "más limpio", preserva la estética ROC a menos que pida explícitamente salir del estilo. Más limpio significa más legible y operativo, no más Vercel/Stripe/Linear.
7. Si el usuario proporciona una UI existente, modifícala in situ e intensifica el estilo a través de elecciones locales: agrupación más densa, más etiquetas administrativas, estructuras similares a tablas, desalineación sutil, tratamiento de color heredado y copia burocrática sincera.
8. No crees UI intencionalmente inutilizable.「糙但能用」gana sobre rotura aleatoria.
9. No conviertas la estética en parodia retro de internet, cosplay gubernamental taiwanés de meme, o copia de broma. El tono debe permanecer sincero.

Archivos de Trabajo

Busca en el directorio de trabajo:

• SYSTEM_PROMPT.md - prompt de sistema canónico y barra de calidad
• prompts/style.md - resumen de estilo compacto único
• rules/philosophy.md - filosofía de diseño y postura histórica
• rules/anti-modernism.md - prompt negativo para pulido moderno
• rules/layout.md - guía de diseño de múltiples columnas, enmarcado y con muchos anuncios
• rules/spacing.md - guía de espaciado denso, inconsistente y parcheado por proveedores
• rules/micro-imperfections.md - guía de imperfección controlada de 0.1px-1px
• rules/typography.md - guía de pilas de fuentes de sistema antiguo, texto irregular, encabezado WordArt
• rules/colors.md - guía de azul ROC, rojo saturado, amarillo, plata, dorado barato, deriva del mismo color
• rules/buttons.md - guía de tratamiento de botones brillantes, biselados, similares a Windows XP
• rules/tables.md - guía de tablas administrativas y tratamiento de cuadrículas
• rules/banners.md - guía de banners apilados, tiras de anuncios, superficies tipo ticker
• rules/imagery.md - guía de tratamiento de imágenes comprimidas, recortadas incómodamente, de bajo presupuesto
• rules/copywriting.md - guía de redacción de copia UI burocrática en chino tradicional
• README.md - resumen a nivel de repositorio
• .cursorrules y CLAUDE.md - notas de integración del espacio de trabajo

Si falta un archivo, continúa con el archivo de reglas disponible más cercano e indica qué guía no estuvo disponible cuando afecte materialmente el resultado.

Invariantes de Estilo

Cada UI de estética ROC debe preservar estos invariantes:

• Densidad sobre espacio en blanco.
• Tablas antes que tarjetas.
• Bordes administrativos, separadores grises, cajas anidadas y marcos de sección visibles.
• Diseños de múltiples columnas, barras laterales, navegación repetida y estructura con muchos anuncios.
• Azul ROC, rojo saturado, amarillo de advertencia, degradados plateados, gris oscuro, enlaces cian brillantes y ocasionalmente dorado barato.
• Pilas de fuentes de sistema antiguo mixtas: MingLiU, PMingLiU, DFKai-SB, Microsoft JhengHei, Arial, Tahoma.
• Ligera inconsistencia en padding, margen, grosor de borde, estado de hover, énfasis de fuente y alineación.
• Copia UI que se siente formal, repetitiva, sobre-explicativa y sinceramente orientada al servicio.
• Claridad operativa: los usuarios aún pueden leer, hacer clic, escanear, enviar y completar la tarea.

Valores Predeterminados Prohibidos

A menos que el usuario lo solicite explícitamente, no generes:

• Minimalismo al estilo Apple
• Estéticas de página de inicio de Stripe, Linear, Vercel, fintech o modernas SaaS
• Espacio en blanco excesivo, secciones hero aireadas y diseños de tres tarjetas de características
• Tipografía premium, dirección editorial de lujo o sistemas de diseño impecables
• Escalas de espaciado perfectamente uniformes de 4px/8px
• Paneles monocromáticos suaves que parecen recién financiados
• UX rota aleatoriamente, contraste ilegible o interacciones falsamente deshabilitadas
• Copia de parodia, referencias a memes o chistes retro sarcásticos

Ante la duda, elige「醜一點但真誠的官僚維運系統」sobre「漂亮但現代的新創介面」.

Superficie de Herramientas

Este SKILL.md principal declara solo las herramientas de solo lectura que utiliza:

• Read para abrir los archivos de prompt y reglas coincidentes
• Glob para resolver ubicaciones de archivos en instalaciones globales de la habilidad y copias del repositorio
• Grep para localizar reglas o términos específicos cuando el usuario pregunta sobre una dimensión de diseño concreta

Esta habilidad no necesita permisos de escritura por sí misma. El agente anfitrión de codificación aún puede editar archivos del proyecto cuando la tarea del usuario es de implementación, pero el enrutamiento y la selección de reglas de esta habilidad son de solo lectura.

Disciplina de Salida

Al aplicar esta habilidad:

1. Fundamenta las recomendaciones en los archivos de reglas, no en el gusto personal.
2. Prefiere cambios de UI concretos sobre adjetivos abstractos.
3. Usa chino tradicional para comentarios y explicaciones dirigidas al usuario cuando sea apropiado.
4. Si escribes código, mantén el framework y estilo de componente existente; inyecta la estética ROC a través del diseño, CSS, densidad de marcado, copia y pequeñas inconsistencias controladas.
5. Si usas una biblioteca de diseño, resiste su limpieza premium predeterminada. Sobrescribe espaciado, bordes, tipografía, colores y ritmo de componentes.
6. Mantén la accesibilidad y la usabilidad básica intactas incluso mientras haces la interfaz visualmente incómoda.

Precedencia y Conflictos

Cuando las guías entren en conflicto, usa este orden:

1. Este SKILL.md principal - enrutamiento, invariantes y disciplina global
2. SYSTEM_PROMPT.md - postura estética canónica y barra de calidad
3. prompts/style.md - resumen de generación compacto para trabajo de UI real
4. rules/copywriting.md - texto UI visible y copia en chino tradicional
5. rules/*.md - reglas visuales y de diseño específicas de dimensión
6. .cursorrules, CLAUDE.md y README del repositorio - recordatorios del espacio de trabajo y nivel de proyecto

Si una regla hiciera la UI inutilizable, preserva la usabilidad y aplica un tratamiento ROC más suave. Si un valor predeterminado de componente moderno entra en conflicto con esta habilidad, esta habilidad gana a menos que el usuario solicite explícitamente el estilo moderno.