arrange

Analyze UI layouts and apply spacing systems for consistent visual rhythm.

2|1|Updated Mar 8, 2026

Search Tags:#design #layout #frontend #spacing #rhythm #grid #visual-hierarchy

Ready to run

npx skills add https://github.com/duggal1/Sapphire-cli --skill arrange-duggal1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/duggal1/Sapphire-cli/tree/main/internal/skills/bundled/arrange
Command: npx skills add https://github.com/duggal1/Sapphire-cli --skill arrange-duggal1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill helps design teams and developers transform flat, monotonous layouts into intentional, rhythmic compositions by optimizing spacing, hierarchy, and visual flow.

Core Features & Use Cases

Analyze current layouts for spacing inconsistencies, density, and rhythm.
Propose a spacing system and hierarchy strategy to improve UI readability across breakpoints.
Apply plan-driven adjustments to dashboards, cards, and forms with measurable improvements.

Quick Start

Assess a given layout and generate a plan to improve spacing, rhythm, and visual hierarchy.

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 rhythm in frontend UI layouts?▼

To fix inconsistent layout spacing, you analyze current UI components for density issues, propose a structured spacing system, and apply rhythm guidelines to improve visual hierarchy and readability across multiple screen sizes.

What is the best way to create a spacing system for dashboards and forms?▼

The best way to create a spacing system is to assess the current layout density, establish a structured rhythm strategy for your grids and cards, and validate the composition using a squint test alongside responsive breakpoint checks.

Can I apply visual hierarchy adjustments to existing UI cards across multiple screen sizes?▼

Yes, you can apply plan-driven visual hierarchy adjustments to existing cards and grids by identifying spacing inconsistencies and validating the refined composition with responsive checks to ensure readability across breakpoints.

Why does my frontend layout look flat and monotonous despite having content?▼

Frontend layouts look flat when they lack intentional spacing and visual hierarchy. You resolve this by identifying rhythm inconsistencies and applying a deliberate spacing system to improve overall visual flow and composition.

Does this layout optimization approach work for responsive design breakpoints?▼

Yes, the layout optimization process explicitly includes responsive checks to validate that the proposed spacing system and rhythm guidelines maintain visual hierarchy and readability across different screen sizes.

When should I not use a structured spacing system for UI design?▼

You should avoid a structured spacing system when your UI requires highly custom, organic visual compositions that do not adhere to consistent grids, or when a layout intentionally breaks rhythm for specific artistic effects.