arrange

Reorganize UI layout spacing and rhythm to improve visual hierarchy.

Updated Mar 19, 2026

Search Tags:#layout #design-system #spacing #frontend-design #visual-hierarchy #arrange #grid-flex

Ready to run

npx skills add https://github.com/ai-sapira-poc/pharo-agents --skill arrange-ai-sapira-poc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/ai-sapira-poc/pharo-agents/tree/main/.claude/skills/arrange
Command: npx skills add https://github.com/ai-sapira-poc/pharo-agents --skill arrange-ai-sapira-poc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve layout, spacing, and visual rhythm to transform monotone grids into intentional compositions.

Core Features & Use Cases

Spacing system design: Establish a consistent scale to unify margins, padding, and gaps.
Hierarchy planning: Define visual weight and proximity to guide user focus.
Adaptive layouts: Recommend flex vs grid strategies for 1D and 2D structures.

Quick Start

Assess the current UI and output a redesigned layout plan with a spacing system 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 establish a consistent spacing system for my UI layouts?▼

To establish a consistent spacing system, define a unified scale for margins, padding, and gaps. This creates intentional visual rhythms and transforms monotone grids into structured compositions across your product pages, forms, and dashboards.

What is the best way to improve visual hierarchy in a dashboard layout?▼

Improving visual hierarchy in a dashboard layout involves planning visual weight and proximity to guide user focus. By reorganizing spacing and rhythm, you transform dull layouts into intentional compositions that direct attention effectively.

How do I choose between flex and grid strategies for adaptive layouts?▼

Choosing between flex and grid strategies depends on your layout structure. Use flex for 1D structures and grid for 2D structures to create adaptive layouts that maintain consistent spacing scales across different screen sizes and responsive guidance.

Can I use this approach for both 1D and 2D frontend design structures?▼

Yes, this approach covers both 1D and 2D frontend design structures. It recommends appropriate flex vs grid strategies while applying a consistent spacing system to ensure visual hierarchy and responsive guidance across your UI components.

Does this layout optimization approach work for product pages and forms?▼

Yes, this layout optimization approach is applicable to product pages and forms. It assesses your current UI and outputs a redesigned layout plan with a spacing system to improve visual hierarchy and rhythm across these target components.

Why does my current UI layout look dull and lack visual rhythm?▼

Your UI layout looks dull because it lacks an intentional spacing system and hierarchy plan. By reorganizing margins, padding, and gaps into a consistent scale, you can transform monotone grids into visually rhythmic compositions.