# Hig Components Content > HIG de Apple para componentes de contenido: charts, collection views, imágenes, web views, lockups y visualización de datos. Fuente: https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-content Markdown: https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-content.md Repositorio: https://github.com/raintree-technology/hig-doctor Autor: raintree-technology Licencia: MIT Actualizado: hace 3 meses Coste de contexto: 205 tok instalada, 1.3k tok al activarse, 4.5k tok con todos los archivos del bundle Bundle: 9 archivos, 18 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-content --agent claude-code # Cursor npx -y skills add raintree-technology/hig-doctor --skill hig-components-content --agent cursor # Codex npx -y skills add raintree-technology/hig-doctor --skill hig-components-content --agent codex # Gemini CLI npx -y skills add raintree-technology/hig-doctor --skill hig-components-content --agent gemini # Windsurf npx -y skills add raintree-technology/hig-doctor --skill hig-components-content --agent windsurf # Cline npx -y skills add raintree-technology/hig-doctor --skill hig-components-content --agent cline ``` ## Qué hace - Aplica las HIG de Apple a componentes de contenido: charts, collection views, image/web views, color wells, lockups y hojas de compartir. - Prioriza componentes de sistema (UICollectionView, SwiftUI Charts, WKWebView), accesibilidad y estados vacíos. - Adapta el mismo contenido a iOS, tvOS y visionOS (lockups, celdas táctiles, profundidad). ## Cuándo usarla - El usuario pregunta por charts, collection view, image view, web view, lockup o visualización de datos en apps Apple. - Hay que decidir cómo mostrar imágenes, una cuadrícula de ítems o una share sheet. ## Qué la activa - "¿Cómo debo mostrar gráficos en esta app de iOS?" - "¿Uso un web view o renderizo yo el contenido?" - "Cómo montar una cuadrícula de ítems accesible" ## Archivos - SKILL.md — 5 KB - references/activity-views.md — 2 KB - references/charts.md — 5 KB - references/collections.md — 1 KB - references/color-wells.md — 830 B - references/image-views.md — 1 KB - references/image-wells.md — 916 B - references/lockups.md — 883 B - references/web-views.md — 857 B ## 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: Content 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. **Adapt to different sizes and contexts.** Content components must work across screen sizes, orientations, and multitasking configurations. Use Auto Layout and size classes. 2. **Make content accessible.** Charts need audio graph support. Images need alt text. Collections need proper VoiceOver navigation order. All content components need labels and descriptions. 3. **Maintain visual hierarchy.** Use spacing, sizing, and grouping to establish clear information hierarchy. Primary content should be visually prominent. 4. **Use system components first.** Evaluate UICollectionView, SwiftUI Charts, WKWebView before building custom. System components come with built-in accessibility and platform adaptation. 5. **Respect platform conventions.** A collection on tvOS uses large lockups with parallax. The same collection on iOS uses compact cells with touch targets. On visionOS, content gains depth and hover effects. 6. **Handle empty states.** Show a meaningful empty state with guidance on how to populate it, not a blank screen. 7. **Optimize for performance.** Use lazy loading, cell reuse, pagination, and prefetching for large datasets. ## Reference Index | Reference | Topic | Key content | |---|---|---| | [charts.md](references/charts.md) | Charts | Swift Charts, bar/line/area/point marks, chart accessibility, audio graphs | | [collections.md](references/collections.md) | Collections | Grid/list layouts, compositional layout, selection, reordering, diffable data sources | | [image-views.md](references/image-views.md) | Image Views | Aspect ratio handling, content modes, SF Symbol images, accessibility | | [image-wells.md](references/image-wells.md) | Image Wells | Drag-and-drop image selection, macOS-specific, placeholder content | | [color-wells.md](references/color-wells.md) | Color Wells | Color selection UI, system color picker, custom color spaces | | [web-views.md](references/web-views.md) | Web Views | WKWebView, SFSafariViewController, navigation controls, content restrictions | | [activity-views.md](references/activity-views.md) | Activity Views | Share sheets, activity items, custom activities, action extensions | | [lockups.md](references/lockups.md) | Lockups | Image+text elements, tvOS card layouts, focus effects, shelf layouts | ## Component Selection Guide | Content Need | Recommended Component | Platform Notes | |---|---|---| | Visualizing quantitative data | Charts (Swift Charts) | iOS 16+, macOS 13+, watchOS 9+ | | Browsing a grid or list of items | Collection View | Compositional layout for complex arrangements | | Displaying a single image | Image View | Support aspect ratio fitting; provide accessibility description | | Selecting an image via drag or browse | Image Well | macOS primarily; use image pickers on iOS | | Selecting a color | Color Well | Triggers system color picker; macOS, iOS 14+ | | Showing web content inline | Web View (WKWebView) | Use SFSafariViewController for external browsing | | Sharing content to other apps | Activity View | System share sheet with configurable activity types | | Content card (image + text) | Lockup | Primarily tvOS; adaptable to other platforms | ## Output Format 1. **Component recommendation with rationale**, referencing the relevant HIG reference file. 2. **Configuration guidance** -- key properties and setup. 3. **Accessibility requirements** for the recommended component. 4. **Platform-specific notes** for targeted platforms. ## Questions to Ask 1. What type of content? (Quantitative data, images, web content, browsable collection, share action?) 2. Which platforms? 3. Static or dynamic content? 4. How much content? (Few items vs hundreds/thousands affects component choice and optimization.) ## Related Skills - **hig-foundations** -- Color, typography, accessibility, and image guidelines - **hig-patterns** -- Data visualization, sharing, and loading patterns - **hig-components-layout** -- Structural containers (scroll views, lists, split views) hosting content - **hig-platforms** -- Platform-specific component behavior (lockups on tvOS, web views on macOS) --- *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 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 Menus](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-menus.md): HIG de Apple para menús y botones: menu bar, toolbars, context menus, action buttons, pop-up y pull-down. - [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. ## Skills relacionadas - [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 Menus](https://skillsagentes.com/skills/raintree-technology/hig-doctor/hig-components-menus.md): HIG de Apple para menús y botones: menu bar, toolbars, context menus, action buttons, pop-up y pull-down. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)