·web-interface-design
*

web-interface-design

ratacat/claude-skills

Úselo al diseñar o revisar la interfaz de usuario web, implementar formularios/botones/entradas, solucionar problemas de jerarquía visual, crear sistemas de color, crear diseños o cuando la interfaz se sienta desordenada, difícil de leer o los usuarios no sepan en qué hacer clic.

37Instalaciones·3Tendencia·@ratacat

Instalación

$npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design

SKILL.md

Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.

This skill orchestrates domain-specific reference files. Read only what you need for the task.

| Font sizes, line spacing, heading hierarchy, vertical rhythm | references/typography.md | | Input fields, validation, checkboxes, radios, selects, textareas | references/forms-and-inputs.md | | Button hierarchy, sizing, states, CTAs, ghost buttons | references/buttons.md |

Úselo al diseñar o revisar la interfaz de usuario web, implementar formularios/botones/entradas, solucionar problemas de jerarquía visual, crear sistemas de color, crear diseños o cuando la interfaz se sienta desordenada, difícil de leer o los usuarios no sepan en qué hacer clic. Fuente: ratacat/claude-skills.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design
Categoría
*Creatividad
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es web-interface-design?

Úselo al diseñar o revisar la interfaz de usuario web, implementar formularios/botones/entradas, solucionar problemas de jerarquía visual, crear sistemas de color, crear diseños o cuando la interfaz se sienta desordenada, difícil de leer o los usuarios no sepan en qué hacer clic. Fuente: ratacat/claude-skills.

¿Cómo instalo web-interface-design?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/ratacat/claude-skills