i-arrange_skill

Overview

This skill improves layout, spacing, and visual rhythm to turn monotonous or crowded interfaces into intentional compositions. It diagnoses spacing, hierarchy, grid structure, rhythm, and density, then applies a systematic spacing system and layout rules to restore clarity and emphasis. Mandatory: run the i-frontend-design Context Gathering Protocol first; if no context exists, execute teach-impeccable before proceeding.

How this skill works

I inspect spacing consistency, visual hierarchy via the squint test, grid structure, rhythm and density to find what feels off. Then I produce a plan: a spacing scale, hierarchy strategy, choice of Flex/Grid, rhythm map (where to tighten or expand), and elevation semantics. Finally I suggest concrete CSS patterns (semantic tokens, gap usage, clamp() for fluid spacing, repeat(auto-fit, minmax()) for responsive grids) and verification checks.

When to use it

• Pages that feel flat or repetitive due to identical card grids or equal spacing everywhere
• Interfaces that look crowded or too sparse and lack a clear visual hierarchy
• Dashboards or data-dense layouts needing coordinated row+column control
• Component internals that need predictable spacing and avoid margin hacks
• Before visual polish work like color and typography refinements

Best practices

• Always run the Context Gathering Protocol from i-frontend-design first
• Adopt a defined spacing scale (semantic tokens like --space-xs..--space-xl) and never use arbitrary values
• Use gap for sibling spacing, clamp() for fluid spacing, and semantic z-index/shadow scales
• Prefer Flexbox for 1D layouts, Grid for 2D; use the simplest tool that meets requirements
• Create rhythm: tight grouping for related items, generous separation between sections, and intentional variety

Example use cases

• Refining a marketing page that currently uses identical icon+heading+text cards across every section
• Reworking a dashboard to use Grid for the overall layout and Flex inside cards for item rows
• Converting arbitrary padding/margins to a consistent rem-token spacing system with gap usage
• Adjusting card layouts to break monotony by spanning columns, mixing media, or removing unnecessary cards
• Establishing a semantic elevation and shadow scale for modals, tooltips, and toasts