# Hig Components Search > HIG de Apple para search fields, page controls y path controls: búsqueda con feedback, paginación plana y breadcrumbs de archivos. Fuente: https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-search Markdown: https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-search.md Repositorio: https://github.com/raintree-technology/hig-doctor Autor: raintree-technology Licencia: MIT Actualizado: hace 3 meses Coste de contexto: 137 tok instalada, 828 tok al activarse, 2.5k tok con todos los archivos del bundle Bundle: 4 archivos, 10 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add raintree-technology/hig-doctor --skill hig-components-search --agent claude-code # Cursor npx -y skills add raintree-technology/hig-doctor --skill hig-components-search --agent cursor # Codex npx -y skills add raintree-technology/hig-doctor --skill hig-components-search --agent codex # Gemini CLI npx -y skills add raintree-technology/hig-doctor --skill hig-components-search --agent gemini # Windsurf npx -y skills add raintree-technology/hig-doctor --skill hig-components-search --agent windsurf # Cline npx -y skills add raintree-technology/hig-doctor --skill hig-components-search --agent cline ``` ## Qué hace - Aplica HIG a search fields, page controls y path controls (breadcrumbs de jerarquía de archivos en macOS). - Search con feedback al escribir, scopes para acotar, atajo Command-F y empty states útiles. - Page controls solo para secuencias planas; no para navegación jerárquica. ## Cuándo usarla - El usuario pregunta cómo debe funcionar la búsqueda, necesita un breadcrumb o cómo paginar contenido. - Hay que diseñar search bar, page control, path control o scopes de búsqueda. ## Qué la activa - "¿Cómo debe funcionar la búsqueda en mi app?" - "Necesito un breadcrumb en macOS" - "¿Page control o navegación jerárquica?" ## Archivos - SKILL.md — 3 KB - references/page-controls.md — 2 KB - references/path-controls.md — 860 B - references/search-fields.md — 4 KB ## SKILL.md Reproducido tal cual desde raintree-technology/hig-doctor bajo MIT. Esta sección es el documento original y está en inglés. # 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)* ## Dónde encaja - Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual. - Creador: [raintree-technology](https://skillsagentes.com/creators/raintree-technology.md) — 14 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Hig Components System](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-system.md): HIG de Apple para experiencias de sistema: widgets, Live Activities, notificaciones, complications, App Clips y shortcuts. - [Hig Components Controls](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-controls.md): HIG de Apple para controles de selección y entrada: pickers, toggles, sliders, steppers, segmented controls, campos de texto y teclados virtuales. - [Hig Components Dialogs](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-dialogs.md): HIG de Apple para presentación: alerts, action sheets, popovers, sheets y digit entry. Cuándo interrumpir y cómo confirmar acciones destructivas. - [Hig Components Layout](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-layout.md): HIG de Apple para layout y navegación: sidebars, split views, tab bars, lists, tables y windows, adaptados a cada tamaño de pantalla. - [Hig Components Content](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-content.md): HIG de Apple para componentes de contenido: charts, collection views, imágenes, web views, lockups y visualización de datos. ## Skills relacionadas - [Hig Components Content](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-content.md): HIG de Apple para componentes de contenido: charts, collection views, imágenes, web views, lockups y visualización de datos. - [Hig Components System](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-system.md): HIG de Apple para experiencias de sistema: widgets, Live Activities, notificaciones, complications, App Clips y shortcuts. - [Hig Components Controls](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-controls.md): HIG de Apple para controles de selección y entrada: pickers, toggles, sliders, steppers, segmented controls, campos de texto y teclados virtuales. - [Hig Components Dialogs](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-dialogs.md): HIG de Apple para presentación: alerts, action sheets, popovers, sheets y digit entry. Cuándo interrumpir y cómo confirmar acciones destructivas. - [Hig Components Layout](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-layout.md): HIG de Apple para layout y navegación: sidebars, split views, tab bars, lists, tables y windows, adaptados a cada tamaño de pantalla. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)