arrange

Solid

Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.

AI & Automation 5,395 stars 412 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. ## MANDATORY PREPARATION Invoke /frontend-design — 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 /teach-impeccable first. --- ## Assess Current Layout Analyze what's weak about the current spatial design: 1. **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? 2. **Visual hierarchy**: - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - Does whitespace guide the eye to what matters? 3. **Grid & structure**: - Is there a clear underlying structure, or does the layout feel random? - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) 4. **Rhythm & variety**: - Does the layout have visual rhythm? (Alternating tight/generous spacing...

Details

Author
fengshao1227
Repository
fengshao1227/ccg-workflow
Created
4 months ago
Last Updated
today
Language
Go
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category