skills.rest
satriadhm
satriadhmCOMMUNITY
Explore all skills by this author →
GitHub

arrange

Analyze UI layouts and generate a prioritized spacing and hierarchy plan.

Updated Aug 23, 2026
Search Tags:#layout#frontend#design-system#spacing#ui-optimization#visual-rhythm
One-click install
npx skills add https://github.com/satriadhm/padelism --skill arrange-satriadhm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/satriadhm/padelism/tree/main/.qwen/skills/arrange
Command: npx skills add https://github.com/satriadhm/padelism --skill arrange-satriadhm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.

Core Features & Use Cases

  • Assess and diagnose spacing, visual hierarchy, grid structure, and density to identify layout issues.
  • Propose a systematic plan for spacing, rhythm, and hierarchy using a consistent design system.
  • Apply structured layout improvements to dashboards, cards, lists, and forms.

Quick Start

Analyze the current layout and generate a prioritized plan for spacing, rhythm, and 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 hierarchy in web app dashboards?▼

Fix inconsistent dashboard spacing by applying a consistent spacing scale and structured grid improvements to establish clear visual hierarchy without destructive edits. This process diagnoses density issues and proposes a systematic plan for rhythmic compositions.

What causes monotonous or crowded UI layouts and how do I create visual rhythm?▼

Monotonous or crowded UI layouts lack a structured spacing scale and grid structure. Create visual rhythm by analyzing density and applying a systematic plan for spacing and hierarchy using a consistent design system.

How do I systematically improve form-heavy interfaces without breaking existing code?▼

Improve form-heavy interfaces through non-destructive edits that assess current grid structures and visual hierarchy. The process generates a prioritized plan to apply a consistent spacing scale, ensuring responsive behavior across the web app.

Can I use a design system spacing scale to fix structurally weak card and list layouts?▼

Yes, a design system spacing scale is applied to assess and fix structurally weak card and list layouts. It diagnoses spacing density issues and proposes structured layout improvements to create intentional visual rhythm.

What is the best way to assess layout density and grid structure for frontend UI optimization?▼

The best way to assess layout density is to diagnose existing spacing and grid structures to identify structural weaknesses. This generates a prioritized plan for spacing, rhythm, and hierarchy to achieve UI optimization.

Related Skills

Explore More Design & Creative Skills→
xoaixoai
25

ux-audit

Extract colors, typography, spacing, and component patterns from web page screenshots.

Community
Intermediate
Tresillo2017Tresillo2017
4

arrange

Analyze and adjust spacing, hierarchy, and grid structure in UI components.

Community
Advanced
aymenhamoudiiaymenhamoudii

arrange

Diagnose monotonous spacing and weak visual rhythm in UI compositions.

Community
Intermediate
stevengonsalvezstevengonsalvez

arrange

Assess 2D UI layouts for spacing inconsistencies and weak visual hierarchy.

Community
Intermediate