CASO 01 · DESIGN SYSTEMS
Skeletor: un design system que usan unas 15 aplicaciones
- Rol
- Principal responsable
- Años
- 2020 — 2026
- Versión actual
- 4.2
- Empresa
- Game Strategies
Aa sansation
El reto
En 2020 Game Strategies tenía productos en Angular, Vue y React, cada uno con su propia capa de estilos. Hacía falta una sola fuente de verdad visual que funcionara en cualquier framework y que un equipo pequeño pudiera mantener años.
Tres decisiones
Web components, no una librería por framework
Con Lit y Shadow DOM, el mismo componente funciona en el LMS en Angular, el campus en Vue y los micro-frontends sin reescribirlo.
Los tokens, fuente única de verdad
Colores, tipografía e iconos se generan con style-dictionary y se distribuyen por npm y CDN. Un cambio de marca se propaga a todas las apps.
Accesibilidad y CSS moderno como requisito
En 2026 reescribí GlTable en CSS grid con container queries, roles ARIA y ordenación por teclado, y creé GlTabs con RTL y alto contraste.
Resultado
~15
aplicaciones lo usan
27/35
componentes originales son míos; el resto, del equipo
87
releases en npm (sistema y tokens)
6
años de evolución continua
Así empezó, en 2014
La idea de Skeletor ya estaba en el framework SASS de este portfolio: módulos activables, mapas de breakpoints y un mixin por breakpoint.
// settings.scss · pixeltomas, 2014
$breakpoints: (
'small' : 20em,
'medium' : 48em,
'large' : 60em,
);
@mixin respond-to($breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}De un framework SASS a un design system
Skeletor no salió de la nada: es la tercera versión de la misma idea.
- Framework SASS de pixeltomas
Módulos activables, mapas de breakpoints y mixins para este portfolio.
- GameLearn SASS framework
La guía de estilos de la plataforma: componentes documentados con su HTML y sus variables SCSS.
- Skeletor
Web components en Lit con design tokens, que funcionan en cualquier framework.
Qué aprendí
Aprendí a querer mi trabajo.