{"id":"9825210f-248c-4ef1-b476-11f609e42080","shortId":"gwC9JL","kind":"skill","title":"hig-components-layout","tagline":"Apple Human Interface Guidelines for layout and navigation components.","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)*\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["hig","components","layout","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-hig-components-layout","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/hig-components-layout","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34768 github stars · SKILL.md body (5,977 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-04-23T18:51:26.905Z","embedding":null,"createdAt":"2026-04-18T21:38:27.691Z","updatedAt":"2026-04-23T18:51:26.905Z","lastSeenAt":"2026-04-23T18:51:26.905Z","tsv":"'-5':388 '1':39,551,594 '18':404 '2':65,563,609 '3':95,387,575,616 '4':122,584,619 '5':146,624 '6':170 '7':193 '8':221 'access':235,524,546 'across':578 'action':357,687 'adapt':96,116,121,234,286,386,437,486,515,577 'align':638 'alreadi':35 'alway':199 'api':117 'app':381,473,559,598 'appl':5,14 'applic':681 'appropri':189 'architectur':92,562,601 'area':192,637 'ask':24,31,593,725 'attach':375 'automat':120 'back':212,214 'badg':309 'bar':71,304,307,395,399,498 'base':458 'behavior':587 'bottom':305,397 'boundari':733 'box':362,367 'boxes.md':360 'breadcrumb':216 'broad':45 'brows':263 'browsabl':58 'built':232,666 'built-in':231 'button':215 'categori':46,608 'check':20 'checklist':487 'clarif':727 'class':114,144,583,586 'claude/apple-design-context.md':22 'clear':218,700 'collaps':105,252,287,493 'column':102,109,258,267,283,417,421,426,430,448,455 'column-views.md':256 'compact':488 'compon':3,13,19,224,659 'consist':149 'contain':365,568,665 'content':64,169,176,181,244,321,363,412,535,660,661 'context':28 'control':166 'convent':348,646 'count':310,313 'cover':36 'criteria':736 'deep':81,410,427 'depth':547,604 'describ':688,704 'detail':49,60,444,454,509,574 'develop':672 'disclosur':265,274 'discret':180 'display':662 'document':457 'document-bas':456 'dynam':526 'e.g':570 'enabl':177 'environ':716 'environment-specif':715 'ergonom':544 'everi':139,517 'execut':683 'exist':27 'expand':272,506 'expert':721 'file/folder':428 'finder':261,434 'finder-styl':260,433 'flat':73,441 'float':345 'format':550 'foundat':632 'full':335,423,652 'full-screen':334,651 'go':211 'got':206 'grace':128 'group':300,364,369 'guidelin':8 'header':359 'hierarch':41,82,411 'hierarchi':273,565,603 'hig':2,15,631,640,648,658 'hig-components-cont':657 'hig-components-layout':1 'hig-found':630 'hig-pattern':647 'hig-platform':639 'human':6 'index':240 'indic':320 'individu':63 'inform':33,43,91,561,600 'input':730 'inset':322 'inspector':341,460,467 'interfac':7 'io':308 'ipad':84,104,126,400,419,436,468,502,514,623 'ipad/mac':254,452 'ipado':403 'iphon':78,111,396,415,438,449,490 'item':59 'keep':194 'key':37,243 'know':200 'label':366 'landscap':503,540 'launch':655 'layout':4,10,16,284,485,564,633,664 'level':54,392,607,614 'limit':692 'list':56,249,351,442,573 'lists-and-tables.md':349 'logic':533 'mac':85,405,422,432,463,504 'maco':298,347,368 'macos/visionos':330 'main':464 'maintain':147 'manag':136,332 'mani':611 'margin':635 'match':86,701 'max':311 'meaning':548 'miss':738 'multi':425 'multi-column':424 'multitask':124,513,621,650 'navig':12,18,68,74,83,195,378,440,492,505,553,645 'navigationsplitview':118,227,285,414,572 'need':620 'occlud':168 'order':532 'organ':40 'orient':534 'ornament':155,162,372,477,479,545 'ornaments.md':370 'outlin':270 'outline-views.md':268 'output':549,710 'overflow':175 'overview':691 'page':178,295,318 'page-styl':294 'panel':340,342,344,346,462 'panels.md':338 'pattern':69,88,255,379,384,554,649,656 'peer':76,389 'permiss':731 'plain/grouped/inset-grouped':354 'platform':94,385,483,576,580,618,641,643 'platform-specif':642 'popov':471 'portrait':491,538 'posit':159,376,543 'predict':160,196 'prefer':222 'primari':453 'principl':38 'progress':264 'provid':230 'pull':185,324 'pull-to-refresh':184,323 'push':439 'push/pop':450 'question':25,591 'raintre':668 'raintree.technology':670,674 'ratio':141,519 'rational':556 'recommend':383,552 'refer':239,241 'references/boxes.md':361 'references/column-views.md':257 'references/lists-and-tables.md':350 'references/ornaments.md':371 'references/outline-views.md':269 'references/panels.md':339 'references/scroll-views.md':315 'references/sidebars.md':246 'references/split-views.md':279 'references/tab-bars.md':302 'references/tab-views.md':289 'references/windows.md':328 'reflow':536 'refresh':187,326 'regular':500 'relat':628 'requir':729 'respect':190 'respond':127 'restor':238,337 'review':722 'root':567 'safe':191,636 'safeti':732 'scope':703 'screen':98,336,653 'scroll':172,316,319 'scroll-views.md':314 'section':55,77,219,253,358,393,602,615 'segment':292 'select':250,380 'share':157 'sheet':469 'sidebar':50,79,247,401,406,413,508 'sidebaradapt':402 'sidebars.md':245 'singl':108,416,495 'single-column':107 'size':99,113,143,333,530,582,585 'skill':629,679,695 'skill-hig-components-layout' 'slide':132,522 'sourc':248 'source-sickn33' 'space':158,510,634 'spatial':148,472 'specif':48,644,717 'split':130,140,280,445,518 'split-views.md':278 'stack':418,451,496 'stage':135 'standard':67 'state':237,251 'stop':723 'structur':42,277,382 'style':262,296,355,435 'substitut':713 'success':735 'support':123,183,525 'swiftui':625 'swipe':356 'system':223 'tab':70,290,293,297,299,303,306,312,394,398,409,497 'tab-bars.md':301 'tab-views.md':288 'tabl':353 'tabview':229,571 'target':579 'task':699 'technolog':669 'test':137,719 'three':101 'three-column':100 'titl':220 'tool':475,673 'toolbar':164,374,408,484 'top':53,391,606,613 'top-level':52,390,605,612 'topic':242 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transit':145,590 'treat':708 'tree':276,429 'triangl':275 'two':447 'two/three':282,420 'type':527 'uikit':627 'uinavigationcontrol':225 'uisplitviewcontrol':226 'unit':182 'use':26,66,112,161,171,213,511,677,693 'user':197 'util':343 'valid':718 'view':61,131,173,259,271,281,291,317,431,446 'visibl':377,499 'visiono':151,373,478,541 'voiceov':531 'volum':153 'well':512 'width':489,501 'window':152,329,331,461,465,476,481,542 'windows.md':327 'within':663 'without':167 'work':520 'workflow':685","prices":[{"id":"7ccb947e-7b5b-42b6-8c63-af5d66e2244a","listingId":"9825210f-248c-4ef1-b476-11f609e42080","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:38:27.691Z"}],"sources":[{"listingId":"9825210f-248c-4ef1-b476-11f609e42080","source":"github","sourceId":"sickn33/antigravity-awesome-skills/hig-components-layout","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-layout","isPrimary":false,"firstSeenAt":"2026-04-18T21:38:27.691Z","lastSeenAt":"2026-04-23T18:51:26.905Z"}],"details":{"listingId":"9825210f-248c-4ef1-b476-11f609e42080","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"hig-components-layout","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34768,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"8b4f33cc716b30a220891921d6e1f740a8b81d38","skill_md_path":"skills/hig-components-layout/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-layout"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"hig-components-layout","description":"Apple Human Interface Guidelines for layout and navigation components."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/hig-components-layout"},"updatedAt":"2026-04-23T18:51:26.905Z"}}