arrange

Diagnose frontend layouts by evaluating spacing, hierarchy, grid structure, and rhythm.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/sethdavis512/maggies-mental-load --skill arrange-sethdavis512
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/sethdavis512/maggies-mental-load/tree/main/.agents/skills/arrange
Command: npx skills add https://github.com/sethdavis512/maggies-mental-load --skill arrange-sethdavis512

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 spacing, visual hierarchy, grid structure, and density across pages and components
  • Apply a systematic spacing plan and rhythm guidelines to produce balanced, navigable interfaces
  • Use cases include dashboards, cards, and forms that feel cohesive and intentional

Quick Start

Run the Context Gathering Protocol on a current page and apply the spacing and rhythm guidelines to produce a more intentional composition

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 frontend layout?

To fix inconsistent spacing and weak visual hierarchy in your frontend layout, apply a systematic spacing plan and rhythm guidelines. This evaluates grid structure and density across pages and components to produce balanced, navigable interfaces.

What's the best way to improve visual rhythm across dashboard and card components?

Improving visual rhythm across dashboard and card components involves diagnosing spacing and grid structure to eliminate monotonous layouts. Applying systematic rhythm guidelines ensures these elements feel cohesive and intentionally composed.

Can I use this layout improvement approach for responsive forms and dashboards?

Yes, you can use this layout improvement approach for responsive forms and dashboards. It evaluates density and enforces responsive behavior and error-checked guidance to ensure consistent, navigable outcomes across typical pages and components.

How do I diagnose monotonous grid structures in my current UI?

Diagnosing monotonous grid structures requires running a Context Gathering Protocol on your current page. This assesses visual hierarchy, spacing, and density to identify where composition feels unintentional and needs rhythmic enhancement.

Why does my frontend design system feel visually unbalanced?

Your frontend design system feels visually unbalanced when it lacks an enforced spacing system and rhythmic guidelines. Evaluating grid structure and visual hierarchy identifies inconsistencies, allowing you to apply a systematic spacing plan for intentional compositions.