skills.rest
OmOc3
OmOc3COMMUNITY
Explore all skills by this author →
GitHub

layout

Diagnose interface spacing and hierarchy to produce a spacing scale, semantic tokens, and layout tool recommendations.

Updated Aug 27, 2026
Search Tags:#layout#ux#design-system#spacing#rhythm#grid#visual-hierarchy
One-click install
npx skills add https://github.com/OmOc3/physica --skill layout-omoc3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layout
Source: https://github.com/OmOc3/physica/tree/main/.codex/skills/layout
Command: npx skills add https://github.com/OmOc3/physica --skill layout-omoc3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The layout skill addresses interfaces that feel visually off due to inconsistent spacing, monotonous grids, weak hierarchy, or cramped composition by diagnosing spatial problems and prescribing a consistent spacing system and layout strategy to restore clarity and rhythm.

Core Features & Use Cases

  • Assessment checklist: A structured evaluation of spacing, hierarchy, grid/structure, rhythm, and density with actionable findings.
  • Practical prescriptions: Concrete recommendations including a spacing scale, token naming, choice of layout tool (Flex vs Grid), responsive container strategies, and elevation/z-index guidance.
  • Verification & examples: A verification checklist (squint test, rhythm, responsiveness, consistency) and real-world application such as converting a crowded dashboard or repetitive marketing grid into a balanced, readable composition.

Quick Start

Ask the skill to analyze the current page for inconsistent spacing and hierarchy, then return a spacing scale, component token suggestions, recommended layout tool choices, and a short verification checklist.

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 a crowded UI?▼

Improve layout and spacing by diagnosing spatial problems and prescribing a consistent spacing system with semantic tokens, restoring clarity and rhythm to crowded user interfaces.

What is the best way to structure a spacing scale for web and mobile dashboards?▼

The best way to structure a spacing scale for dashboards is to define a rhythmic spacing system with semantic token naming, applying intentional grouping to resolve cramped compositions across responsive containers.

How do I choose between Flex and Grid for responsive component layouts?▼

Choosing between Flex and Grid for responsive layouts depends on your component structure, requiring a layout tool recommendation strategy that defines container behavior and spatial rhythm across breakpoints.

Can I use a layout assessment checklist to evaluate design system density and rhythm?▼

Yes, you can use a structured assessment checklist to evaluate spacing, hierarchy, grid structure, rhythm, and density, yielding actionable findings to correct spatial inconsistencies in your design system.

Why does my marketing grid layout feel monotonous and how can I balance it?▼

A marketing grid feels monotonous due to repetitive grids and cramped composition, which you can balance by applying intentional spatial structuring, a defined spacing scale, and a visual hierarchy strategy.

Related Skills

Explore More Design & Creative Skills→
hossain-khanhossain-khan

arrange

Audit UI layouts and document spacing scales for responsive design.

Community
Advanced
kurokeitakurokeita
1

web-design-guidelines

Audit UI components and layouts against Web Interface Guidelines compliance.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

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

Official
Basic
avvaleavvale

aurora-layout

Standardize Aurora UI form layouts with a 12-column grid and semantic sections.

Official
Basic