hig-components-search
Helps your agent find guidance on Apple navigation components like search fields and page controls. Useful for creating intuitive and easy-to-use user interfaces.
What it does
This tool helps find information on how to create search bars, page controls, and path controls following Apple's design guidelines. It explains where to place them and how they should work to be user-friendly.
When to use it
- ✓When designing an app with a search bar.
- ✓When creating a photo gallery with page navigation.
- ✓When developing a feature showing location within a folder structure.
Example of what to ask your AI
“Show me how to make a search bar that displays results as the user types, following Apple's HIG.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI looks up information in Apple's design guidelines about navigation components. It focuses on how search fields, page controls, and path controls should be designed to be intuitive and efficient.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill hig-components-searchOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/hig-components-search/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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
Search: discoverable with instant feedback. Place search fields where users expect them (top of list, toolbar/navigation bar). Show results as the user types.
Page controls: position in a flat page sequence. For discrete, equally weighted pages (onboarding, photo gallery). Show current page and total count.
Path controls: file hierarchy navigation. macOS path controls display location within a directory structure and allow jumping to any ancestor.
Search scopes narrow large result sets. Provide scope buttons so users can filter without complex queries.
Clear empty states for search. Helpful message suggesting corrections or alternatives, not a blank screen.
Page controls are not for hierarchical navigation. Flat, linear sequences only. Use navigation controllers, tab bars, or sidebars for hierarchy.
Keep path controls concise. Show meaningful segments only. Users can click any segment to navigate directly.
Support keyboard for search. Command-F and system search shortcuts should activate search.
Reference Index
| Reference | Topic | Key content |
|---|---|---|
| search-fields.md | Search fields | Scopes, tokens, instant results, placement |
| page-controls.md | Page controls | Dot indicators, flat page sequences |
| path-controls.md | Path controls | Breadcrumbs, ancestor navigation |
Output Format
- Component recommendation -- search field, page control, or path control, and why.
- Behavior specification -- interaction model (search-as-you-type, swipe for pages, click-to-navigate for paths).
- Platform differences across iOS, iPadOS, macOS, visionOS.
Questions to Ask
- What type of content is being searched or navigated?
- Which platforms?
- How large is the dataset?
- 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 · More developer tools
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Example
User request:
Use @hig-components-search for this task: Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
FAQ
What are 'path controls'?
They are like 'breadcrumbs' showing your location within a folder structure (like on macOS) and allowing easy navigation back to parent folders.
What are 'page controls'?
These are the indicators (usually dots) that show which page in a sequence you are on, like in a photo album or a tutorial.
Can the AI write the code for me?
No, this tool explains design guidelines. You will need to use this information to write the code yourself or ask another AI for coding assistance.
Details
Original description by the author
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
Popularity
- GitHub stars
- 48k
- Ranking position
- #3201
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC