skills.rest
oliverjone01-dev
oliverjone01-devCOMMUNITY
Explore all skills by this author →
GitHub

arrange

Refine spacing, hierarchy, and visual rhythm in UI layouts.

1|Updated Apr 16, 2026
Search Tags:#layout#composition#ui-design#spacing#rhythm#visual-hierarchy#grid-systems
One-click install
npx skills add https://github.com/oliverjone01-dev/t1 --skill arrange-oliverjone01-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/oliverjone01-dev/t1/tree/main/.claude/skills/arrange
Command: npx skills add https://github.com/oliverjone01-dev/t1 --skill arrange-oliverjone01-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill fixes flat, crowded, or repetitive layouts that lack spacing, hierarchy, and rhythm. It helps interfaces feel intentional instead of default, cramped, or template-driven.

Core Features & Use Cases

  • Spacing Systems: Establishes consistent spacing scales so nearby elements group naturally and larger sections feel distinct.
  • Layout Structure: Chooses the right approach for one-dimensional and two-dimensional compositions using flex and grid patterns.
  • Visual Hierarchy: Strengthens emphasis with whitespace, asymmetry, and depth so important content stands out quickly.
  • Use Cases: Improve dashboards, product pages, settings screens, card-heavy interfaces, and other UI layouts that feel monotonous or poorly organized.

Quick Start

Use the arrange skill to review this screen and propose a cleaner spacing and layout structure for the target component.

Frequently Asked Questions about arrange

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

FAQPage Schema
How do I fix a flat and crowded UI layout that lacks visual hierarchy?▼

Fix flat and crowded UI layouts by refining spacing scales, strengthening visual hierarchy with asymmetry and depth, and applying deliberate proximity to group elements naturally so important content stands out quickly.

What is the best way to establish consistent spacing and rhythm in a dashboard layout?▼

Establish consistent spacing and rhythm in dashboard layouts by applying a consistent spacing scale, choosing appropriate flex or grid structures for composition, and using semantic depth and shadow tokens for clear section separation.

How do I choose between flex and grid patterns for a card-heavy interface?▼

Choose between flex and grid patterns for card-heavy interfaces by using flex for one-dimensional compositions and grid for two-dimensional compositions, ensuring the layout structure matches the content grouping requirements.

Does this layout composition approach require predefined spacing scale and shadow tokens?▼

Yes, this layout composition approach requires a consistent spacing scale, appropriate flex or grid structure, semantic depth and shadow tokens, and deliberate proximity choices to create intentional rhythm and clearer grouping.

When should I not use a grid system for visual hierarchy and composition?▼

Avoid using a grid system for visual hierarchy when one-dimensional flex patterns better suit the content flow, as forcing two-dimensional grids on simple component rows can create unnecessary structural rigidity and monotonous repetition.

Why does my product page layout feel template-driven and monotonous?▼

Your product page layout feels template-driven and monotonous because it lacks intentional spacing, hierarchy, and visual rhythm, defaulting to crowded arrangements instead of using whitespace, asymmetry, and depth for emphasis.

Related Skills

Explore More Design & Creative Skills→
julianromlijulianromli

layout

Diagnose UI spacing issues and prescribe layout strategies with Flex or Grid.

Community
Intermediate
jean-sotiljean-sotil

layout

Correct spacing rhythm, visual hierarchy, and structural organization in screen designs.

Community
Intermediate
byonk19-svgbyonk19-svg

colorize

Apply strategic color palettes to user interfaces for hierarchy and accessibility.

Community
Advanced
yahya-azeemyahya-azeem

arrange

Diagnose UI layout and spacing issues to produce systematic spacing scales.

Community
Intermediate