skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

arrange

Provides UI layout suggestions that improve spacing and rhythm for given designs.

Updated Apr 14, 2026
Search Tags:#layout#design-principles#spacing#rhythm#grid#visual-hierarchy#arrange
One-click install
npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill arrange-gerald-ica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/arrange
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill arrange-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improves visual organization by identifying and fixing spacing, rhythm, and hierarchy issues that make layouts feel inconsistent or crowded.

Core Features & Use Cases

  • Assess current layout for spacing, hierarchy, grid structure, and density.
  • Propose and apply improvements to achieve deliberate rhythm and improved readability.
  • Use case: a UI that feels cramped or monotonous can be transformed into a balanced, scannable design.

Quick Start

Describe the current layout issue to begin creating a rhythmic, well-spaced composition.

Frequently Asked Questions about arrange

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

FAQPage Schema
How do I fix inconsistent spacing and visual hierarchy in a UI layout?▼

Fix inconsistent visual hierarchy by assessing your current grid structure and applying a deliberate spacing system to improve rhythm, balance, and readability across the interface.

What's the best way to transform a monotonous grid into a balanced layout?▼

Transform a monotonous grid by evaluating its density and applying intentional layout tools to establish visual hierarchy, creating a rhythmic composition that enhances scannability.

Can I use this to improve spacing and rhythm on crowded marketing pages?▼

Yes, you can improve spacing and rhythm on crowded marketing pages by assessing the current layout density and proposing targeted adjustments to achieve a clear visual hierarchy.

How do I create a spacing system for a cramped dashboard?▼

Create a spacing system for a cramped dashboard by identifying spacing inconsistencies, establishing a structured rhythm, and applying flex and grid layout tools for deliberate organization.

Does this layout approach work for interfaces with high content density?▼

Yes, this layout approach works for high-density interfaces by assessing the visual organization and proposing improvements that establish deliberate rhythm to prevent a crowded feel.

Why does my UI design feel crowded even with a grid structure?▼

Your UI feels crowded because the grid lacks intentional rhythm and visual hierarchy, resulting in monotonous spacing that can be fixed by applying a deliberate spacing system.

Related Skills

Explore More Design & Creative Skills→
lachiehlachieh

arrange

Analyze UI layouts for spacing, hierarchy, and grid issues.

Community
Intermediate
Aqsagull99Aqsagull99

tailwind-skill

Style UIs with Tailwind CSS utility classes across responsive breakpoints.

Community
Intermediate
Gami19Gami19

ui-design

Apply Refactoring UI principles to create cohesive interfaces and design reviews.

Community
Intermediate
avvaleavvale

aurora-layout

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

Official
Basic