Habilidad
Better Layout
Define estructura, espaciado y jerarquía visual
Instalación
https://github.com/jakubkrehel/skills/tree/main/skills/better-layout
Se activa con
When structuring page layouts, reviewing component spacing, or validating alignment across responsive breakpoints.
- Autor
- jakubkrehel
Repositoriohttps://github.com/jakubkrehel/skills
La posición y el espaciado establecen la jerarquía de una interfaz antes de aplicar cualquier estilo visual. Esta skill construye ese marco estructural y lo valida frente a cambios de tamaño, localización y condiciones RTL.
Aspectos destacados
- Estrategia de espaciado: agrupa el contenido jerárquicamente con separaciones coherentes —8 px dentro de los grupos y 16 px entre ellos—
- Disciplina de alineación: mantiene bordes uniformes para reducir el ruido visual
- Diseño de elementos interactivos: garantiza que los controles se distingan visualmente del contenido estático
- Revelación progresiva: comprueba que el contenido oculto tenga indicadores visibles que permitan descubrirlo
- Flujo del contenido: adapta los diseños a los patrones naturales de lectura —de arriba abajo y del inicio al final—
Úsala para estructurar páginas, revisar la disposición de componentes o perfeccionar el espaciado en distintos puntos de ruptura adaptables. Se instala como una Agent Skill para Claude Code.
Habilidades similares
Better Typography
HabilidadPrincipios de tipografía web legible y accesible
Frontends y diseños
Better Interface
HabilidadUnifica revisiones de UI en hallazgos priorizados
Frontends y diseñosRevisiones de código
Site Architecture
HabilidadOrganiza la jerarquía, las URL y la navegación de un sitio
Frontends y diseñosMarketings y SEO
Comentarios(0)
Inicia sesión para comentar