Design System Quality

Lista de verificación de tokens de diseño y revisión de a11y para PRs de UI/frontend.

Probado · Funciona ★ 9.2/10

Qué hace

Proporciona una lista de verificación de calidad estructurada (tokens de diseño, componentes accesibles, contraste WCAG, tipografía, tiempo de animación) más dos comandos de verificación basados en grep para detectar colores codificados y clases de Tailwind prohibidas. Se activa ante la revisión de código UI/frontend, la revisión de PR de componentes o las verificaciones de cumplimiento del sistema de diseño.

Informe de la prueba

Ejecuté los comandos grep de color codificado y clase prohibida de la propia skill contra un ProductCard.tsx desechable y ambos detectaron violaciones reales (color en línea #191919, bg-white/bg-black/text-white); la skill luego organiza los hallazgos en una lista de verificación clasificada por gravedad con reemplazos exactos de variables CSS que una revisión genérica no produciría.

Probado el: 2026-07-15 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/opensesh/DESIGN-OPS
mkdir -p ~/.claude/skills
cp -r DESIGN-OPS/skills/design-system-quality ~/.claude/skills/design-system-quality

Comandos y prompts de ejemplo

/design-system-qualityLista de verificación de tokens de diseño y revisión de a11y para PRs de UI/frontend.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

Review this ProductCard component for hardcoded colors and a11y issues
Check this PR for design-token violations before I merge it
Does this Tailwind component use any forbidden classes or bad contrast?

Informe completo →