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.

referencesscroll-views.md

≈805 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/scroll-views. 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.

Scroll views

Best practices

Support default scrolling gestures and keyboard shortcuts.

Make it apparent when content is scrollable.

Avoid putting a scroll view inside another scroll view with the same orientation.

Consider supporting page-by-page scrolling if it makes sense for your content.

In some cases, scroll automatically to help people find their place.

  • Your app performs an operation that selects content or places the insertion point in an area that’s currently hidden. For example, when your app locates text that people are searching for, scroll the content to bring the new selection into view.

  • People start entering information in a location that’s not currently visible. For example, if the insertion point is on one page and people navigate to another page, scroll back to the insertion point as soon as they begin to enter text.

  • The pointer moves past the edge of the view while people are making a selection. In this case, follow the pointer by scrolling in the direction it moves.

  • People select something and scroll to a new location before acting on the selection. In this case, scroll until the selection is in view before performing the operation.

If you support zoom, set appropriate maximum and minimum scale values.

Scroll edge effects

  • Use a soft edge effect in most cases, especially in iOS and iPadOS, to provide a subtle transition that works well for toolbars and interactive elements like buttons.

  • Use a hard edge effect primarily in macOS for a stronger, more opaque boundary that’s ideal for interactive text, backless controls, or pinned table headers that need extra clarity.

Only use a scroll edge effect when a scroll view is adjacent to floating interface elements.

Apply one scroll edge effect per view.

Platform considerations

iOS, iPadOS

Consider showing a page control when a scroll view is in page-by-page mode.

macOS

If necessary, use small or mini scroll bars in a panel.

visionOS

If necessary, account for the size of the scroll indicator.

watchOS

Prefer vertically scrolling content.

Use tab views to provide page-by-page scrolling.

When displaying paged content, consider limiting the content of an individual page to a single screen height.


<!-- 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/scroll-views

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