arrange
Transform Layouts with Intentional Spacing and Rhythm
Eliminate monotonous grids and arbitrary spacing. This skill provides a systematic approach to create visual hierarchy through intentional spacing, varied rhythm, and structured layouts that guide the eye to what matters.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "arrange". Assess the layout of the pricing section - it feels crowded and monotonous
Expected outcome:
I identified three layout issues: (1) Equal 16px spacing throughout creates no rhythm - apply tight 8px for related elements and 64px between sections, (2) All cards are identical size - vary spans to create emphasis, (3) Everything centered creates static feel - use left-aligned content with asymmetric accent placement
Using "arrange". Fix the spacing system in our dashboard
Expected outcome:
Replaced 23 arbitrary spacing values with systematic tokens: xs=4px, sm=8px, md=16px, lg=24px, xl=32px, 2xl=48px, 3xl=64px. Applied 8px gaps within card content, 24px between dashboard widgets, 64px between page sections. Layout now has clear rhythmic breathing room.
Security Audit
SafeStatic analysis flagged 29 potential issues but all are false positives. The skill file contains only markdown documentation with CSS code snippets for design guidance. No executable code, external commands, or security risks present. All findings result from pattern matching on documentation text (CSS property names, design terminology) rather than actual code execution.
Quality Score
What You Can Build
Fix monotonous card grids
Transform repetitive icon-heading-text card layouts into varied, visually interesting compositions with proper rhythm
Establish design system spacing
Create consistent spacing scales and documentation for a component library or design system
Improve visual hierarchy
Apply squint test and spacing principles to make primary content obvious within 2 seconds
Try These Prompts
Assess the layout of TARGET=components/Hero.tsx for spacing issues, visual hierarchy, and rhythm problems
Apply a consistent spacing scale to TARGET=pages/dashboard.tsx using the framework's built-in tokens. Fix any arbitrary spacing values.
Redesign the features section in TARGET=sections/Features.tsx to avoid repetitive card layouts. Create visual variety through asymmetric compositions.
Run the full arrange skill on TARGET=. Start with context gathering, then assess the current layout, plan systematic improvements, and implement changes for better visual rhythm and hierarchy.
Best Practices
- Always run frontend-design skill first to gather design context before making layout changes
- Use the squint test - blur your vision to verify hierarchy is clear without detail
- Apply gap for sibling spacing instead of margins to avoid collapse complications
- Start with Flexbox for 1D layouts, use Grid only when you need true 2D control
Avoid
- Do not use arbitrary spacing values - always work from a defined scale
- Do not make all spacing equal - variety between tight and generous creates hierarchy
- Do not default to card grids for everything - spacing and alignment can group content naturally
- Do not center everything - left-aligned compositions with asymmetry feel more designed