Better Layout

Posicionamento e espaçamento estabelecem a hierarquia da interface antes mesmo da aplicação de estilos visuais. Esta skill constrói essa estrutura e a valida em diferentes tamanhos, idiomas e condições RTL.

Destaques

• Estratégia de espaçamento: agrupa o conteúdo hierarquicamente com intervalos consistentes, usando 8px dentro dos grupos e 16px entre eles
• Disciplina de alinhamento: mantém bordas consistentes para reduzir o ruído visual
• Design de elementos interativos: garante que controles sejam visualmente distintos do conteúdo estático
• Divulgação progressiva: verifica se conteúdos ocultos possuem indicadores visíveis que permitam descobri-los
• Fluxo de conteúdo: alinha os layouts aos padrões naturais de leitura, de cima para baixo e do início para o fim

Use ao estruturar páginas, revisar layouts de componentes ou aprimorar o espaçamento entre breakpoints responsivos. É instalada como uma Agent Skill para Claude Code.