layout

Assess UI layouts and propose spacing plans for consistent visual hierarchy.

7|1|Updated Apr 13, 2026

Search Tags:#layout #responsive design #design-system #spacing #visual hierarchy #grid #ux critique

Ready to run

npx skills add https://github.com/derekr/athr --skill layout-derekr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: layout
Source: https://github.com/derekr/athr/tree/main/.claude/skills/layout
Command: npx skills add https://github.com/derekr/athr --skill layout-derekr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve layout, spacing, and visual rhythm to fix monotonous grids, inconsistent spacing, and weak visual hierarchy.

Core Features & Use Cases

Assess current layout for spacing consistency, grid structure, and hierarchy.
Propose a spacing system, rhythm patterns, and layout approaches (Flex vs Grid) to create intentional compositions.
Apply to dashboards, forms, and content-heavy pages to improve readability and navigation.

Quick Start

Assess the current layout and propose an intentional spacing plan.

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 UI layout?▼

Fix inconsistent UI layout by assessing current grid structure and applying an intentional spacing system with consistent rhythm patterns. This reduces clutter and strengthens visual hierarchy across dashboards, forms, and content-heavy screens to improve overall readability.

What's the best way to create a consistent spacing scale for responsive design?▼

Create a consistent spacing scale for responsive design by defining rhythm patterns and alignment rules across breakpoints. The approach evaluates current spacing inconsistencies and proposes a structured scale that enhances readability and navigation flow on any screen size.

How do I reduce clutter in content-heavy dashboard layouts?▼

Reduce clutter in content-heavy dashboard layouts by adjusting visual rhythm and applying a consistent spacing system. Assessing the current grid structure allows you to identify monotonous patterns and replace them with intentional compositions that improve navigation.

When should I use Flex vs Grid for UI layout compositions?▼

Choose between Flex vs Grid for UI layout compositions based on the specific content structure and alignment needs. The layout assessment proposes the appropriate approach to create intentional compositions while satisfying consistent spacing scale and alignment rules across breakpoints.

How does visual rhythm affect readability in form layouts?▼

Visual rhythm affects form layout readability by establishing consistent spacing patterns that guide the user's eye through inputs. Applying an intentional spacing system fixes monotonous grids and weak hierarchy, resulting in improved flow and reduced cognitive load.