skills.rest
otto-poblysh
otto-poblyshCOMMUNITY
Explore all skills by this author →
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
One-click install
npx skills add https://github.com/otto-poblysh/pedagemy-early-access --skill layout-otto-poblysh
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
moasqmoasq
32

spacing-layout

Provide standardized spacing, margins, and 44pt tap targets for UI development.

Community
Basic
duggal1duggal1
2

arrange

Analyze UI layouts and apply spacing systems for consistent visual rhythm.

Community
Advanced
guideopsguideops

bold

Generate a bold design system with typography, color palette, and spacing scale.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic