skills.rest
sandrasocial
sandrasocialCOMMUNITY
Explore all skills by this author →
GitHub

arrange

Assess UI layouts and implement a token-based spacing system with responsive behavior.

1|Updated Oct 27, 2025
Search Tags:#layout#ui design#spacing#hierarchy#grid#arrange#visual rhythm
One-click install
npx skills add https://github.com/sandrasocial/sselfie-9g --skill arrange-sandrasocial
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/arrange
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill arrange-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve layout, spacing, and visual rhythm in interfaces by turning off ambiguous alignment and stale grids into intentional, balanced compositions.

Core Features & Use Cases

  • Assess current layout for spacing consistency, visual hierarchy, grid structure, rhythm, and density.
  • Plan and implement a scalable spacing system with tokens, gaps, and responsive behavior.
  • Provide a step-by-step workflow to improve common UI patterns (dashboards, content pages, forms).

Quick Start

Run a layout assessment and propose a spacing plan to improve visual harmony.

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 rhythm in my UI layout?▼

Fix inconsistent UI layout spacing by running a layout assessment to identify rhythm issues, then applying a generated spacing system with tokens and responsive behavior to restore visual harmony.

What is a spacing system with tokens and how does it improve UI design?▼

A spacing system with tokens is a scalable structure of defined gaps and responsive behaviors that replaces ambiguous alignment, ensuring consistent visual hierarchy and density across user interfaces.

How do I create a scalable grid and spacing plan for dashboards and forms?▼

Create a scalable grid and spacing plan for dashboards and forms by assessing current density and hierarchy, then implementing targeted spacing tokens and responsive gap behaviors to resolve alignment issues.

Can I use this to assess visual hierarchy and density for content pages?▼

Yes, you can assess visual hierarchy, density, and grid structure for content pages to identify stale layouts and receive targeted guidance for achieving balanced, intentional compositions.

What is the best way to resolve off alignment in user interface design?▼

The best way to resolve off alignment in user interface design is to follow a step-by-step workflow that evaluates current grid structure and applies a concrete spacing system with responsive rules.

When should I not use an automated spacing system for layout design?▼

You should avoid an automated spacing system when your interface requires highly bespoke, custom illustration-driven layouts that intentionally break standard grid structures and rhythmic density rules.

Related Skills

Explore More Design & Creative Skills→
wzyxdwllwzyxdwll
14

arrange

Analyze UI layouts and generate prioritized spacing and alignment adjustments.

Community
Advanced
EzequielpereyraaEzequielpereyraa

design-init

Scan Tailwind and CSS projects to extract design tokens and generate DESIGN.md.

Community
Advanced
lxb031018lxb031018
2

ui-design

Generate frontend UI design specifications with layout, typography, and color constraints.

Community
Advanced
joncoroneljoncoronel
1

layout

Analyze UI layouts and apply spacing systems, grid rhythm, and hierarchy fixes.

Community
Advanced