skills.rest
primaERP
primaERPOFFICIAL
Explore all skills by this author →
WebsiteGitHub

arrange

Plan and implement consistent spacing systems and visual rhythm for UI layouts.

Updated Aug 23, 2026
Search Tags:#layout#design system#ux#spacing#grid#frontend-design#visual rhythm
One-click install
npx skills add https://github.com/primaERP/jmhz-xml-editor --skill arrange-primaerp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/primaERP/jmhz-xml-editor/tree/main/style_guide/.cursor/skills/arrange
Command: npx skills add https://github.com/primaERP/jmhz-xml-editor --skill arrange-primaerp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve UI layouts by addressing monotony, crowding, and weak visual hierarchy to create intentional compositions.

Core Features & Use Cases

  • Plan Layout Improvements: consult the spatial design reference and create a structured plan covering spacing systems, hierarchy, layout approach, and rhythm.
  • Establish a Spacing System: adopt a consistent scale and semantic tokens; use gap-based spacing and clamp for responsive behavior.
  • Create Visual Rhythm: balance tight and generous spacing, varied within sections, and asymmetric compositions to guide the eye.
  • Strengthen Visual Hierarchy: prioritize content using whitespace, weight, and proximity to create clear groupings.

Quick Start

Audit the current UI layout and output an improved arrangement with a defined spacing system.

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 layouts?▼

Fix inconsistent UI spacing by adopting a consistent spacing scale with semantic tokens, using gap-based spacing, and applying whitespace and proximity to strengthen visual hierarchy and create clear groupings.

What is visual rhythm in frontend design and how do I create it?▼

Visual rhythm in frontend design is the intentional balance of tight and generous spacing across sections. Create visual rhythm by varying spacing within sections and using asymmetric compositions to guide the user's eye through the layout.

How do I establish a spacing system for a responsive frontend design?▼

Establish a responsive spacing system by adopting a consistent scale with semantic tokens and using gap-based spacing. Apply CSS clamp functions to ensure spacing behavior adapts smoothly across different viewport sizes.

Can I use this to improve the layout of existing dashboards and forms?▼

Yes, you can improve existing dashboards, cards, and forms by auditing the current layout and applying a structured plan that covers spacing systems, hierarchy, layout approach, and visual rhythm.

What's the best way to plan layout improvements for monotone grids?▼

The best way to plan layout improvements for monotone grids is to consult a spatial design reference to create a structured plan covering spacing systems, hierarchy, layout approach, and rhythm for actionable layout decisions.

Why does my dashboard layout feel crowded and how can I optimize it?▼

Your dashboard layout feels crowded due to inconsistent spacing and weak visual hierarchy. Optimize it by balancing tight and generous spacing, prioritizing content with whitespace, and creating clear groupings to guide the eye.

Related Skills

Explore More Design & Creative Skills→
hossain-khanhossain-khan

arrange

Audit UI layouts and document spacing scales for responsive design.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

fluid-spacing-system

Generates fluid CSS clamp()-based spacing scales with rem-bound semantic tokens for responsive layouts.

Official
Advanced
AkaraChenAkaraChen
270

arrange

Assess UI layouts for spacing, rhythm, hierarchy, and grid structure.

Community
Advanced
tomerkedemtomerkedem

layout

Assess and refine layout spacing and visual hierarchy for interfaces.

Community
Advanced