arrange

Overview of arrange skill

What arrange does

The arrange skill helps improve UI layout, spacing, and visual rhythm when a screen feels crowded, flat, repetitive, or structurally weak. It is not a general “make it prettier” prompt. Its job is to diagnose why a composition feels off, then reorganize spacing, grouping, hierarchy, and grid structure so the interface reads more intentionally.

Who should use arrange

arrange is best for designers, frontend developers, and AI-assisted builders working on UI screens, flows, dashboards, landing pages, and component-heavy layouts. It is especially useful when you can tell something feels wrong in the composition but cannot yet name whether the issue is spacing, hierarchy, or repetitive structure.

Best-fit jobs to be done

Use arrange when you need to:

• fix monotonous card grids
• improve inconsistent spacing
• reduce visual clutter
• create clearer grouping and scanning paths
• strengthen hierarchy without redesigning the entire product
• make a layout feel deliberate rather than accidental

What makes arrange different

The main differentiator of arrange is that it focuses on spatial design decisions, not just visual styling. It pushes you to assess layout with concrete checks like grouping, rhythm, the squint test, and whether the screen has a clear underlying structure. That makes the arrange skill more useful than a generic “improve this UI” prompt when the actual problem is composition.

Important dependency before install

This skill is not standalone in practice. The upstream instructions explicitly require invoking $frontend-design first, and if design context does not exist yet, you must run $teach-impeccable before continuing. That dependency is the biggest adoption blocker to understand up front: arrange works best inside the broader impeccable skill system, not as an isolated one-off prompt.

How to Use arrange skill

Install context for arrange

The repository excerpt does not provide its own standalone arrange install command inside SKILL.md. In the broader skill ecosystem, users commonly add a skill from the repository and then invoke it by name. If your environment supports selective install, a typical pattern is:

npx skills add pbakaus/impeccable --skill arrange

If your toolchain installs the whole repository instead, install pbakaus/impeccable and then call arrange from your agent workflow.

Read this file first

Start with:

• SKILL.md

This skill folder appears minimal, with the core guidance concentrated in that single file. Because there are no visible helper scripts, rules, or references in this skill directory preview, your decision should rest on whether the workflow in SKILL.md matches how you already review UI layouts.

Required setup before calling arrange skill

Before you ask arrange to change anything, satisfy its required upstream context:

1. Invoke $frontend-design.
2. Follow that skill's context gathering protocol.
3. If you do not yet have enough design context, run $teach-impeccable first.

If you skip this, arrange is much more likely to produce shallow cosmetic suggestions instead of useful structural improvements.

What input arrange needs

The arrange skill performs better when you provide:

• the target screen, component, or flow
• a screenshot or strong text description
• the layout goal
• constraints such as platform, breakpoint, density, brand limits, or component reuse rules
• what feels wrong right now

Weak input: “Make this UI better.”

Strong input: “Use arrange for this settings page. The screen feels crowded and every section has identical spacing. I need clearer hierarchy between account, billing, and danger-zone actions. Keep the existing components, desktop-first, and avoid increasing total page height by more than 15%.”

How to frame a good arrange prompt

A strong arrange usage prompt usually includes four parts:

1. Current state: what exists now.
2. Problem signal: what feels off.
3. Constraints: what cannot change.
4. Output request: what kind of recommendation you want.

Example:
“Use arrange for this analytics dashboard. Diagnose spacing, grouping, and visual hierarchy. The KPI cards, charts, and filters all feel equally weighted. Keep the current data and component library. Suggest a revised structure, spacing logic, and why the new hierarchy will scan better.”

What arrange actually evaluates

From the upstream guidance, arrange is looking for issues in:

• spacing consistency versus arbitrary values
• rhythm, not just equal padding everywhere
• grouping of related elements
• visual hierarchy using the squint test
• whether whitespace guides attention
• grid structure versus randomness
• overused identical card patterns

This matters because the skill is best at composition problems. If your issue is color, typography, or motion alone, another skill may be a better first stop.

Suggested workflow for arrange for UI Design

A practical workflow for arrange for UI Design is:

1. Gather context with $frontend-design.
2. Show the current screen and describe what feels wrong.
3. Ask for diagnosis first, not immediate redesign.
4. Review the proposed hierarchy and grouping changes.
5. Ask for a revised layout plan with spacing rules.
6. Only then ask for implementation-ready guidance or component changes.

That staged workflow reduces churn. If you jump straight to final redesign output, the model may optimize the wrong problem.

Ask for diagnosis before solutions

