arrange

Overview of arrange skill

What arrange does

The arrange skill is a UI layout critique-and-improvement skill for fixing spacing, hierarchy, grouping, and overall visual rhythm. It is best used when a screen feels crowded, flat, repetitive, or “off” even if the UI technically works.

Who should use arrange

arrange is most useful for designers, frontend developers, and AI-assisted builders who already have a screen, component, or rough mockup and want better composition without jumping straight into a full visual redesign. It is especially relevant for arrange for UI Design workflows where the main problem is structure, not branding.

The real job-to-be-done

Most users do not need abstract design theory. They need the AI to look at a weak layout, diagnose why it feels monotonous or unclear, and propose concrete improvements to spacing, grouping, and hierarchy. The arrange skill is built for that narrower job.

What makes this skill different

Unlike a generic “make this prettier” prompt, arrange focuses on spatial decisions: consistent-but-not-flat spacing, stronger grouping, clearer scan paths, and less mechanical grid repetition. It also has an important dependency: it expects design context from /frontend-design, and if that context does not exist yet, it requires /teach-impeccable first.

Best-fit and misfit cases

Use arrange when:

• cards all look the same
• spacing feels arbitrary or uniformly padded
• hierarchy is weak
• sections blend together
• alignment is technically correct but visually dull

Do not choose arrange first when the problem is mainly:

• color palette
• typography system
• brand direction
• accessibility implementation details
• missing product strategy or unclear content

How to Use arrange skill

Install context for arrange

The repository does not publish its own install command inside SKILL.md, so directory users typically add it through their skill manager using the GitHub source path for the arrange skill. If your environment supports GitHub skill installs, use the repo URL and map the skill name to arrange.

A common pattern is:

npx skills add https://github.com/pbakaus/impeccable --skill arrange

If your setup uses a different installer, the important part is the source repository: pbakaus/impeccable, skill path .claude/skills/arrange.

Read this before first use

For arrange install decisions, the key thing is that this skill is not fully standalone. The skill explicitly says to invoke /frontend-design first because that parent skill contains design principles and a context-gathering protocol. If no design context exists yet, it says you must run /teach-impeccable before continuing.

That means adoption is easiest if you are already using the broader impeccable skill set rather than cherry-picking one isolated prompt.

What input arrange needs

The strongest arrange usage starts with a specific target plus enough structural context to judge layout quality:

• the screen or component name
• purpose of the page
• current UI code or screenshot
• device context
• content density constraints
• what feels wrong right now
• any immutable constraints such as existing design system tokens

Good targets:

• “pricing page hero and plan cards”
• “dashboard sidebar + content header”
• “mobile onboarding step layout”
• “settings form with dense controls”

How to turn a rough request into a usable prompt

Weak prompt:

• “Use arrange on this UI”

Better prompt:

• “Use arrange for the dashboard overview screen. The layout feels crowded and every card has the same visual weight. Keep the current components, but improve spacing rhythm, grouping, and hierarchy. Prioritize scanability on desktop, preserve the 12-column grid, and do not redesign colors.”

Why this is better:

• defines scope
• names the actual problem
• states constraints
• tells the model what can and cannot change

A practical arrange guide workflow

1. Gather design context with /frontend-design.
2. If the project lacks enough context, run /teach-impeccable.
3. Point arrange at a single screen, section, or component set.
4. Ask for diagnosis before changes.
5. Ask for revised layout decisions with reasons.
6. Apply changes and review again with the same skill.

This sequence matters because arrange is strongest at structured critique, not blind guessing.

What arrange evaluates well

Based on the source, arrange is especially tuned to assess:

• spacing consistency versus arbitrary values
• whether everything has the same padding and therefore no rhythm
• whether related items are grouped tightly
• whether larger spaces separate groups
• whether the main focal point survives the “squint test”
• whether whitespace guides the eye
• whether the layout has an underlying structure
• whether repeated card grids are making the interface generic

If those are your pain points, the arrange skill is a strong fit.

Suggested prompt structure for better arrange usage

Use this input pattern:

• Target: what exact screen or component
• Goal: what should feel better
• Current issue: what looks wrong now
• Constraints: what must stay fixed
• Context: device, content type, design system
• Output wanted: critique, revised layout plan, code changes, or all three

Example:

• Target: analytics dashboard main view
• Goal: improve hierarchy and reduce visual sameness
• Current issue: every widget competes equally, spacing is uniform, sections blur together
• Constraints: keep existing Tailwind tokens and component inventory
• Context: desktop-first SaaS app
• Output wanted: diagnosis first, then layout revision recommendations

Repository files to read first

This skill is lightweight. The only meaningful file surfaced here is:

