·hig-components-layout
</>

hig-components-layout

Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about "sidebar", "split view", "tab bar", "tab view", "scroll view", "window design", "panel", "list view", "table view", "column view", "outline view", "navigation structure", "app layout", "boxes", "ornaments", or organizing content hierarchically in Apple apps. Also use when the user says "how should I organize my app", "what navigation pattern should I use", "my layout breaks on iPad", "how do I build a sidebar", "should I use tabs or a sidebar", or "my app doesn't adapt to different screen sizes". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display.

42Installs·4Trend·@raintree-technology

Installation

$npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-layout

How to Install hig-components-layout

Quickly install hig-components-layout AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-layout
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: raintree-technology/apple-hig-skills.

SKILL.md

View raw

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

| 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 |

Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about "sidebar", "split view", "tab bar", "tab view", "scroll view", "window design", "panel", "list view", "table view", "column view", "outline view", "navigation structure", "app layout", "boxes", "ornaments", or organizing content hierarchically in Apple apps. Also use when the user says "how should I organize my app", "what navigation pattern should I use", "my layout breaks on iPad", "how do I build a sidebar", "should I use tabs or a sidebar", or "my app doesn't adapt to different screen sizes". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display. Source: raintree-technology/apple-hig-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-layout
Category
</>Dev Tools
Verified
First Seen
2026-02-20
Updated
2026-03-10

Browse more skills from raintree-technology/apple-hig-skills

Quick answers

What is hig-components-layout?

Apple Human Interface Guidelines for layout and navigation components. Use this skill when the user asks about "sidebar", "split view", "tab bar", "tab view", "scroll view", "window design", "panel", "list view", "table view", "column view", "outline view", "navigation structure", "app layout", "boxes", "ornaments", or organizing content hierarchically in Apple apps. Also use when the user says "how should I organize my app", "what navigation pattern should I use", "my layout breaks on iPad", "how do I build a sidebar", "should I use tabs or a sidebar", or "my app doesn't adapt to different screen sizes". Cross-references: hig-foundations for layout/spacing principles, hig-platforms for platform-specific navigation, hig-patterns for multitasking and full-screen, hig-components-content for content display. Source: raintree-technology/apple-hig-skills.

How do I install hig-components-layout?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/raintree-technology/apple-hig-skills --skill hig-components-layout Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/raintree-technology/apple-hig-skills