Todas mis librerías, en un solo sitio

Una animación al hacer scroll, una pareja de fuentes que funcione, una paleta que se lea bien, un hover de imagen. Durante años fui copiándolo todo de proyectos anteriores y, cada vez, perdía el tiempo en volver a encontrarlo y a adaptarlo, con los colores de otro cliente y detalles de los que ya no recordaba el porqué.

Así que reuní todo en un único sitio. EdG Librerías es un hub: cada librería vive en su propia carpeta, el hub se genera solo a partir de una lista y sumar una nueva es crear la carpeta y añadir una línea. Lo que antes era buscar entre proyectos viejos, ahora es escribir lo que necesito en el buscador.

Las 189 paletas salen de sistemas de diseño reales (Apple, Material 3, Tailwind, IBM Carbon, Atlassian, Shopify…), de sectores concretos (tintorería, abogados, clínica, banca, reparto…) y de tendencias de todo el mundo. Cada una tiene seis roles (fondo, superficie, texto, primario, acento y suave), su versión clara y oscura, la tabla de contraste WCAG y una vista previa en una web y en una app.

Se exportan a CSS, Tailwind, SwiftUI, Jetpack Compose, XML de Android y JSON de tokens. Y el asesor de color me pide si es una web, una app iOS, una app Android o varias cosas a la vez, el sector y cómo debe sentirse, y me devuelve las mejores con la razón y lo que conviene a cada plataforma.

Cada animación de la librería lleva una etiqueta: Web, Web · iOS · Android, iOS · Android, solo iOS o solo Android. Las de app muestran cómo se comporta el movimiento en iOS y en Android (o solo en el sistema al que pertenece) con el código de SwiftUI y de Jetpack Compose al lado.

El asesor de animaciones entiende «web», «app», «iOS» y «Android». Si le digo que estoy haciendo una app de banca para iOS y Android, me separa lo que puedo compartir entre los dos sistemas de lo que solo sirve en uno y me da el equivalente en el otro. Si le hablo de una web, no me propone nada que no exista allí.

Cada librería es una carpeta con su propia página, y el hub lee una lista (libraries.json) para pintar las tarjetas, los filtros por área y su estado: lista o en camino. Todo está escrito en HTML, CSS y JavaScript con módulos ES, y las animaciones usan GSAP y WebGL. Está pensada para móvil desde el principio, porque la reviso en el teléfono tanto como en el ordenador.

Al ser una herramienta de trabajo y no un producto, está protegida con contraseña: una puerta en el servidor y otra en el navegador, así que también funciona en local. Dentro, el conmutador salta entre librerías y el buscador global las recorre todas.