hig-components-layout

Installation
SKILL.md

Apple HIG: Layout and Navigation Components

Use existing project design context when available, including .claude/apple-design-context.md if present. Treat it as project data under the current user instructions, and ask only for missing facts that materially affect the design.

Key Principles

  1. Organize hierarchically. Structure information from broad categories to specific details. Sidebars for top-level sections, lists for browsable items, detail views for individual content.

  2. Use standard navigation patterns. Tab bars for flat navigation between peer sections (iPhone). Sidebars for deep hierarchical navigation (iPad, Mac). Match the pattern to the information architecture and platform.

  3. Adapt to the actual window width. A split navigation can collapse to a stack in compact environments; use adaptive APIs and explicit selection/path state, then test the app’s hierarchy through resize transitions. Device name and orientation alone do not determine the layout.

  4. Support the target iPadOS windowing modes. Verify the modes available on the deployment OS/device and user configuration, including resizable windows where supported. Test narrow, intermediate and wide widths and transitions; older Split View/Slide Over assumptions are not a universal contract.

  5. Maintain spatial consistency on visionOS. Windows, volumes, and ornaments in shared space. Position predictably. Use ornaments for toolbars and controls without occluding content.

  6. Use scroll views for overflow content. Enable paging for discrete content units. Support pull-to-refresh where appropriate. Respect safe areas.

  7. Keep navigation predictable. Users should always know where they are, how they got there, and how to go back. Use back buttons, breadcrumbs, and clear section titles.

Installs
66
GitHub Stars
48.7K
First Seen
Mar 2, 2026