design-system
Ordena los colores y espaciados de un proyecto en un sistema.
Qué hace
Arma la arquitectura de tokens de un proyecto en tres capas, define las escalas de espaciado y tipografía, y especifica cómo se comporta cada componente.
Es la diferencia entre tener veinte azules parecidos regados por el código y tener uno solo con nombre.
Para qué sirve
Tres cosas concretas que puedes hacer con ella.
Un solo lugar para el color
Cambias el azul de la marca en un archivo y cambia en todo el sitio.
Espaciados con lógica
Una escala definida en vez de márgenes puestos a ojo.
Componentes descritos
Deja escrito cómo se comporta cada uno, para que dos personas los hagan igual.
Cómo se instala
Necesitas Claude Code andando. Si todavía no lo tienes, en recursos está la guía para instalarlo desde cero.
-
1 Agrega el marketplace de claudekit
/plugin marketplace add mrgoonie/claudekit-skills
Se escribe dentro de Claude Code, no en la terminal.
-
2 Instala el paquete que la trae
/plugin install web-dev-tools@claudekit-skills
También puedes clonar el repositorio y copiar sólo la carpeta que te interese.
-
3 Reinicia Claude Code
Se activa sola cuando le pidas algo que le corresponda. No hay que invocarla por su nombre.
Cómo se usa
No hay que invocarla por su nombre. Se activa sola cuando le pides algo que le corresponde, por ejemplo:
convierte los colores de este proyecto en un sistema de tokens
De quién es
Esta skill la hizo claudekit, yo sólo la uso y la recomiendo. El código y la documentación completa están en su repositorio.
Ver el original ↗