Design system tokens

Skill LuchoC-Dev/agent-kits/skills/design-system-tokens

AI-first workspace bootstrapper — installs skills, packs, agents, and disciplines into .agents/. Cross-compatible with Claude Code and OpenCode.

Install

npx -y skills add LuchoC-Dev/agent-kits --skill design-system-tokens

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Define los design tokens del proyecto — colores, tipografía, spacing, radios, sombras, breakpoints, motion. Trigger cuando el usuario quiera "definir tokens", "design system", "paleta de colores", "tipografía", "tokens de diseño" o necesite establecer las bases visuales del proyecto antes de implementar componentes.

SKILL.md

2.5 KB, 677 tokens by cl100k_base, as published. Nobody here has run it

Design System Tokens

Rol

Sos un design systems architect. Tu trabajo es definir el lenguaje visual del proyecto como un conjunto de tokens reutilizables, no como decisiones puntuales por componente.

Precondición

El component-inventory aprobado. Útil tener referencias visuales del cliente (branding existente, mood board).

Tokens a definir

1. Colores

Primary — color de marca + escala 50-950
Neutral/Gray — escala completa para textos, bordes, backgrounds
Semantic — success, warning, error, info
Surface — background, card, overlay
Foreground — text-primary, text-secondary, text-muted
Dark mode — variantes de cada uno (si aplica)

2. Tipografía

Font families — sans, serif, mono (con fallbacks)
Type scale — xs, sm, base, lg, xl, 2xl, 3xl, 4xl (línea + tamaño)
Font weights — normal, medium, semibold, bold
Letter spacing — para títulos grandes

3. Spacing

Escala basada en 4px o 8px (0, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32...)
Mismo sistema para padding, margin, gap

4. Border radius

none, sm, md, lg, xl, full

5. Shadows

xs, sm, md, lg, xl + dentro (inset)

6. Breakpoints

mobile (default), sm (640), md (768), lg (1024), xl (1280), 2xl (1536)
Decidir si mobile-first o desktop-first

7. Motion

Duraciones: fast (150ms), base (250ms), slow (400ms)
Easings: ease-in, ease-out, ease-in-out, spring

Output

docs/design/NN-design-tokens.md (NN = prefijo numérico que asigna el workflow según el orden real de ejecución — tomalo de la tabla del workflow) + opcionalmente tokens.json o tailwind.config.ts con los valores.

# Design Tokens

## Colors

### Primary
- 50: #...
- 500: #... (base)
- 900: #...

### Semantic
- success: #22c55e
- error: #ef4444

## Typography
- Font: Inter, sans-serif
- Scale: ...

## Spacing
- Base: 4px

## Breakpoints
- Strategy: mobile-first
- sm: 640px, md: 768px, lg: 1024px

Regla

Si un color, tamaño o spacing aparece más de una vez, debe ser un token. No hardcodear valores en componentes.

Gives 0 of the 12 instructions most design systems skills give in 677 tokens

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

create a custom theme if neededin 54 of 528, across 10 files
read the corresponding theme filein 54 of 528, across 10 files
ask which theme to applyin 53 of 528, across 9 files
show the theme showcasein 53 of 528, across 9 files
maintain visual identity across all slidesin 50 of 528, across 6 files
apply the specified colors and fontsin 47 of 528, across 3 files
get explicit confirmationin 45 of 528, across 1 file
Generate a design system before codingin 19 of 528, across 6 files
Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
Check Python installation and install if missingin 17 of 528, across 4 files
Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

define primary color and full scale
define neutral scale for texts and backgrounds
define surface and foreground colors
define type scale line heights and weights
define shadow scale including inset
convert repeated values into reusable tokens

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.