Verified:GitHub

layout

Improve web UI layouts by resolving spacing inconsistencies and visual hierarchy.

Updated Apr 24, 2026

Search Tags:#responsive design #visual hierarchy #ui layout #spacing system #grid rhythm #flexbox vs grid #design composition

Ready to run

npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill layout-otto-poblysh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: layout
Source: https://github.com/otto-poblysh/pedagemy-early-access/tree/main/.agents/skills/layout
Command: npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill layout-otto-poblysh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill fixes interfaces that feel monotonous, crowded, or structurally weak by improving spacing, visual rhythm, and hierarchy so the content reads clearly.

Core Features & Use Cases

Spacing system cleanup: Replace arbitrary padding/margin with a consistent scale and sibling gap-based rhythm.
Hierarchy and grouping upgrades: Use whitespace and grouping to make primary/secondary content obvious via the squint test.
Structure and composition improvements: Choose Flex vs Grid appropriately, break repetitive card-grid patterns, and strengthen layout depth/elevation.

Quick Start

Ask the Skill to improve the page layout by identifying spacing inconsistencies, proposing a spacing/structure system, and applying rhythmic hierarchy to the current UI.

Frequently Asked Questions about layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix inconsistent spacing and weak visual hierarchy in my web UI layout?▼

Fix inconsistent UI layout spacing by replacing arbitrary padding and margins with a systematic spacing scale, then use sibling gap-based rhythm and proximity to establish clear visual hierarchy.

When should I use CSS Grid versus Flexbox for responsive design composition?▼

Choose CSS Grid for two-dimensional responsive design composition requiring structured alignment, and select Flexbox for one-dimensional content distribution to strengthen overall layout intent.

What is the best way to break up monotonous card grid structure and improve layout rhythm?▼

Break monotonous card grid structure by applying a consistent spacing system, using whitespace for grouping, and verifying the improved visual hierarchy with a squint test.

How does the squint test help verify visual hierarchy and spacing system consistency?▼

The squint test verifies visual hierarchy by blurring interface details, allowing you to confirm whether primary and secondary content stands out clearly through whitespace and proximity.

Can I apply a systematic spacing scale to crowded pages without rebuilding the entire UI layout?▼

Yes, you can resolve crowded pages by auditing existing spacing inconsistencies, defining a consistent spacing scale, and applying gap-based rhythm to align and group elements without a full rebuild.