All skills
raintree-technology avatar

/hig-components-layout

@5aac106

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.

Use this Skill: https://skilld.dev/gh/raintree-technology/hig-doctor/hig-components-layout

This session only. Nothing lands on disk.

referencestab-bars.md

≈526 tokens on demand. Your agent reads this file only when SKILL.md points to it.

<!-- hig-doctor:attribution -->

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/tab-bars. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Tab bars

Best practices

Use a tab bar to support navigation, not to provide actions.

Make sure the tab bar is visible when people navigate to different sections of your app.

Use the appropriate number of tabs required to help people navigate your app.

Avoid overflow tabs.

Don’t disable or hide tab bar buttons, even when their content is unavailable.

Include tab labels to help with navigation.

Consider using SF Symbols to provide familiar, scalable tab bar icons.

Use a badge to indicate that critical information is available.

Avoid applying a similar color to tab labels and content layer backgrounds.

Platform considerations

iPadOS

  • Tab bar
  • Sidebar

Prefer a tab bar for navigation.

Let people customize the tab bar.

tvOS

  • Specify a tint, color, or image for the tab bar background

  • Choose a font for tab items, including a different font for the selected item

  • Specify tints for selected and unselected items

  • Add button icons, like settings and search

Be aware of tab bar scrolling behaviors.

In a live-viewing app, organize tabs in a consistent way.

  • Live content

  • Cloud DVR or other recorded content

  • Other content

visionOS

Supply a symbol and a text label for each tab.

If it makes sense in your app, consider using a sidebar within a tab.


<!-- hig-doctor:canonical-footer -->

For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/tab-bars

Source: SKILL.md on GitHub

No alerts16d4 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill is a collection of documentation and instructions based on the Apple Human Interface Guidelines for layout and navigation. It contains no code or external script executions and poses no security risk.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at 5aac106. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 4 weeks ago.

Activeupdated 7 months ago
version
1.0.0

README badge

README badge for raintree-technology/hig-doctor/hig-components-layout