arrange
Assess and improve layout spacing, visual hierarchy, and rhythm to transform generic arrangements into intentional compositions.
- Analyzes current spacing consistency, visual hierarchy, grid structure, and rhythm through systematic assessment including the squint test for identifying primary and secondary content
- Establishes a semantic spacing system using consistent scales (framework tokens, rem-based, or custom) and applies
gapfor sibling spacing instead of margins - Recommends layout tools by use case: Flexbox for 1D layouts and components, Grid for 2D page-level structures, with guidance on responsive patterns like
repeat(auto-fit, minmax()) - Breaks monotonous card grid patterns by varying sizes, mixing card and non-card content, and using spacing and alignment for natural visual grouping
- Requires the frontend-design skill and its Context Gathering Protocol as prerequisite; includes optical adjustment guidance and a semantic z-index scale for depth management
Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.
MANDATORY PREPARATION
Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first.
Assess Current Layout
Analyze what's weak about the current spatial design:
-
Spacing:
- Is spacing consistent or arbitrary? (Random padding/margin values)
- Is all spacing the same? (Equal padding everywhere = no rhythm)
- Are related elements grouped tightly, with generous space between groups?
-
Visual hierarchy:
- Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings?
More from pbakaus/impeccable
polish
Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.
85.5Kimpeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
83.8Kcritique
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.
83.0Kaudit
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.
82.2Kanimate
Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
82.1Kadapt
Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.
82.1K