---
name: interface-layout
description: Use when refining the layout, spacing, or composition of a product interface page or component.
---

# Interface Layout

Out of scope: print/editorial design, standalone illustration, or decorative graphic composition with no product interface; use an available graphic-design skill instead. Also out of scope: a color-token, shared-component, or interaction-state decision when page composition is not in question; use its owning specialist Skill.

## Workflow
1. Identify the page purpose, primary task, audience, content priority, existing brand/system, locale, platform, and constraints.
2. Inspect the current UI and available tokens/assets before proposing changes.
3. Arrange page regions, grouping, and spacing around the task. Keep semantic content priority with `visual-hierarchy`; use existing color roles and type tokens unless those systems are explicitly in scope.
4. Explain choices with context: distinguish standard/technical constraints, research, platform convention, and aesthetic preference. Avoid universal color-psychology claims.
5. Review real content lengths, contrast, responsive states, and interaction affordances. Record the inspected state/viewport, the acceptance criterion, the observed result, and any unverified breakpoint. Treat a hierarchy or spacing proposal as unverified until checked in the rendered interface.

Load `references/composition.md` for the decision checklist. Use `visual-hierarchy` for scan order and emphasis, `color-systems` for palettes/themes, `responsive-design` for breakpoints, and `design-systems` only when shared tokens or components need to change.