Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Apple HIG: Layout and Navigation Components · sickn33 | DecimalAI

Hig Components Layout

NewSkillScoreMaintained

hig-components-layout

Apple Human Interface Guidelines for layout and navigation components.

design-mediaby sickn33

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Design & UX Review pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/hig-components-layout/SKILL.md

decimalai skills pull hig-components-layout --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/hig-components-layout/SKILL.md https://app.decimal.ai/s/hig-components-layout/SKILL.md

Raw file: /s/hig-components-layout/SKILL.md ↗ · machine-readable summary at /s/hig-components-layout.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

25 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 55d ago

No measurable change+33% tokens0% turns8% of whole cases pass with skill (2/25)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-08	✗→✓	▲ Improved	—	—
case-02	✓→✓	＝ Same ✓	—	—
case-07	✗→✗	＝ Same ✗	—	—
case-19	✗→✗	＝ Same ✗	—	—
case-20	✗→✗	＝ Same ✗	—	—

Showing 5 of 25 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v5 — 9/11/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

sickn33 / antigravity-awesome-skills

skills/hig-components-layout/SKILL.md

View on GitHub ↗

License MITImported 9/11/2026Version v2Bundled 24 files

Skill contents

references/

SKILL.md

Apple HIG: Layout and Navigation Components

Check for .claude/apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

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

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.

Adapt to screen size. Three-column on iPad collapses to single-column on iPhone. Use size classes and adaptive APIs (NavigationSplitView) for automatic adaptation.

Support multitasking on iPad. Respond gracefully to Split View, Slide Over, and Stage Manager. Test at every split ratio and size class transition.

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

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

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.

Prefer system components. UINavigationController, UISplitViewController, NavigationSplitView, and TabView provide built-in adaptivity, accessibility, and state restoration.

Reference Index

| Reference | Topic | Key content | |---|---|---| | sidebars.md | Sidebars | Source lists, selection state, collapsible sections, iPad/Mac patterns | | column-views.md | Column Views | Finder-style browsing, progressive disclosure through columns | | outline-views.md | Outline Views | Expandable hierarchies, disclosure triangles, tree structures | | split-views.md | Split Views | Two/three column layouts, NavigationSplitView, adaptive collapse | | tab-views.md | Tab Views | Segmented tabs, page-style tabs, macOS tab grouping | | tab-bars.md | Tab Bars | Bottom tab bars (iOS), badge counts, max tab count | | scroll-views.md | Scroll Views | Paging, scroll indicators, content insets, pull-to-refresh | | windows.md | Windows | macOS/visionOS window management, sizing, full-screen, restoration | | panels.md | Panels | Inspector panels, utility panels, floating panels, macOS conventions | | lists-and-tables.md | Lists and Tables | Plain/grouped/inset-grouped styles, swipe actions, section headers | | boxes.md | Boxes | Content grouping containers, labeled boxes, macOS grouping | | ornaments.md | Ornaments | visionOS toolbar attachments, positioning, visibility |

Navigation Pattern Selection

| App Structure | Recommended Pattern | Platform Adaptation | |---|---|---| | 3-5 peer top-level sections | Tab Bar | iPhone: bottom tab bar. iPad: sidebar (.sidebarAdaptable, iPadOS 18+). Mac: sidebar or toolbar tabs | | Deep hierarchical content | Sidebar + NavigationSplitView | iPhone: single column stack. iPad: two/three columns. Mac: full multi-column | | Deep file/folder tree | Column View | Mac: Finder-style. iPad: adaptable. iPhone: push navigation | | Flat list with detail | Split View (two column) | iPhone: push/pop stack. iPad/Mac: primary + detail columns | | Document-based with inspectors | Window + Panels | Mac: main window with inspector. iPad: sheet or popover | | Spatial app with tools | Window + Ornaments | visionOS: ornaments on window. Other platforms: toolbars |

Layout Adaptation Checklist

] Compact width (iPhone portrait): Navigation collapses to single stack? Tab bars visible?
] Regular width (iPad landscape, Mac): Navigation expands to sidebar + detail? Space used well?
] Multitasking (iPad): Adapts at every split ratio? Works in Slide Over?
] Accessibility: Supports Dynamic Type at all sizes? VoiceOver order logical?
] Orientation: Content reflows between portrait and landscape?
] visionOS: Windows positioned ergonomically? Ornaments accessible? Depth meaningful?

Output Format

Recommended navigation pattern with rationale for the app's information architecture.
Layout hierarchy from root container down (e.g., TabView > NavigationSplitView > List > Detail).
Platform adaptation across targeted platforms and size classes.
Size class behavior at each transition.

Questions to Ask

What is the app's information architecture? (Sections, hierarchy depth, top-level categories?)
How many top-level sections?
Which platforms?
Need multitasking on iPad?
SwiftUI or UIKit?

Related Skills

hig-foundations -- Layout spacing, margins, safe areas, alignment
hig-platforms -- Platform-specific navigation conventions
hig-patterns -- Multitasking, full-screen, and launching patterns
hig-components-content -- Content displayed within layout containers

Built by Raintree Technology · More developer tools

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Example

User request:

> Use @hig-components-layout for this task: Apple Human Interface Guidelines for layout and navigation components.

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Illustrative Want to see what hig-components-layout would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerifiedfrom v1 · older version

7/28/2026, 20:52 UTC · 25 cases

