# Improve Layout Rhythm

Crowded or repetitive interfaces make hierarchy hard to read. This skill gives Claude, Codex, and Claude Code a layout review workflow for spacing, rhythm, and structure.

## Install

```bash
npx skillstore add pbakaus/arrange
```

## Metadata

- Status: approved
- Slug: pbakaus-arrange
- Skillstore revision: r1
- Version status: missing
- Tree hash: 4cdb46e640b6dc8f93cbf41e437dcd445f1605930f799599198be19afc37a964
- Author: pbakaus
- GitHub username: pbakaus
- License: MIT
- Repository: https://github.com/pbakaus/impeccable/tree/main/.agents/skills/arrange/
- Ref: e397ce5a135369cd6def89cb6400d013e2f68f2f
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/pbakaus-arrange
- Manifest: https://skillstore.pages.dev/api/skills/pbakaus-arrange/manifest

## Capabilities

- Reviews spacing, hierarchy, grid structure, rhythm, density, and responsiveness.
- Creates a layout improvement plan based on spacing systems and content structure.
- Recommends Flexbox, CSS Grid, named areas, or responsive grid patterns.
- Identifies repetitive card grids, nested cards, equal spacing, and excessive centering.
- Uses verification checks for squint test, breathing room, hierarchy, and layout consistency.

## Use Cases

- Refine a crowded dashboard: Review a data-heavy screen and identify spacing, hierarchy, and density changes that make repeated use easier.
- Choose CSS layout structure: Decide when to use Flexbox, Grid, named areas, or responsive columns for a page or component.
- Polish a marketing page: Break repetitive card sections and create clearer visual rhythm without adding decorative elements.

## Prompt Templates

### Review this page layout

```
Use the arrange skill on TARGET=the current page. Identify the main spacing, hierarchy, structure, rhythm, and density issues before changing files.
```

### Create a spacing plan

```
Use arrange for TARGET=the dashboard. Propose a spacing scale, grouping rules, and hierarchy strategy, then apply the smallest needed edits.
```

### Refactor responsive structure

```
Use arrange for TARGET=the pricing section. Replace repetitive card-grid structure with a more intentional responsive layout and verify mobile behavior.
```

### Audit a full interface system

```
Use arrange across the app shell and key screens. Normalize spacing tokens, choose layout primitives, reduce nested cards, and document verification results.
```

## Limitations

- It provides guidance; implementation quality depends on the agent editing the target files.
- It assumes existing frontend context and references the frontend-design skill for deeper guidance.
- It does not perform automated visual regression testing by itself.
- It does not choose brand colors, typography systems, or illustration style as its primary focus.

## Best Practices

- Start with content relationships before choosing layout primitives.
- Use a consistent spacing scale, then vary density to create hierarchy.
- Verify changes at mobile and desktop sizes before judging visual rhythm.

## Anti Patterns

- Do not wrap every group in a card when spacing or dividers are enough.
- Do not use equal spacing everywhere; it removes hierarchy.
- Do not choose CSS Grid for simple one-dimensional layouts.

## Security Audit

- Audited at: 2026-07-06T19:53:13.428\+00:00
- Summary: All 13 static findings are false positives caused by Markdown prose and inline CSS examples. No executable commands, reconnaissance behavior, prompt injection, network activity, or data exfiltration intent was found in SKILL.md.

## Stats

- Views: 122
- Downloads: 13
- Favorites: 0
- Popularity score: 0