skills.rest
bfree-trainer
bfree-trainerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

arrange

Diagnose spacing and grid issues to produce a spacing scale and layout approach.

60|7|Updated Oct 18, 2020
Search Tags:#layout#design-system#spacing#rhythm#grid#visual-hierarchy
One-click install
npx skills add https://github.com/bfree-trainer/bfree --skill arrange-bfree-trainer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arrange
Source: https://github.com/bfree-trainer/bfree/tree/main/.claude/skills/arrange
Command: npx skills add https://github.com/bfree-trainer/bfree --skill arrange-bfree-trainer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turn monotonous, cramped, or inconsistent spatial designs into clear, intentional layouts by diagnosing spacing, hierarchy, and grid issues that make interfaces feel "off." The Skill helps teams and designers stop treating space as an afterthought and use rhythm and structure to guide attention and comprehension.

Core Features & Use Cases

  • Layout assessment: Run a targeted analysis of spacing, visual hierarchy, grid structure, rhythm, and density to identify root causes of poor composition.
  • Systematic planning: Recommend a spacing scale, hierarchy strategy, and layout approach (Flexbox vs Grid) tailored to the content and context.
  • Practical fixes: Propose concrete, implementable changes such as tokenized spacing, gap-based sibling spacing, responsive clamp() values, and card-grid variations to break monotony.
  • Verification checklist: Provide squint-test guidance, rhythm checks, responsiveness validation, and consistency audits to confirm improvements.
  • Use case: Improve a dashboard where identical card grids and inconsistent gaps cause cognitive overload by proposing a spacing system, reflow rules, and prioritized hierarchy.

Quick Start

Ask the arrange skill to audit the provided UI screenshot or layout description and return a spacing system, hierarchy recommendations, and a short implementation plan.

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 hierarchy in a crowded UI layout?▼

Fix inconsistent spacing by diagnosing grid and rhythm issues to apply a tokenized spacing scale, gap-based sibling spacing, and responsive clamp() values. This transforms crowded layouts into clear, intentional compositions.

What is the best way to create a spacing system for web and app component libraries?▼

Create a spacing system by running a targeted layout assessment of density and visual hierarchy, producing a recommended spacing scale, hierarchy strategy, and layout approach tailored to your content and context.

Can I audit an existing dashboard layout using a screenshot and current spacing tokens?▼

Yes, you can audit an existing dashboard by providing screenshots, markup, or current spacing tokens as contextual input. The assessment diagnoses structural weakness and returns a spacing system, reflow rules, and hierarchy recommendations.

How do I break monotonous card grids in a responsive frontend design?▼

Break monotonous card grids by applying recommended layout approaches like Flexbox or Grid variations alongside systematic spacing tokens. This introduces rhythmic structure and guides attention to reduce cognitive overload.

What verification checks should I run after improving interface layout and spacing?▼

Run verification checks like the squint-test for visual hierarchy, rhythm checks for spacing consistency, responsiveness validation, and consistency audits. This confirms layout improvements effectively resolve composition issues.

Why does my interface layout feel off even when the grid structure is technically correct?▼

An interface layout feels off when space is treated as an afterthought, leading to monotonous or cramped spatial designs. Diagnosing spacing, hierarchy, and rhythm issues identifies root causes of poor composition and restores structural clarity.

Related Skills

Explore More Design & Creative Skills→
romiluz13romiluz13
161

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

Community
Basic
alin776alin776
2

dialogue

Diagnose narrative dialogue for bland voice, subtext, and homogeneous speech.

Community
Advanced
ravnhqravnhq
16

design-frontend

Validate UI components against design system tokens and responsive guidelines.

Official
Basic
jacob-balslevjacob-balslev
1

visual-design-foundations

Guide palette, typography, spacing, density, and grouping choices for visual hierarchy audits.

Community
Intermediate