¿Qué hace esta skill?

La Pulido de Interfaces UI Skill aplica detalles concretos de diseño e ingeniería frontend para que tus interfaces se sientan pulidas y profesionales. Revisa radio de esquinas anidadas, alineación óptica, bordes, sombras, ajuste de texto, legibilidad numérica, movimiento y áreas táctiles, devolviendo una tabla concisa de cambios de antes y después.

Revisión de espaciado y radio
Corrige radios de esquinas anidadas para que el padding sea coherente ópticamente entre padres e hijos.
Tipografía y legibilidad numérica
Aplica text-wrap balance/pretty y tabular-nums para evitar saltos visuales en contadores y precios.
Estados de interacción
Define hover, active, focus, carga y vacío con transiciones explícitas y movimiento táctil adecuado.
Bordes, sombras e imágenes
Añade contornos sutiles a imágenes y sombras por capas transparentes que funcionan en cualquier fondo.

Ejemplos de uso

📐 Revisión completa
Revisa esta tarjeta de producto y dame recomendaciones de pulido de UI con los cambios de antes y después.
🔤 Contadores que saltan
El contador del carrito salta al cambiar los dígitos. ¿Cómo lo soluciono con tabular-nums?
🎯 Estados de botón
Añade estados de hover, active y focus a estos botones con transiciones explícitas y efecto de presión.
🖼️ Imágenes que se funden
Las imágenes de mi lista se difuminan con el fondo. Aplica un contorno sutil que funcione en modo claro y oscuro.

Características

Radio concéntrico Calcula el radio exterior como interior más padding para coherencia óptica en superficies anidadas.
Alineación óptica Corrige el centrado visual de iconos asimétricos con desplazamientos a nivel de píxel.
Transiciones explícitas Evita transition: all y especifica solo las propiedades cambiadas con duración y easing adecuados.
Áreas táctiles ampliadas Garantiza controles de al menos 44x44px usando pseudo-elementos para expandir el área clicable.
Tabla de antes y después Devuelve un resumen conciso con los cambios aplicados, omitiendo lo que no requirió modificación.

Preguntas frecuentes

No. Esta skill funciona con Claude Code o Cowork sin configuración adicional. Solo necesitas tener tu código frontend accesible.
No de forma automática. Devuelve una tabla de cambios de antes y después con las propiedades CSS concretas y rutas de archivo para que apliques los cambios.
Sí. Los principios de pulido (espaciado, tipografía, sombras, transiciones) son agnósticos al framework y aplican a CSS puro, Tailwind, styled-components, etc.
Sí. La skill incluye recomendaciones específicas para prefers-color-scheme, como contornos de imágenes con alfa neutro que se adaptan a ambos modos.

Skills relacionadas

Mas skills de la misma categoria:

Pulido de Interfaces UI — Detalles de diseño y frontend con Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.