其他

arrange

aladicf/better-web-ui

Improve layout composition, spacing systems, grouping, and visual rhythm. Use when the user mentions weak layout structure, arbitrary spacing, weak grouping, crowded composition, or layout monotony rather than priority/emphasis problems.

  • 593 次安装
  • 46 星标
  • 收录于

安装命令

npx skills add https://github.com/aladicf/better-web-ui --skill arrange

SKILL.md

Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions.

Use this when the problem is mainly spatial composition. If the bigger issue is unclear priority, competing emphasis, loud section titles, or label/value weighting, use hierarchy.

MANDATORY PREPARATION

Users start this workflow with /arrange. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup 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?
    • Is there more space around groups than within groups? If not, the grouping may feel ambiguous.