Färdighet

Better Layout

Skapa layoutstruktur, avstånd och visuell hierarki

Installera

https://github.com/jakubkrehel/skills/tree/main/skills/better-layout

Aktiveras av

When structuring page layouts, reviewing component spacing, or validating alignment across responsive breakpoints.

Utvecklare: jakubkrehel

Kodarkivhttps://github.com/jakubkrehel/skills

Placering och avstånd skapar gränssnittets hierarki innan någon visuell stilsättning läggs till. Den här färdigheten bygger det strukturella ramverket och validerar det vid storleksändringar, lokalisering och höger-till-vänster-layout.

Höjdpunkter

Avståndsstrategi: grupperar innehåll hierarkiskt med konsekventa mellanrum, 8 px inom grupper och 16 px mellan dem
Konsekvent justering: bibehåller gemensamma kanter för att minska visuellt brus
Design av interaktiva element: säkerställer att kontroller tydligt skiljer sig från statiskt innehåll
Stegvis visning: verifierar att dolt innehåll har synliga markörer som gör det upptäckbart
Innehållsflöde: anpassar layouter efter naturliga läsmönster, uppifrån och ned samt från inledande till avslutande kant

Använd färdigheten när du strukturerar sidor, granskar komponentlayouter eller finjusterar avstånd över responsiva brytpunkter. Installeras som en Agent Skill för Claude Code.

Kommentarer(0)

Logga in för att kommentera

Inga kommentarer än – bli den första.

Liknande färdigheter

Better Typography

Färdighet

Webbtypografi för läsbar och tillgänglig text

Frontend- och designverktyg

Better Interface

Färdighet

Samla gränssnittsgranskningar i en prioriterad rapport

Frontend- och designverktygKodgranskningar

Site Architecture

Färdighet

Kartlägg webbplatsens hierarki, adresser och navigering

Frontend- och designverktygMarknadsförings- och SEO-verktyg