{"id":"610b2ac2-4aca-4104-837b-343c9826f6a4","shortId":"AhxdXE","kind":"skill","title":"hig-components-layout","tagline":">-","description":"# Apple HIG: Layout and Navigation Components\n\nCheck for `.claude/apple-design-context.md` before asking questions. Use existing context and only ask for information not already covered.\n\n## Key Principles\n\n1. **Organize hierarchically.** Structure information from broad categories to specific details. Sidebars for top-level sections, lists for browsable items, detail views for individual content.\n\n2. **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.\n\n3. **Adapt to screen size.** Three-column on iPad collapses to single-column on iPhone. Use size classes and adaptive APIs (NavigationSplitView) for automatic adaptation.\n\n4. **Support multitasking on iPad.** Respond gracefully to Split View, Slide Over, and Stage Manager. Test at every split ratio and size class transition.\n\n5. **Maintain spatial consistency on visionOS.** Windows, volumes, and ornaments in shared space. Position predictably. Use ornaments for toolbars and controls without occluding content.\n\n6. **Use scroll views for overflow content.** Enable paging for discrete content units. Support pull-to-refresh where appropriate. Respect safe areas.\n\n7. **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.\n\n8. **Prefer system components.** UINavigationController, UISplitViewController, NavigationSplitView, and TabView provide built-in adaptivity, accessibility, and state restoration.\n\n## Reference Index\n\n| Reference | Topic | Key content |\n|---|---|---|\n| [sidebars.md](references/sidebars.md) | Sidebars | Source lists, selection state, collapsible sections, iPad/Mac patterns |\n| [column-views.md](references/column-views.md) | Column Views | Finder-style browsing, progressive disclosure through columns |\n| [outline-views.md](references/outline-views.md) | Outline Views | Expandable hierarchies, disclosure triangles, tree structures |\n| [split-views.md](references/split-views.md) | Split Views | Two/three column layouts, NavigationSplitView, adaptive collapse |\n| [tab-views.md](references/tab-views.md) | Tab Views | Segmented tabs, page-style tabs, macOS tab grouping |\n| [tab-bars.md](references/tab-bars.md) | Tab Bars | Bottom tab bars (iOS), badge counts, max tab count |\n| [scroll-views.md](references/scroll-views.md) | Scroll Views | Paging, scroll indicators, content insets, pull-to-refresh |\n| [windows.md](references/windows.md) | Windows | macOS/visionOS window management, sizing, full-screen, restoration |\n| [panels.md](references/panels.md) | Panels | Inspector panels, utility panels, floating panels, macOS conventions |\n| [lists-and-tables.md](references/lists-and-tables.md) | Lists and Tables | Plain/grouped/inset-grouped styles, swipe actions, section headers |\n| [boxes.md](references/boxes.md) | Boxes | Content grouping containers, labeled boxes, macOS grouping |\n| [ornaments.md](references/ornaments.md) | Ornaments | visionOS toolbar attachments, positioning, visibility |\n\n## Navigation Pattern Selection\n\n| App Structure | Recommended Pattern | Platform Adaptation |\n|---|---|---|\n| 3-5 peer top-level sections | Tab Bar | iPhone: bottom tab bar. iPad: sidebar (`.sidebarAdaptable`, iPadOS 18+). Mac: sidebar or toolbar tabs |\n| Deep hierarchical content | Sidebar + NavigationSplitView | iPhone: single column stack. iPad: two/three columns. Mac: full multi-column |\n| Deep file/folder tree | Column View | Mac: Finder-style. iPad: adaptable. iPhone: push navigation |\n| Flat list with detail | Split View (two column) | iPhone: push/pop stack. iPad/Mac: primary + detail columns |\n| Document-based with inspectors | Window + Panels | Mac: main window with inspector. iPad: sheet or popover |\n| Spatial app with tools | Window + Ornaments | visionOS: ornaments on window. Other platforms: toolbars |\n\n## Layout Adaptation Checklist\n\n- [ ] **Compact width (iPhone portrait):** Navigation collapses to single stack? Tab bars visible?\n- [ ] **Regular width (iPad landscape, Mac):** Navigation expands to sidebar + detail? Space used well?\n- [ ] **Multitasking (iPad):** Adapts at every split ratio? Works in Slide Over?\n- [ ] **Accessibility:** Supports Dynamic Type at all sizes? VoiceOver order logical?\n- [ ] **Orientation:** Content reflows between portrait and landscape?\n- [ ] **visionOS:** Windows positioned ergonomically? Ornaments accessible? Depth meaningful?\n\n## Output Format\n\n1. **Recommended navigation pattern** with rationale for the app's information architecture.\n2. **Layout hierarchy** from root container down (e.g., TabView > NavigationSplitView > List > Detail).\n3. **Platform adaptation** across targeted platforms and size classes.\n4. **Size class behavior** at each transition.\n\n## Questions to Ask\n\n1. What is the app's information architecture? (Sections, hierarchy depth, top-level categories?)\n2. How many top-level sections?\n3. Which platforms?\n4. Need multitasking on iPad?\n5. SwiftUI or UIKit?\n\n## Related Skills\n\n- **hig-foundations** -- Layout spacing, margins, safe areas, alignment\n- **hig-platforms** -- Platform-specific navigation conventions\n- **hig-patterns** -- Multitasking, full-screen, and launching patterns\n- **hig-components-content** -- Content displayed within layout containers\n\n---\n\n*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)*","tags":["hig","components","layout","doctor","raintree-technology","accessibility","agent-skills","ai-agents","apple","apple-design","audit","claude-code"],"capabilities":["skill","source-raintree-technology","skill-hig-components-layout","topic-accessibility","topic-agent-skills","topic-ai-agents","topic-apple","topic-apple-design","topic-audit","topic-claude-code","topic-cursor","topic-hig","topic-ios","topic-macos","topic-skills"],"categories":["hig-doctor"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/raintree-technology/hig-doctor/hig-components-layout","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add raintree-technology/hig-doctor","source_repo":"https://github.com/raintree-technology/hig-doctor","install_from":"skills.sh"}},"qualityScore":"0.472","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 45 github stars · SKILL.md body (5,555 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T00:57:09.328Z","embedding":null,"createdAt":"2026-04-18T22:18:06.112Z","updatedAt":"2026-05-02T00:57:09.328Z","lastSeenAt":"2026-05-02T00:57:09.328Z","tsv":"'-5':379 '1':30,542,585 '18':395 '2':56,554,600 '3':86,378,566,607 '4':113,575,610 '5':137,615 '6':161 '7':184 '8':212 'access':226,515,537 'across':569 'action':348 'adapt':87,107,112,225,277,377,428,477,506,568 'align':629 'alreadi':26 'alway':190 'api':108 'app':372,464,550,589 'appl':5 'appropri':180 'architectur':83,553,592 'area':183,628 'ask':15,22,584 'attach':366 'automat':111 'back':203,205 'badg':300 'bar':62,295,298,386,390,489 'base':449 'behavior':578 'bottom':296,388 'box':353,358 'boxes.md':351 'breadcrumb':207 'broad':36 'brows':254 'browsabl':49 'built':223,657 'built-in':222 'button':206 'categori':37,599 'check':11 'checklist':478 'class':105,135,574,577 'claude/apple-design-context.md':13 'clear':209 'collaps':96,243,278,484 'column':93,100,249,258,274,408,412,417,421,439,446 'column-views.md':247 'compact':479 'compon':3,10,215,650 'consist':140 'contain':356,559,656 'content':55,160,167,172,235,312,354,403,526,651,652 'context':19 'control':157 'convent':339,637 'count':301,304 'cover':27 'deep':72,401,418 'depth':538,595 'detail':40,51,435,445,500,565 'develop':663 'disclosur':256,265 'discret':171 'display':653 'document':448 'document-bas':447 'dynam':517 'e.g':561 'enabl':168 'ergonom':535 'everi':130,508 'exist':18 'expand':263,497 'file/folder':419 'finder':252,425 'finder-styl':251,424 'flat':64,432 'float':336 'format':541 'foundat':623 'full':326,414,643 'full-screen':325,642 'go':202 'got':197 'grace':119 'group':291,355,360 'header':350 'hierarch':32,73,402 'hierarchi':264,556,594 'hig':2,6,622,631,639,649 'hig-components-cont':648 'hig-components-layout':1 'hig-found':621 'hig-pattern':638 'hig-platform':630 'index':231 'indic':311 'individu':54 'inform':24,34,82,552,591 'inset':313 'inspector':332,451,458 'io':299 'ipad':75,95,117,391,410,427,459,493,505,614 'ipad/mac':245,443 'ipado':394 'iphon':69,102,387,406,429,440,481 'item':50 'keep':185 'key':28,234 'know':191 'label':357 'landscap':494,531 'launch':646 'layout':4,7,275,476,555,624,655 'level':45,383,598,605 'list':47,240,342,433,564 'lists-and-tables.md':340 'logic':524 'mac':76,396,413,423,454,495 'maco':289,338,359 'macos/visionos':321 'main':455 'maintain':138 'manag':127,323 'mani':602 'margin':626 'match':77 'max':302 'meaning':539 'multi':416 'multi-column':415 'multitask':115,504,612,641 'navig':9,59,65,74,186,369,431,483,496,544,636 'navigationsplitview':109,218,276,405,563 'need':611 'occlud':159 'order':523 'organ':31 'orient':525 'ornament':146,153,363,468,470,536 'ornaments.md':361 'outlin':261 'outline-views.md':259 'output':540 'overflow':166 'page':169,286,309 'page-styl':285 'panel':331,333,335,337,453 'panels.md':329 'pattern':60,79,246,370,375,545,640,647 'peer':67,380 'plain/grouped/inset-grouped':345 'platform':85,376,474,567,571,609,632,634 'platform-specif':633 'popov':462 'portrait':482,529 'posit':150,367,534 'predict':151,187 'prefer':213 'primari':444 'principl':29 'progress':255 'provid':221 'pull':176,315 'pull-to-refresh':175,314 'push':430 'push/pop':441 'question':16,582 'raintre':659 'raintree.technology':661,665 'ratio':132,510 'rational':547 'recommend':374,543 'refer':230,232 'references/boxes.md':352 'references/column-views.md':248 'references/lists-and-tables.md':341 'references/ornaments.md':362 'references/outline-views.md':260 'references/panels.md':330 'references/scroll-views.md':306 'references/sidebars.md':237 'references/split-views.md':270 'references/tab-bars.md':293 'references/tab-views.md':280 'references/windows.md':319 'reflow':527 'refresh':178,317 'regular':491 'relat':619 'respect':181 'respond':118 'restor':229,328 'root':558 'safe':182,627 'screen':89,327,644 'scroll':163,307,310 'scroll-views.md':305 'section':46,68,210,244,349,384,593,606 'segment':283 'select':241,371 'share':148 'sheet':460 'sidebar':41,70,238,392,397,404,499 'sidebaradapt':393 'sidebars.md':236 'singl':99,407,486 'single-column':98 'size':90,104,134,324,521,573,576 'skill':620 'skill-hig-components-layout' 'slide':123,513 'sourc':239 'source-raintree-technology' 'space':149,501,625 'spatial':139,463 'specif':39,635 'split':121,131,271,436,509 'split-views.md':269 'stack':409,442,487 'stage':126 'standard':58 'state':228,242 'structur':33,268,373 'style':253,287,346,426 'support':114,174,516 'swiftui':616 'swipe':347 'system':214 'tab':61,281,284,288,290,294,297,303,385,389,400,488 'tab-bars.md':292 'tab-views.md':279 'tabl':344 'tabview':220,562 'target':570 'technolog':660 'test':128 'three':92 'three-column':91 'titl':211 'tool':466,664 'toolbar':155,365,399,475 'top':44,382,597,604 'top-level':43,381,596,603 'topic':233 'topic-accessibility' 'topic-agent-skills' 'topic-ai-agents' 'topic-apple' 'topic-apple-design' 'topic-audit' 'topic-claude-code' 'topic-cursor' 'topic-hig' 'topic-ios' 'topic-macos' 'topic-skills' 'transit':136,581 'tree':267,420 'triangl':266 'two':438 'two/three':273,411 'type':518 'uikit':618 'uinavigationcontrol':216 'uisplitviewcontrol':217 'unit':173 'use':17,57,103,152,162,204,502 'user':188 'util':334 'view':52,122,164,250,262,272,282,308,422,437 'visibl':368,490 'visiono':142,364,469,532 'voiceov':522 'volum':144 'well':503 'width':480,492 'window':143,320,322,452,456,467,472,533 'windows.md':318 'within':654 'without':158 'work':511","prices":[{"id":"f9696318-2f0d-4fb2-b434-a2b2884a9d0b","listingId":"610b2ac2-4aca-4104-837b-343c9826f6a4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"raintree-technology","category":"hig-doctor","install_from":"skills.sh"},"createdAt":"2026-04-18T22:18:06.112Z"}],"sources":[{"listingId":"610b2ac2-4aca-4104-837b-343c9826f6a4","source":"github","sourceId":"raintree-technology/hig-doctor/hig-components-layout","sourceUrl":"https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-layout","isPrimary":false,"firstSeenAt":"2026-04-18T22:18:06.112Z","lastSeenAt":"2026-05-02T00:57:09.328Z"}],"details":{"listingId":"610b2ac2-4aca-4104-837b-343c9826f6a4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"raintree-technology","slug":"hig-components-layout","github":{"repo":"raintree-technology/hig-doctor","stars":45,"topics":["accessibility","agent-skills","ai-agents","apple","apple-design","audit","claude-code","cursor","hig","human-interface-guidelines","ios","macos","skills","swiftui","tvos","uikit","visionos","watchos"],"license":"other","html_url":"https://github.com/raintree-technology/hig-doctor","pushed_at":"2026-04-28T22:36:54Z","description":"Apple HIG audit CLI + 14 agent skills for AI coding assistants — score any project for HIG compliance across 12 frameworks","skill_md_sha":"c0d0af49c100f2b0f38c685c24b6cbd562dcc419","skill_md_path":"skills/hig-components-layout/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/raintree-technology/hig-doctor/tree/main/skills/hig-components-layout"},"layout":"multi","source":"github","category":"hig-doctor","frontmatter":{"name":"hig-components-layout","description":">-"},"skills_sh_url":"https://skills.sh/raintree-technology/hig-doctor/hig-components-layout"},"updatedAt":"2026-05-02T00:57:09.328Z"}}