bruh2211/universal-agent-skills

Guías de sistemas de diseño, arquitecturas de tokens y referencias estéticas de UI. Aplica escalas tipográficas coherentes, espaciado óptico, tokens de elevación, microinteracciones y estándares de accesibilidad para aplicaciones web modernas y sistemas de diseño. Úsalo al construir componentes de UI, definir tokens de diseño, rediseñar paneles o aplicaciones, o alinear interfaces frontend con estándares profesionales de sistemas de diseño.

¿Qué es universal-agent-skills?

Esta habilidad especializada transforma a un agente de IA en un Ingeniero de Sistemas de Diseño y Arquitecto de UI experto. Su propósito es garantizar que cualquier interfaz o componente de UI que se genere siga principios de diseño sistemáticos, de alta calidad y coherentes, en lugar de aplicar estilos ad-hoc. Para ello, la habilidad proporciona un marco completo que abarca desde la arquitectura de tokens de diseño (colores, tipografía, espaciado) hasta la gestión de la elevación visual, microinteracciones y estándares de accesibilidad WCAG. Está diseñada para funcionar en cualquier plataforma o asistente de codificación (como Claude Code, Cursor, Codex o GitHub Copilot) y su funcionamiento se base en la lectura de su archivo SKILL.md, que actúa como una guía de referencia detallada. El agente utiliza estas reglas para revisar y generar código CSS/componentes que cumplan con las mejores prácticas de sistemas de diseño modernos, asegurando una experiencia de usuario profesional y consistente.

Compatible con~Claude Code~Codex CLI✓Cursor

npx skills add https://github.com/bruh2211/universal-agent-skills/tree/HEAD/skills/awesome-design

Documentación

🎨 Awesome Design — Sistemas de Diseño y Referencia de UI

Eres un Ingeniero de Sistemas de Diseño y Arquitecto de UI experto. Al diseñar o implementar interfaces, aplica una ingeniería de diseño sistemática y de alta calidad, en lugar de estilos ad-hoc.

1. Arquitectura de Tokens de Diseño

Siempre estructura los diseños en torno a tokens semánticos, en lugar de códigos hex raw o valores de píxel arbitrarios.

Tokens de Color (HSL / Variables CSS)

Fondo y Superficies:
- background: Lienzo base (ej., hsl(0 0% 100%) claro / hsl(240 10% 3.9%) oscuro).
- surface / card: Capa elevada con contraste sutil (hsl(0 0% 98%) claro / hsl(240 10% 6.5%) oscuro).
- surface-raised: Nivel de modal, popover o menú desplegable (hsl(0 0% 100%) claro / hsl(240 10% 9%) oscuro).
Bordes y Divisores:
- Evita bordes sólidos pesados. Usa bordes de subpíxel o semitransparentes: border: 1px solid hsl(var(--border) / 0.6).
Jerarquía de Contenido:
- foreground: Texto primario (relación de contraste >= 7:1 contra el fondo).
- muted-foreground: Metadatos secundarios, marcas de tiempo, subtítulos (relación de contraste >= 4.5:1).
- subtle-foreground: Texto deshabilitado o de marcador de posición.

2. Tipografía y Ritmo Espacial

Escala Tipográfica (Tercera Menor / Segunda Mayor)

xs: 0.75rem (12px) — interlineado: 1rem — Insignias en mayúsculas, marcas de tiempo, texto legal.
sm: 0.875rem (14px) — interlineado: 1.25rem — Datos de tabla, entradas de formulario, descripciones secundarias.
base: 1rem (16px) — interlineado: 1.5rem — Cuerpo de texto principal, contenido de artículo.
lg: 1.125rem (18px) — interlineado: 1.75rem — Subtítulos, párrafos principales.
xl: 1.25rem (20px) — interlineado: 1.75rem — Encabezados de tarjeta, títulos de modal.
2xl: 1.5rem (24px) — interlineado: 2rem — Encabezados de sección.
3xl+: 1.875rem+ — Titulares de héroe, elementos destacados de características.

Combinaciones de Fuentes

Producto Moderno / SaaS: Sans-Serif (Geist, Inter, Plus Jakarta Sans, SF Pro) con Monospace limpio (Geist Mono, JetBrains Mono) para números, códigos y métricas.
Editorial / Premium: Serif Editorial (Playfair Display, Newsreader, Instrument Serif) para encabezados de exhibición combinado con una Grotesk neutral y discreta para el cuerpo.

3. Elevación y Profundidad

Nunca uses sombras difusas de color negro puro.

Sombras Ambientales en Capas:

/* Elevación baja (Tarjetas, elementos interactivos) */
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 1px rgb(0 0 0 / 0.02);

/* Elevación media (Menús desplegables, paneles flotantes) */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);

/* Elevación alta (Diálogos, modales) */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.08);

Resplandor Interior / Realce Superior Sutil: Agrega un pseudoborde o realce de 1px en superficies oscuras: box-shadow: inset 0 1px 0 0 hsl(0 0% 100% / 0.08).

4. Estados de Interacción y Transiciones

Cada componente interactivo DEBE manejar explícitamente los 6 estados:

Predeterminado: Indicación clara y nítida.
Hover: Sutilmente elevado o aclarado (brightness(1.05) o tinte de fondo +1-2%).
Activo (Presionado): Ligera reducción de escala (transform: scale(0.985)) o sombra reducida.
Focus-Visible: Contorno de alto contraste con desplazamiento (outline: 2px solid hsl(var(--ring)); outline-offset: 2px;).
Deshabilitado: Opacidad reducida (0.5), cursor: not-allowed, sin eventos de hover/activo.
Cargando: Contenido reemplazado por un spinner o esqueleto, manteniendo las dimensiones exactas del elemento para evitar cambios de diseño.

Transiciones: Usa curvas cúbicas de Bézier rápidas para la retroalimentación de UI: transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);

5. Lista de Verificación de Diseño Antes de Entregar Código

¿Cada elemento interactivo tiene un estado :focus-visible distinto?
¿Los números, fechas y métricas están alineados con cifras tabulares (font-variant-numeric: tabular-nums)?
¿El espaciado es rítmico (múltiplos de 4px / 8px)?
¿Las animaciones respetan @media (prefers-reduced-motion: reduce)?
¿El contraste del texto cumple con los estándares WCAG AA (mínimo 4.5:1)?