skills.rest
Elliot-TangS
Elliot-TangSCOMMUNITY
Explore all skills by this author →
𝕏@elite_chainGitHub

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
One-click install
npx skills add https://github.com/Elliot-TangS/EliteChain --skill arrange-elliot-tangs
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
RelicWare-CoRelicWare-Co

layout

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

Official
Advanced
Dzakiamriz22Dzakiamriz22
1

spacing

Enforce 4px and 8px spacing grids on component margins, padding, and gaps.

Community
Intermediate
KentoShimizuKentoShimizu
7

visual-design

Create a reusable visual spec with color, typography, spacing, and grid rules.

Community
Intermediate
rohunvorarohunvora
5

fix-hierarchy

Diagnose visual hierarchy violations and generate targeted fixes for web and mobile interfaces.

Community
Advanced