A good first turn is:
“Use arrange to assess this screen only. Identify the main spatial weaknesses in spacing, hierarchy, and structure. Do not redesign yet.”

This makes the skill explain the actual fault lines before proposing fixes. That is usually more valuable than receiving a polished but poorly targeted rewrite.

Turn a rough goal into an actionable brief

If your original request is vague, convert it like this:

Rough goal: “The page feels off.”

Better brief:
“Use arrange on this onboarding page. It feels flat because all sections use the same spacing and weight. I want a clearer entry point, stronger separation between primary and secondary actions, and less repetitive use of identical feature cards. Keep the current copy and component set.”

What good output from arrange looks like

Useful arrange output should include:

• a diagnosis of the current layout problem
• specific hierarchy changes
• spacing or grouping rules
• structural alternatives to repetitive grids
• rationale tied to scanning and emphasis

Be cautious if the output is only adjectives like “cleaner,” “more balanced,” or “more modern” without concrete compositional changes.

arrange skill FAQ

Is arrange a good standalone skill

Partially. You can understand its intent on its own, but the repository evidence shows arrange depends on $frontend-design, and sometimes $teach-impeccable, for proper context. If you want a drop-in standalone skill with all rules embedded locally, this is not that.

When should I use arrange instead of a normal prompt

Use arrange when the problem is specifically layout quality: weak hierarchy, bad grouping, crowded spacing, or repetitive structure. A normal prompt can ask for UI improvements, but arrange gives a more reliable lens for diagnosing composition instead of jumping straight to surface-level polish.

Is arrange beginner friendly

Yes, if you already have a screen to review and can describe what feels wrong. No, if you expect one-command autonomous redesign with no context. The skill assumes you can supply target, constraints, and some design intent.

What is arrange not for

arrange is not the best fit for:

• pure visual styling changes
• copywriting improvements
• interaction logic redesign
• code refactoring with no UI review
• brand exploration from scratch

It is strongest when the layout exists and needs structural improvement.

Does arrange help with implementation

Indirectly. The skill is more about diagnosing and planning layout improvements than generating code. You can ask a follow-up for implementation guidance, but the value of arrange is mainly in making the structure and spacing decisions clearer first.

Can arrange work on components, not full pages

Yes. It should still work on a modal, settings panel, pricing section, dashboard module, or form step, as long as the problem is spatial arrangement. Just be explicit about the component boundary and nearby context.

How to Improve arrange skill

Give arrange better spatial evidence

The fastest way to improve arrange results is to provide stronger evidence:

• screenshots
• viewport size
• notes on what users should notice first
• areas that feel too dense or too repetitive
• constraints on height, width, or component reuse

The more concrete the layout context, the more likely arrange will make meaningful structural recommendations.

State the intended hierarchy explicitly

If you know the desired emphasis, say it. Example:
“The primary goal is to make billing status obvious first, recent invoices second, and support links tertiary.”

Without that, arrange can still analyze the screen, but it has to infer your intended reading order.

Name what must not change

Good arrange prompts include guardrails such as:

• keep existing components
• do not add new sections
• mobile layout must remain single-column
• preserve current copy length
• avoid increasing scroll depth

These constraints force better recommendations and reduce unrealistic redesigns.

Ask arrange to compare alternatives

For better decision quality, request two or three layout directions:

• conservative cleanup
• moderate restructuring
• more opinionated hierarchy shift

This is especially helpful when you are unsure whether the page needs spacing fixes only or a deeper compositional change.

Watch for common failure modes

The most common ways arrange can underperform are:

• not enough context from $frontend-design
• vague prompts like “make it nicer”
• missing constraints
• no screenshot or screen description
• asking for code before the layout diagnosis is clear

If the first answer feels generic, the issue is often the prompt setup, not the skill concept.

Iterate after the first arrange output

After the initial diagnosis, push further with follow-ups like:

• “Which spacing changes matter most?”
• “What should be grouped more tightly?”
• “Which repeated card patterns should be broken?”
• “What would improve hierarchy without adding new visual styles?”

These questions turn a broad critique into usable design direction.

Use arrange with implementation follow-through

Once the layout plan is solid, ask for output in the form you need:

• design review bullets
• revised section order
• spacing token suggestions
• CSS or component layout recommendations
• acceptance criteria for a designer or developer

That handoff step is how arrange becomes practical instead of staying conceptual.

Best way to get more value from arrange

Treat arrange as a composition critic, not a magic redesign button. Its highest value comes from helping you identify why a UI feels wrong, define a stronger hierarchy, and make layout decisions intentionally. If you use it that way, the arrange skill can outperform a generic prompt on real UI structure problems.