The layout skill systematically diagnoses and fixes spacing and hierarchy problems that make interfaces feel "off" even when colors and typography are fine. It runs specific checks like the squint test for visual hierarchy, identifies monotonous card grids and arbitrary spacing values, then applies consistent spacing systems and appropriate layout tools (flexbox vs grid). What I appreciate is how it treats space as a design material rather than an afterthought, focusing on rhythm and intentional composition over generic arrangements. It's especially useful when you know something feels wrong with the visual flow but can't pinpoint exactly what.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
6
skills.sh installs
26.4K
GitHub stars
107K
last updated
Aug 21, 2026

Install

$ npx -y skills add pbakaus/impeccable --skill layout --agent claude-code

Installs into .claude/skills of the current project.

Files

The layout skill systematically diagnoses and fixes spacing and hierarchy problems that make interfaces feel "off" even when colors and typography are fine. It runs specific checks like the squint test for visual hierarchy, identifies monotonous card grids and arbitrary spacing values, then applies consistent spacing systems and appropriate layout tools (flexbox vs grid). What I appreciate is how it treats space as a design material rather than an afterthought, focusing on rhythm and intentional composition over generic arrangements. It's especially useful when you know something feels wrong with the visual flow but can't pinpoint exactly what.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/pbakaus/impeccable
Categories
Frontend Development, Design & UI/UX
First seen
Apr 16, 2026

More from pbakaus/impeccable

All 24
1flutter avatarflutter-add-widget-testflutter/skillsflutter add widget test21.8Kskills.sh installs
2millionco avatarreact-doctormillionco/react-doctorUse when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics.21.4Kskills.sh installs
3flutter avatarflutter-add-widget-previewflutter/skillsflutter add widget preview20.9Kskills.sh installs
4anthropics avatarfrontend-designanthropics/claude-plugins-officialGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making ch18.4Kskills.sh installs
5vuejs-ai avatarvue-pinia-best-practicesvuejs-ai/skillsPinia stores, state management patterns, store setup, and reactivity with stores.18Kskills.sh installs
6claude-office-skills avatarhtml-slidesclaude-office-skills/skills>17.1Kskills.sh installs