Skill
Better Layout
Definisci struttura, spaziatura e gerarchia visiva
Installazione
https://github.com/jakubkrehel/skills/tree/main/skills/better-layout
Si attiva con
When structuring page layouts, reviewing component spacing, or validating alignment across responsive breakpoints.
- Autore
- jakubkrehel
Repositoryhttps://github.com/jakubkrehel/skills
Posizione e spaziatura definiscono la gerarchia dell’interfaccia prima ancora dello stile visivo. Questa skill costruisce tale struttura e la verifica durante il ridimensionamento, con contenuti localizzati e in condizioni RTL.
Punti di forza
- Strategia di spaziatura: raggruppa i contenuti gerarchicamente con distanze coerenti, 8 px all’interno dei gruppi e 16 px tra i gruppi
- Disciplina dell’allineamento: mantiene bordi coerenti per ridurre il rumore visivo
- Progettazione degli elementi interattivi: assicura che i controlli siano visivamente distinguibili dai contenuti statici
- Divulgazione progressiva: verifica che i contenuti nascosti abbiano indicatori visibili che ne segnalino la presenza
- Flusso dei contenuti: allinea i layout ai percorsi naturali di lettura, dall’alto verso il basso e dall’inizio verso la fine della riga
Usala per strutturare pagine, verificare il layout dei componenti o perfezionare la spaziatura tra breakpoint responsive. Si installa come Agent Skill per Claude Code.
Skill simili
Better Typography
SkillPrincipi tipografici per testi web leggibili e accessibili
Frontend e design
Better Interface
SkillRiunisci le revisioni UI in un elenco ordinato di problemi
Frontend e designRevisioni del codice
Site Architecture
SkillProgetta gerarchia, URL e navigazione del sito
Frontend e designStrumenti di marketing e SEO
Commenti(0)
Accedi per commentare