• SKILL.md

Read it first because it contains:

• the dependency on /frontend-design
• the mandatory preparation step
• the layout assessment checklist
• the intended problem triggers

There are no visible helper scripts, references, or metadata files in this skill directory, so your install decision should be based mainly on how much you value the critique framework in SKILL.md.

What to ask arrange to return

To make arrange for UI Design practical, ask for output in one of these forms:

• a ranked list of layout problems
• a spacing and grouping plan
• a revised section structure
• before/after rationale
• implementation-ready CSS or component adjustments

If you only ask for “improve the layout,” you will usually get weaker, less actionable output.

Constraints that may block adoption

The main adoption blockers are straightforward:

• it depends on other skills in the same ecosystem
• it does not appear to ship examples, assets, or helper references
• it is guidance-heavy rather than tool-heavy
• it is strongest for critique and direction, not automated layout generation

If you want a self-contained skill with examples and implementation recipes, arrange may feel thin on its own.

arrange skill FAQ

Is arrange beginner-friendly?

Yes, if you already have a screen to improve. No, if you are starting from zero and need to learn UI design fundamentals first. The dependency on /frontend-design is a clue that the author expects broader design guidance to be available.

Is arrange better than a normal prompt?

Usually yes for layout-specific critique. A generic prompt often produces vague feedback like “add more whitespace” or “improve hierarchy.” arrange gives a clearer review lens: spacing rhythm, grouping, squint-test hierarchy, and grid monotony.

Can I use arrange without the rest of impeccable?

Possibly, but with reduced value. The skill explicitly requires /frontend-design and may require /teach-impeccable if no context exists. In practice, arrange install makes the most sense if you can access the surrounding impeccable workflow.

When should I not use arrange?

Skip arrange when your main issue is visual styling rather than layout structure. It will not be the best first tool for brand exploration, illustration direction, color systems, or deep accessibility remediation.

Does arrange work for code and screenshots?

It should work best when you provide either UI code, a screenshot, or both. Without concrete artifacts, the model has to imagine the layout, which lowers output quality.

Is arrange useful for design systems?

Yes, but mostly at the screen-composition level. It helps you apply existing tokens and components with better rhythm and hierarchy; it is not primarily a design-system authoring skill.

How to Improve arrange skill

Give arrange one layout problem at a time

arrange performs better on a single page region or screen than on an entire product. If you give it a full app, the advice tends to flatten into generic observations. Narrow scope produces sharper structural changes.

Show what must remain unchanged

High-quality arrange usage depends on constraints. Tell it what cannot move:

• grid system
• breakpoints
• component inventory
• token scale
• brand rules
• content order

This prevents unrealistic redesigns and keeps the suggestions implementation-ready.

Ask for diagnosis before redesign

A strong pattern is:

1. “Audit the current layout.”
2. “Rank the top 3 structural problems.”
3. “Propose fixes with minimal changes.”
4. “Only then suggest deeper alternatives.”

This improves trust because you can evaluate the reasoning before accepting changes.

Provide evidence of the current weakness

The best inputs mention symptoms, not just preferences:

• “users miss the primary CTA”
• “the cards read like one undifferentiated wall”
• “the form feels longer than it is”
• “sections compete for attention”

That gives arrange a real decision target instead of a vague aesthetics brief.

Common failure modes with arrange

Watch for these weak outputs:

• adding whitespace everywhere equally
• over-relying on card grids
• suggesting hierarchy through size only
• ignoring content relationships
• proposing changes that fight your design system

If you see these, ask the skill to rebalance grouping, contrast between dense and open areas, and section-level rhythm.

Stronger inputs for arrange for UI Design

Better than:

• “make this cleaner”

Use:

• “Improve the layout rhythm of this settings page. Related controls should feel grouped, advanced options should recede, and the save action should remain easy to find. Keep all fields and labels.”

This gives the skill a clear hierarchy and grouping objective.

Iterate on the first output the right way

After the first pass, do not just ask for “another version.” Instead ask:

• which spacing relationships changed and why
• what became the primary focal point
• how grouping improved scanability
• what tradeoffs were introduced
• how the layout should adapt on mobile

That forces more useful second-round reasoning.

Pair arrange with implementation requests

Once the critique is good, ask for the next layer:

• Tailwind class changes
• CSS spacing scale updates
• component restructuring
• grid adjustments by breakpoint

This turns arrange guide output into something a developer can ship.

Improve trust by asking for minimal-change and maximal-change options

A practical way to use arrange skill in teams is to ask for:

• a conservative revision
• a stronger structural rewrite

That helps stakeholders compare risk versus payoff without treating layout work as subjective guesswork.