arrange

Analyze UI layouts and propose spacing, rhythm, and hierarchy improvements.

1|Updated Mar 25, 2026

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

Ready to run

npx skills add https://github.com/Elliot-TangS/EliteChain --skill arrange-elliot-tangs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/Elliot-TangS/EliteChain/tree/main/.windsurf/skills/arrange
Command: npx skills add https://github.com/Elliot-TangS/EliteChain --skill arrange-elliot-tangs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy to create intentional compositions.

Core Features & Use Cases

Assess and diagnose layout issues related to spacing, hierarchy, grid structure, and density.
Plan a systematic spacing and rhythm strategy, including a scalable spacing system and responsive rules.
Provide implementation-ready guidance for design-to-dev handoff to create intentional compositions and consistent UIs.

Quick Start

Analyze a given layout and propose spacing, rhythm, and hierarchy improvements to create intentional compositions.

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 weak visual hierarchy in my UI layout?▼

Fix inconsistent spacing and weak visual hierarchy by diagnosing grid structure and density issues. The Skill enforces a consistent spacing system and responsive rules to create intentional compositions.

What is a scalable spacing system and how does it improve visual rhythm?▼

A scalable spacing system is a predefined set of spacing values applied consistently across a UI. It improves visual rhythm by eliminating monotonous grids and enforcing intentional spacing rules for dashboards and card grids.

How do I plan responsive behavior for content-dense interfaces?▼

Plan responsive behavior for content-dense interfaces by establishing guidelines for grid usage and a systematic rhythm strategy. This ensures consistent spacing and visual hierarchy are maintained across different screen sizes.

Can I use this to improve layout and spacing for a card grid dashboard?▼

Yes, you can use this to analyze and improve card grid dashboards. It diagnoses layout issues related to density and hierarchy, providing implementation-ready guidance for design-to-dev handoff to create consistent UIs.

What's the best way to create implementation-ready guidance for frontend design spacing?▼

Create implementation-ready guidance for frontend design spacing by planning a systematic rhythm strategy that includes a scalable spacing system. This ensures design-to-dev handoff produces intentional compositions and consistent interfaces.