Lift

0%

50% vs 50%

Agent turns

0%

1.0 vs 1.0

Tokens

+33%

2,835.84 vs 2,137.04

fail → pass · 1pass → pass · 1fail → fail · 23

Per-case results (25)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-07 When designing an iPad app layout using NavigationSplitView, why is it risky to hardcode absolute pixel widths for sidebars or detail panes instead of supporting dynamic size class adaptations?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-19 What primary architectural principle in Apple HIG governs how content should be structured from top-level entry points down to individual detail items?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-20 On iPadOS and macOS, what HIG navigation container component functions as a source list to let users navigate top-level app sections while managing active selection state?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-16 We are designing a standard settings screen and a data-dense transaction list in an iOS app. What standard HIG list and table visual styles are recommended for these respective layout contexts?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-14 A development team wants to write custom UIViewController transitions and a custom navigation stack from scratch for their iOS split view implementation. Why does Apple HIG strongly recommend using system layout components like NavigationSplitView or UISplitViewController instead?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-25 What are the recommended Apple HIG design patterns for initial application cold start performance and launch screen splash animations on iOS?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-24 How should we design the internal cell typography, badge alignment, and thumbnail image truncation for row items in an iOS SwiftUI list view?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-21 To ensure users never get lost in a multi-level iOS navigation stack, what design elements and layout mechanisms maintain predictable navigation back to previous contexts?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-23 We are laying out a custom SwiftUI card component on iOS. What exact point values should we use for padding around text labels and margins between cards according to standard HIG spacing systems?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-01 We are building an iOS and iPadOS media asset catalog with deep multi-level collection hierarchies and folder structures. A junior developer suggests using a flat TabView with 8 tabs across all platforms. How should we structure the navigation and layout containers for this app across iPhone, iPad, and Mac?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-18 When an app using a 3-column split view layout transitions from iPad landscape (regular width) to iPhone portrait (compact width), how does the system adaptively collapse the navigation structure?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-22 In macOS desktop tools, how do floating utility panels differ from main content windows in terms of window depth and behavior during app switching?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-03 We are building a macOS cloud file manager that lets users continuously drill down through arbitrary levels of nested folders to view file metadata. The team is leaning toward modal popups for deep folders. What standard HIG layout component should be used on macOS for browsing deeply nested file trees?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-06 We are building an email client for iPhone and iPad that presents a list of messages and shows the selected email body. The developer suggests using a custom modal presentation for every email view. How should this list-and-detail layout be structured for both compact and regular size classes?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-08 We are building a full-screen image gallery feed on iOS where users swipe through high-resolution photo cards one by one. Should we use custom drag gestures with manual animation offsets, or a native HIG layout scroll view configuration?	fail→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-10 We need a complete layout design proposal for a SwiftUI news reader app targeting iOS, iPadOS, and macOS with 4 top-level channels and hierarchical article categories. Provide a structured review detailing the recommended navigation pattern, layout hierarchy, platform adaptation, and size class behavior.	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-05 We are developing a visionOS spatial media player window. Should floating playback controls and toolbars be embedded directly inside the main 2D window content body, or positioned externally using visionOS spatial layout mechanisms?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-02 We are designing a fitness tracking app with 4 main top-level sections: Activity, Workouts, Sharing, and Profile. The team wants to build custom hamburger menu navigation for all platforms. What is the standard navigation pattern for 4 peer sections, and how should it adapt from iPhone to iPad in modern iPadOS?	pass→pass	—	—	—	—	—	—	—	—	—	—	—	—
case-13 An iOS navigation design proposal includes 9 persistent tabs in the bottom tab bar on iPhone portrait mode. Is this compliant with Apple HIG tab bar recommendations, and how should large numbers of top-level sections be handled?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-04 We are creating a macOS vector graphics editor where users edit documents and need frequent access to object inspectors and tool settings. A developer suggests placing all controls inside temporary modal sheets. What is the standard HIG layout container strategy for document-based apps with utility controls on macOS versus iPadOS?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-09 We are creating a macOS project management tool with a tree-structured task outline supporting infinite nested subtasks. What specific macOS HIG layout view component provides built-in support for expandable tree hierarchies with disclosure triangles?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-11 I need you to design the complete layout architecture for my app, but I haven't told you anything about the content structure. What key questions do you need answered before choosing a navigation and layout pattern?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-12 On macOS desktop applications, what standard HIG layout container component should be used to visually group related form fields and settings controls together within a preference panel?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-15 When placing spatial windows and auxiliary tool controls in visionOS shared space, what HIG principle guides their physical positioning relative to the user?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—
case-17 For a real-time social feed list in an iOS layout, what standard interaction mechanism should be integrated directly into the scroll view container for updating dynamic content?	fail→fail	—	—	—	—	—	—	—	—	—	—	—	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 25 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 50%
Pass rate with the skill: 50%
Cases attempted: 25
Cases counted toward lift: 25
Cases that regressed: 1
Skill version measured: v1
Run completed: 7/28/2026, 20:52 UTC

The publisher has shipped newer versions since this run, so these numbers describe v1, not the version currently listed.

The per-case answers from this run were removed by the retention sweep, so the case table below shows the verdicts without the text either arm produced. The counts above were recorded at the time and are unaffected. Answers are now kept for 180 days.

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+34% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested 54 days ago

Other measured skills in the registry, with their headline benchmark lift.