arrange_skill

Overview

This skill improves layout, spacing, and visual rhythm to turn generic, monotonous arrangements into intentional, polished compositions. It targets inconsistent spacing, weak hierarchy, and overused card grids to create clear groupings and a satisfying spatial beat. The skill requires initial context gathering from the frontend-design protocol before making changes.

How this skill works

First, it runs the Context Gathering Protocol from the frontend-design workflow to collect design goals, content density, and breakpoints. It inspects spacing, hierarchy, grid structure, rhythm, and density to identify root causes of “off” layouts. Then it produces a systematic plan: a spacing scale, hierarchy strategy, layout tool recommendations (Flex vs Grid), rhythm rules, and implementation notes like semantic tokens and clamp-based fluid spacing. Finally it recommends verification steps such as the squint test and responsiveness checks.

When to use it

• When spacing values are inconsistent or arbitrary across a UI
• When grids feel monotonous or cards are overused
• When the page reads as cramped or overly sparse
• When visual hierarchy is unclear or the primary content is not obvious
• When responsiveness and spatial rhythm break at different viewports

Best practices

• Run the frontend-design Context Gathering Protocol before changes; if no context exists, run teach-impeccable first
• Establish a limited spacing scale and use semantic tokens (e.g., --space-xs to --space-xl) rather than arbitrary numbers
• Use gap for sibling spacing and clamp() for fluid spacing across breakpoints
• Prefer Flexbox for 1D layouts and Grid for coordinated 2D layouts; don’t default to Grid
• Create rhythm with alternating tight (8–12px) and generous (48–96px) spaces and avoid identical repetition
• Use elevation and subtle shadow scales semantically to reinforce hierarchy, not decorate

Example use cases

• Redesign a product listing where identical card grids make all items blend together
• Refine a marketing landing page that feels cramped despite good typography
• Rework a dashboard where data-dense panels need tighter spacing and clearer grouping
• Adjust modal and dialog layouts to make primary actions obvious via spacing and elevation
• Convert a component library to use a consistent spacing token system for maintainability