multiAI Summary Pending

hig-components-search

Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.

28,273 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/hig-components-search/SKILL.md --create-dirs "https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/plugins/antigravity-awesome-skills-claude/skills/hig-components-search/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/hig-components-search/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How hig-components-search Compares

Feature / Agenthig-components-searchStandard Approach
Platform SupportmultiLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Apple HIG: Navigation Components

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

## Key Principles

1. **Search: discoverable with instant feedback.** Place search fields where users expect them (top of list, toolbar/navigation bar). Show results as the user types.

2. **Page controls: position in a flat page sequence.** For discrete, equally weighted pages (onboarding, photo gallery). Show current page and total count.

3. **Path controls: file hierarchy navigation.** macOS path controls display location within a directory structure and allow jumping to any ancestor.

4. **Search scopes narrow large result sets.** Provide scope buttons so users can filter without complex queries.

5. **Clear empty states for search.** Helpful message suggesting corrections or alternatives, not a blank screen.

6. **Page controls are not for hierarchical navigation.** Flat, linear sequences only. Use navigation controllers, tab bars, or sidebars for hierarchy.

7. **Keep path controls concise.** Show meaningful segments only. Users can click any segment to navigate directly.

8. **Support keyboard for search.** Command-F and system search shortcuts should activate search.

## Reference Index

| Reference | Topic | Key content |
|---|---|---|
| [search-fields.md](references/search-fields.md) | Search fields | Scopes, tokens, instant results, placement |
| [page-controls.md](references/page-controls.md) | Page controls | Dot indicators, flat page sequences |
| [path-controls.md](references/path-controls.md) | Path controls | Breadcrumbs, ancestor navigation |

## Output Format

1. **Component recommendation** -- search field, page control, or path control, and why.
2. **Behavior specification** -- interaction model (search-as-you-type, swipe for pages, click-to-navigate for paths).
3. **Platform differences** across iOS, iPadOS, macOS, visionOS.

## Questions to Ask

1. What type of content is being searched or navigated?
2. Which platforms?
3. How large is the dataset?
4. Is search the primary interaction?

## Related Skills

- **hig-components-menus** -- Toolbars and menu bars hosting search and navigation controls
- **hig-components-controls** -- Text fields, pickers, segmented controls in search interfaces
- **hig-components-dialogs** -- Popovers and sheets for expanded search or filtering
- **hig-patterns** -- Navigation patterns and information architecture
- **hig-foundations** -- Typography and layout for navigation components

---

*Built by [Raintree Technology](https://raintree.technology) · [More developer tools](https://raintree.technology)*

## When to Use
This skill is applicable to execute the workflow or actions described in the overview.