arrange

Overview of arrange skill

What arrange does

The arrange skill helps an agent improve UI layout, spacing, and visual rhythm when a screen feels crowded, flat, repetitive, or poorly structured. It is not a generic design brainstormer. Its job is narrower and more useful: diagnose weak spatial composition, then reorganize the interface into clearer groups, stronger hierarchy, and more intentional spacing.

Who should use arrange

Use arrange for UI Design if you already have a screen, wireframe, component set, or rough implementation, but the result feels “off” even though individual parts seem fine. It is best for:

• product designers refining composition
• frontend developers polishing shipped or near-shipped UI
• AI agents reviewing screenshots, mockups, or code-based layouts
• teams that need concrete layout fixes, not abstract design theory

The real job-to-be-done

Most users do not need a full redesign. They need to answer questions like:

• Why does this page feel cramped?
• Why does every section look equally important?
• Why does this dashboard read like a wall of boxes?
• How should spacing change between related and unrelated elements?

The arrange skill is built for that exact problem: improving arrangement quality without changing the product’s core functionality.

What makes arrange different from a normal prompt

A plain prompt can ask for “better spacing,” but arrange usage is stronger because the skill gives a focused review path:

• assess spacing consistency and rhythm
• test visual hierarchy
• inspect grid structure and repetition
• identify overuse of equal treatment
• propose layout changes that create grouping and flow

That makes it more useful than vague “make it prettier” prompting, especially when the issue is composition rather than styling.

Biggest adoption caveat

The main blocker is context. The skill explicitly depends on /frontend-design, and if no design context exists yet, it requires /teach-impeccable first. So arrange install is not the full story; this skill works best inside the broader impeccable skill system, not as a standalone one-file magic prompt.

How to Use arrange skill

Install context before you invoke arrange

There is no separate package-specific setup inside SKILL.md. In practice, users install the parent skill repository, then invoke arrange from that environment. If you are using the Skills CLI pattern shown in the baseline, the practical command is:

npx skills add pbakaus/impeccable --skill arrange

Because the skill itself requires prior design context, be ready to run:

• /frontend-design
• /teach-impeccable if no design context has been established yet

If your agent runtime does not support nested skill invocation, this dependency should influence your install decision.

Read this file first

Start with:

• SKILL.md

This repository slice is lightweight, so nearly all of the usable guidance lives in that file. You do not need a long code read, but you do need to understand the required sequence and the evaluation lens.

Know when arrange is the right tool

Use the arrange skill when the main problem is structural presentation, such as:

• crowded cards or panels
• weak section grouping
• monotone equal spacing everywhere
• repeated card-grid patterns that flatten importance
• unclear focal point on a page
• alignment that feels technically correct but visually dead

Do not reach for it first if the real issue is:

• missing product requirements
• copy problems
• broken interaction flow
• accessibility semantics
• component styling tokens only

Gather the right input before prompting

The skill becomes much more useful when you provide concrete design material. Good inputs include:

• a screenshot of the current screen
• a Figma frame description
• a JSX/HTML structure
• a list of sections in reading order
• current spacing values and grid behavior
• viewport context: mobile, tablet, desktop

Weak input: “Make this layout better.”

Strong input: “This desktop analytics page has a top summary row, two charts, a filter bar, and a data table. Everything uses similar card sizes and 24px padding, so the page feels repetitive. The table is most important, but the charts dominate visually. Improve hierarchy and spacing without changing components or adding new features.”

Turn a rough request into a complete arrange prompt

A good arrange guide prompt usually includes five things:

1. target screen or component
2. primary user task
3. current layout symptoms
4. hard constraints
5. desired level of change

Example:

“Use arrange on this settings page. The layout feels cramped and every section looks equally important. The user’s main task is updating billing details. Keep all existing content and components. Do not redesign visual style; only improve grouping, spacing rhythm, hierarchy, and section ordering. Explain what is weak first, then propose concrete layout changes.”

This works because it tells the skill what to preserve and what to fix.

Follow the skill's actual review workflow

The repository evidence shows a practical sequence:

• assess current layout
• identify spacing problems
• test visual hierarchy with a squint-style simplification
• inspect grid and structure
• plan improvements systematically

In practice, ask the agent to produce output in two passes:

1. diagnosis of what feels structurally weak
2. proposed arrangement changes with rationale

That separation reduces shallow “here’s a prettier version” responses.

Ask for diagnosis before solutions

The best arrange usage starts with critique, not redesign. Request findings like:

• where spacing is arbitrary vs intentional
• where related items are not grouped tightly enough
• where all sections receive the same visual weight
• where repeated card treatments create monotony
• where whitespace fails to direct attention

This matters because layout fixes are only trustworthy when tied to observed structural issues.

Define constraints so arrange does not over-redesign

The skill is strongest when bounded. Useful constraints:

• keep the same components
• preserve copy length
• no visual style overhaul
• no brand changes
• no new interactions
• optimize for one viewport first

Without constraints, the output may drift into general redesign advice instead of arrangement improvements.

What good output from arrange should look like

A strong result should include:

