hig-components-layout

Overview of hig-components-layout skill

What hig-components-layout covers

The hig-components-layout skill is an Apple HIG navigation-and-layout guide for choosing and using the right structural components in app interfaces. It is most useful when you need to decide between sidebars, split views, tab bars, tab views, lists, tables, outline views, columns, panels, windows, scroll views, boxes, and ornaments for a Mac or iPad-style UI.

Who should use it

Use the hig-components-layout skill if you are designing information architecture, reorganizing a cluttered interface, or adapting an app to different screen sizes. It is especially relevant for UI designers, product engineers, and AI agents drafting interface specs that need Apple-aligned layout decisions instead of generic “responsive design” advice.

What makes it useful

This skill is stronger than a prompt-only summary because it encodes pattern-selection logic: when to use hierarchical navigation, when to keep content in a table, when to expose detail in columns, and when a panel or ornament is a better fit than another persistent container. It also points to platform-aware tradeoffs, so the result is less likely to be overbuilt, duplicated, or hard to adapt on smaller screens.

How to Use hig-components-layout skill

Install and locate the source

Install the hig-components-layout skill with:
npx skills add raintree-technology/apple-hig-skills --skill hig-components-layout

After install, start with skills/hig-components-layout/SKILL.md, then read the referenced layout pages in references/ to confirm the pattern rules that apply to your case.

Read these files first

For quickest decision value, read SKILL.md plus the most relevant reference pages before drafting your prompt:

• references/sidebars.md
• references/split-views.md
• references/tab-bars.md
• references/tab-views.md
• references/lists-and-tables.md
• references/outline-views.md
• references/column-views.md
• references/panels.md

These files answer the practical question the skill is built for: what should hold the content, what should navigate, and what should stay visible.

How to prompt it well

Give the skill a concrete UI problem, not a vague request. Strong input includes platform, content shape, and navigation depth. For example: “Design a macOS app for browsing projects, with a left navigation hierarchy, a middle list, and a right detail view. Should this use a sidebar plus split view, or tabs?”

Also include constraints that affect layout decisions: whether users need quick switching, whether the content is hierarchical, whether the interface must collapse on iPhone, and whether the selected item needs inline inspection. Those details let the skill choose between hig-components-layout usage patterns instead of defaulting to one familiar component.

Best workflow for output quality

Use this sequence: define the content structure, choose the primary navigation model, then confirm how it collapses or adapts across platforms. If your draft prompt only names a component—such as “make a sidebar”—the skill can only optimize that assumption; if you describe the information hierarchy, it can recommend the right component and explain why.

hig-components-layout skill FAQ

Is hig-components-layout only for Apple UI design?

Yes, it is primarily a hig-components-layout for UI Design skill grounded in Apple Human Interface Guidelines. It is best when you want layout and navigation decisions that fit iOS, iPadOS, macOS, or Apple-style multi-column interfaces.

How is this different from a generic design prompt?

A generic prompt may produce a plausible layout, but hig-components-layout adds pattern discipline: it helps avoid using a table for hierarchical data, a sidebar for flat peer-level navigation, or a panel where standard window controls are enough. That makes it better for decision support, not just visual ideation.

Is it beginner-friendly?

Yes, if you already know the basic shape of the interface you are building. The skill is most helpful when you can describe your content and goals in plain language, even if you do not know the HIG term for the pattern.

When should I not use it?

Do not rely on hig-components-layout if you need branding-heavy visual direction, non-Apple interaction patterns, or purely content-display guidance without navigation or structure decisions. If the task is about typography, color systems, or component styling rather than layout selection, another skill is likely a better fit.

How to Improve hig-components-layout skill

Give it hierarchy, not just a feature list

The strongest hig-components-layout usage inputs describe levels of content: what is top-level, what is nested, what gets selected, and what needs to remain visible. “A file browser with folders, file metadata, and preview” is far more useful than “build a dashboard.”

State the real constraint that matters

The most common failure mode is choosing a pattern before the constraint is clear. Tell the skill whether the interface must work on iPhone, iPad, and Mac; whether users need fast section switching; whether content is browsable versus editable; and whether the layout must collapse cleanly. Those constraints often decide between tabs, sidebars, split views, lists, and columns.

Ask for a recommendation plus tradeoff

To improve the first output, ask for both the primary recommendation and the main reason alternatives were rejected. For example: “Recommend the best structure, mention the second-best option, and explain what would make you switch.” That produces a more useful hig-components-layout guide than a one-line pattern label.

Iterate with a concrete screen map

If the first answer is too abstract, respond with a screen inventory: left nav, list, detail pane, inspector, search, or toolbar. Then ask the skill to map each region to a component and identify where hig-components-layout install guidance affects adaptation, such as when a multi-column design should collapse into fewer panes on smaller screens.