apex-css-visual-consistency

在保持视觉一致性的同时，修正并优化 Apex 网站的 CSS 样式，包括在 App.css 中合理运用主题变量，以及实现组件间的响应式布局。当需要调整组件间的间距、字体排版、色彩对比、对齐方式，或对各组件的视觉效果进行细微优化时，可使用此技能。

name: apex-css-visual-consistency description: Corregir y mejorar estilos CSS del sitio Apex manteniendo consistencia visual, uso de variables de tema en App.css y comportamiento responsive. Usar cuando se pidan ajustes de espaciado, tipografia, contraste, alineacion o refinamiento visual entre componentes.

Apex CSS Visual Consistency

Objetivo

Aplicar mejoras visuales sin romper la identidad actual ni introducir deuda de estilos.

Ejecutar este flujo

•Revisar tokens globales en src/App.css antes de cambiar reglas locales.
•Priorizar variables CSS (--primary-color, --radius, --shadow, etc.) sobre valores hardcodeados.
•Editar CSS del componente y dejar en App.css solo reglas globales compartidas.
•Resolver responsive con media queries minimas y puntuales.
•Mantener estados interactivos visibles (hover, focus) en botones y links.

Reglas del proyecto

•Reutilizar titulo y parrafo para coherencia tipografica.
•Mantener contraste legible en todas las secciones.
•Preservar jerarquia visual entre titulos, contenido y detalles.
•No incorporar nuevos frameworks CSS.

Checklist de salida

•Confirmar ausencia de overflow horizontal.
•Confirmar consistencia de espaciado vertical entre secciones.
•Confirmar que colores nuevos provienen de variables del tema.