• the main layout problem in plain language
• a hierarchy plan: what should read first, second, third
• spacing strategy: tighter within groups, looser between groups
• structural changes: stacking, grouping, alignment, column shifts
• notes on repeated patterns causing sameness
• concrete before/after reasoning

If the output only says “increase whitespace” or “improve alignment,” it is too generic.

Practical prompt example for UI screens

For arrange for UI Design, use a prompt like:

“Apply arrange to this SaaS dashboard. Current issues: every module is a similar card, all gutters feel identical, and the page lacks a clear focal point. The user mainly checks KPIs, then scans alerts, then reviews trends. Keep the same components and data. Improve grouping, spacing rhythm, and hierarchy. Suggest a more intentional composition and explain why it will scan better.”

Practical prompt example for component-level fixes

The skill also works below full-page level:

“Use arrange on this pricing card section. The cards feel evenly spaced but visually bland, and the featured plan does not stand out enough. Keep typography and colors unchanged. Improve layout rhythm, grouping, and emphasis through spacing and structure only.”

Common workflow that reduces guesswork

A reliable workflow is:

1. run prerequisite context skill(s)
2. provide screenshot or structure
3. ask for diagnosis only
4. review proposed issues
5. ask for revised arrangement plan under constraints
6. implement in design tool or code
7. re-run arrange on the updated version for refinement

This iterative use is more effective than asking for a one-shot perfect redesign.

arrange skill FAQ

Is arrange a standalone install

Not really. While you can add the skill from the parent repository, the skill text itself depends on /frontend-design and sometimes /teach-impeccable. For many users, the real decision is whether to adopt the broader impeccable workflow, not just the single arrange file.

Is arrange good for beginners

Yes, if you can describe what feels wrong about a layout and provide a screen or structure. You do not need advanced design vocabulary. But the skill is more helpful when you can share constraints and priorities instead of asking for a fully open-ended redesign.

How is arrange different from ordinary design prompting

The main difference is focus. A normal prompt may jump to aesthetics. Arrange skill guidance stays centered on composition problems: spacing rhythm, grouping, hierarchy, and layout structure. That makes it especially useful when the UI is functional but visually weak.

When should I not use arrange

Skip it when the issue is mainly:

• UX flow and task logic
• copy clarity
• accessibility compliance
• visual branding direction
• component library selection

Arrange improves arrangement, not the whole product design stack.

Can arrange help with coded UIs, not just mockups

Yes. It is suitable for JSX, HTML, CSS layout descriptions, or screenshots of implemented interfaces. In fact, developers can get strong value by pairing a rendered screenshot with a short description of current spacing rules and component constraints.

Does arrange replace a full design review

No. It is a targeted arrange guide for spatial composition. If your screen has interaction, content, and accessibility issues at the same time, use it as one review layer, not the only one.

How to Improve arrange skill

Give arrange hierarchy goals, not just visual complaints

Users care most about scan order. Tell the skill what should dominate attention first. For example:

• primary action first, supporting info second
• table first, filters second, help text third
• hero statement first, proof blocks second

This produces better arrangement advice than saying “make it cleaner.”

Provide layout symptoms with evidence

The best improvement lever is specificity. Instead of “looks messy,” say:

• all cards use the same padding and width
• sections have equal spacing despite different importance
• related controls are split across rows
• the eye does not know where to start

That helps arrange connect recommendations to actual structural problems.

State what must not change

A common failure mode is overreach. Prevent it by saying:

• keep existing components
• keep content order unless necessary
• no new modules
• no style/token changes
• mobile-first or desktop-only

The tighter the boundary, the more actionable the arrangement output becomes.

Ask for a spacing system, not isolated tweaks

If you want reusable results, ask arrange to propose spacing logic such as:

• tight spacing within component groups
• medium spacing between related sections
• large spacing between task zones

This is better than random local fixes because it creates rhythm across the whole screen.

Force comparison between current and proposed structure

A useful refinement prompt is:

“Re-run arrange and compare the current layout to the proposed one section by section. Highlight what changes hierarchy, what reduces monotony, and what improves grouping.”

This exposes whether the recommendations are substantive or cosmetic.

Iterate after the first output

The first pass is often diagnostic. Improve it by asking follow-ups like:

• “Make the hierarchy stronger without adding visual noise.”
• “Reduce card-grid sameness while keeping the same data.”
• “Show a lower-risk version with minimal structural changes.”
• “Prioritize mobile readability over symmetry.”

That kind of iteration is usually where the arrange skill becomes genuinely useful.

Watch for these failure modes

Outputs are weaker when:

• the input has no screenshot or structure
• the prompt does not define the main task
• visual style feedback is confused with layout feedback
• the requested changes are too broad
• the agent skips prerequisite design context

If the result sounds generic, the prompt was probably underspecified, not just the skill.

Best way to get higher-quality arrange results

For the highest-quality arrange usage, provide:

• one screen at a time
• explicit user priority
• current pain points
• hard layout constraints
• preferred degree of change
• a request for diagnosis before recommendations

That keeps the skill focused on what it actually does well: turning weak UI arrangement into clearer, more intentional composition.