Baseline UI

Lista de verificación de Tailwind/React con opinión (MUST-NEVER) contra basura de UI generada por IA.

Por master5d · master5d/claude-design-skills

Probado · Funciona ★ 9.6/10

Baseline UI — Lista de verificación de Tailwind/React con opinión (MUST-NEVER) contra basura de UI generada por IA.

Qué hace

Una lista de reglas (no un script) que aplica convenciones de Tailwind CSS + motion/react: límites de duración de animación, propiedades de animación solo del compositor, primitivas accesibles, aria-labels en botones de icono, AlertDialog para acciones destructivas y patrones prohibidos como gradientes, h-screen y bloqueo de pegado. Se activa al construir o revisar componentes de UI React/Tailwind.

Informe de la prueba

Lo ejecuté contra un componente de tarjeta Tailwind deliberadamente desordenado: la habilidad detectó 8 violaciones citadas por reglas (gradiente púrpura, h-screen, falta de aria-label en un botón de icono, una transición de ancho/alto de 400 ms, pegado bloqueado, seguimiento-más-amplio injustificado, sin AlertDialog en una acción destructiva) cada una con una solución exacta, en comparación con una revisión genérica que solo marcó 4 de ellas vagamente.

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

Instalación

git clone https://github.com/master5d/claude-design-skills
mkdir -p ~/.claude/skills
cp -r claude-design-skills/skills/baseline-ui ~/.claude/skills/baseline-ui

Comandos y prompts de ejemplo

  • /baseline-uiLista de verificación de Tailwind/React con opinión (MUST-NEVER) contra basura de UI generada por IA.

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 React component against our Tailwind must-never rules
  • Check this UI for banned gradients, missing aria-labels, and h-screen
  • Does this destructive delete button need an AlertDialog confirmation?