Skills

make-interfaces-feel-better: contrastar una lista de detalles antes de cambiar el tacto

Para quien quiere que un agente pula el tacto de la interfaz; instala con el npx oficial, haz primero un contraste de solo lectura y cambia código solo tras confirmar problemas de motion, hover y áreas de toque.

Official source · make-interfaces-feel-better

Install

npx skills add jakubkrehel/make-interfaces-feel-better

Para quién

Esta guía va a quien ya tiene una interfaz usable pero siente que «le falta tacto» y quiere que un agente contraste una skill centrada en pequeños detalles. Oficialmente se escribe como atención a los detalles que hacen la interfaz más agradable. Repositorio:

https://github.com/jakubkrehel/make-interfaces-feel-better

Cuerpo de la skill:

https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md

El material dice cubrir animación, tipografía, iconos, estados hover, alineación óptica, radios concéntricos, sombras, áreas de toque y puntos afines. Encaja cuando ya hay una interfaz previsualizable y solo se quieren pulir estos puntos. No encaja sin interfaz, si se quiere que el agente invente todo un sistema visual. El material actual no nombra un cliente obligatorio; no inferir que solo un producto puede instalarla.

El repositorio se publica con licencia MIT; notas en

https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file

Completar un primer intento en 3 minutos

Seguir solo la vía oficial recomendada.

Condición previa: esta máquina puede ejecutar npx y el espacio de trabajo tiene código de interfaz o una vista previa que se puede abrir. Antes de ejecutar, confirmar que el proyecto actual es donde debe escribirse la skill.

Ubicación de instalación: la gestiona npx skills add. El material no escribe una carpeta destino; no inventar una ruta que no apareció. La ubicación oficial del archivo de skill es el SKILL.md de arriba.

Copiar y ejecutar:

npx skills add jakubkrehel/make-interfaces-feel-better

Éxito: el comando termina con normalidad y el agente puede citar ítems como animación, estados hover o áreas de toque. Primero un contraste de solo lectura: señalar una página existente y pedir solo posibles problemas de tacto; prohibir cambios de archivo. Si señala problemas por las categorías de la skill (no un vago «se ve mal»), está cargada.

Cambiar estilos mueve el repositorio. No autorizar escritura hasta confirmar archivos y alcance.

Casos de uso

Caso 1: revisar primero estados hover y áreas de toque. Coincide con hover states y hit areas que cubre la skill. Encaja cuando botones o enlaces ya se pueden pulsar pero se sienten difíciles o sin feedback. Pedir primero solo una lista de problemas. Éxito: los comentarios caen en hover y rango clicable, no en rehacer la página. El material no da tamaño mínimo de área ni CSS concreto.

Caso 2: contrastar tipografía, alineación óptica y radios concéntricos. Coincide con typography, optical alignment, concentric border radius. Encaja cuando el layout ya está fijado y solo se quieren corregir tracking, alineación y si los radios son concéntricos. Mostrar una captura actual o un componente y pedir valoración solo de estos tres. Éxito: las sugerencias encajan en estas clases, no abren otro diseño. El material no da norma numérica; detenerse donde falten cifras.

Límites de uso

El material actual solo demuestra este comando de instalación npx y el conjunto de temas de arriba. No inventar otros nombres de skills, comandos o token de diseño. El «and more» del título no se desarrolla; no tratar temas no escritos como una lista ya existente.

El material no exige lenguaje ni framework. No inferir un solo stack a partir de ejemplos. Cambios de animación, sombras y radios pueden afectar lo visual existente; contrastar primero, luego cambiar. Para más, seguir el repositorio oficial:

https://github.com/jakubkrehel/make-interfaces-feel-better