Habilidades Apple HIG: Content Components
📦

Apple HIG: Content Components

Seguro

Diseña Componentes de Interfaz de Usuario de Apple con Confianza

¿Tienes dificultades para implementar gráficos, colecciones o visualizaciones de contenido que se sientan nativos en las plataformas de Apple? Esta skill proporciona las Directrices de Interfaz Humana autoritarias para ayudarte a construir componentes accesibles y adaptables a la plataforma que siguen los principios de diseño de Apple.

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "Apple HIG: Content Components". Necesito mostrar datos de precios de acciones a lo largo del tiempo en una app de iOS. ¿Qué tipo de gráfico debería usar?

Resultado esperado:

Para datos de precios de acciones a lo largo del tiempo, usa un gráfico de líneas con marcas de línea. Las marcas de línea son excelentes para mostrar cómo cambian los valores a lo largo del tiempo y ayudan a las personas a visualizar tendencias. Configura tu gráfico con un rango dinámico en el eje Y para que los datos llenen el área de trazado, y asegúrate de proporcionar etiquetas de accesibilidad para cada punto de datos. Considera agregar soporte de Gráficos de Audio para que los usuarios de VoiceOver puedan escuchar la tendencia. Consulta charts.md para detalles completos de implementación.

Usando "Apple HIG: Content Components". ¿Cómo implemento una vista de colección para tvOS?

Resultado esperado:

En tvOS, las colecciones usan lockups grandes con efectos de paralaje y diseños de estante. La gestión del enfoque es crítica: los elementos deben escalarse y ganar profundidad cuando están enfocados. Usa UICollectionView con diseño composicional, y asegúrate de que tu motor de enfoque siga el patrón de navegación esperado. Los lockups típicamente contienen una imagen con superposición de texto. Consulta lockups.md para patrones específicos de tvOS y collections.md para configuración de diseño.

Auditoría de seguridad

Seguro
v1 • 2/25/2026

Documentation-only skill containing Apple Human Interface Guidelines in Markdown format. No executable code, no runtime behavior, and no security risks. All static analysis findings are false positives from Markdown content (inline code blocks, documentation URLs, and legitimate UI terminology).

8
Archivos escaneados
587
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

45
Arquitectura
100
Mantenibilidad
87
Contenido
33
Comunidad
100
Seguridad
65
Cumplimiento de la especificación

Lo que puedes crear

Desarrollador de iOS Construyendo un Panel de Datos

Un desarrollador de iOS necesita mostrar datos de seguimiento de fitness en gráficos. Esta skill le ayuda a elegir entre marcas de barras y líneas, configurar rangos de ejes e implementar accesibilidad de gráficos de audio.

Dise��ador UI/UX Creando Interfaz de tvOS

Un diseñador está construyendo una app de navegación de medios para Apple TV. Esta skill proporciona orientación sobre componentes lockup, efectos de enfoque y diseños de estante específicos de tvOS.

Desarrollador Multiplataforma Garantizando Accesibilidad

Un desarrollador necesita asegurarse de que su vista de colección funcione correctamente con VoiceOver y Switch Control en todas las plataformas de Apple. Esta skill proporciona requisitos de accesibilidad y orientación de pruebas.

Prueba estos prompts

Selección de Componentes 
Necesito mostrar [tipo de contenido] en mi app de [plataforma]. ¿Qué componente debería usar y por qué?
Implementación de Accesibilidad 
¿Cómo hago que [componente] sea accesible para usuarios de VoiceOver? ¿Qué etiquetas y descripciones necesito?
Comportamiento Específico de Plataforma 
¿Cómo se comporta [componente] diferente en [plataforma] comparado con [otra plataforma]? ¿Qué adaptaciones necesito hacer?
Configuración y Mejores Prácticas 
¿Cuáles son las propiedades clave que debería configurar para [componente]? ¿Cuáles son las mejores prácticas de rendimiento y accesibilidad?

Mejores prácticas

  • Verifica siempre si existe un contexto de diseño en `.claude/apple-design-context.md` antes de hacer preguntas - esta skill se basa en las directrices fundamentales de color, tipografía y accesibilidad
  • Considera el comportamiento específico de la plataforma desde el principio - una colección que funciona en iOS puede necesitar adaptaciones significativas para tvOS (lockups) o visionOS (efectos de profundidad y hover)
  • Diseña la accesibilidad desde el inicio - los gráficos necesitan soporte de gráficos de audio, las imágenes necesitan texto alternativo, y todos los componentes necesitan etiquetas VoiceOver apropiadas

Evitar

  • No elijas un componente basándote solo en la apariencia visual - considera siempre los requisitos de accesibilidad, las convenciones de la plataforma y las características de los datos
  • Evita implementar componentes personalizados desde cero cuando los componentes del sistema (Swift Charts, UICollectionView, WKWebView) proporcionan accesibilidad integrada y adaptación de plataforma
  • No omitas los estados vacíos - las pantallas en blanco confunden a los usuarios; proporciona orientación significativa sobre cómo llenar colecciones vacías o visualizaciones de datos

Preguntas frecuentes

¿Cuál es la diferencia entre una vista de colección y una vista de tabla?
Las vistas de colección soportan diseños complejos de cuadrícula y personalizados usando diseño composicional, mientras que las vistas de tabla están limitadas a listas de una sola columna. Usa colecciones para cuadrículas, cuadrículas-dentro-de-cuadrículas y diseños multicolumna. Usa tablas para listas simples. Ambas soportan fuentes de datos diferenciables y carga diferida para el rendimiento.
¿Debería usar WKWebView o SFSafariViewController?
Usa WKWebView cuando necesites mostrar contenido web en línea dentro de la interfaz de tu app y controlar la experiencia de navegación. Usa SFSafariViewController para navegación web externa - proporciona una interfaz familiar de Safari con modo de lectura, autocompletado y funciones para compartir.
¿Cómo elijo entre marcas de barras, líneas y puntos en gráficos?
Usa marcas de barras para comparar valores entre categorías o mostrar partes de un todo. Usa marcas de línea para mostrar tendencias a lo largo del tiempo cuando los valores representan cambio continuo. Usa marcas de punto para depictar valores distintos individuales y mostrar relaciones entre dos propiedades de datos.
¿Qué es un lockup y cuándo debería usar uno?
Un lockup es una tarjeta de contenido que combina una imagen con texto, típicamente usada para navegación de medios. Los lockups se usan principalmente en tvOS donde aparecen como tarjetas con efectos de paralaje. En otras plataformas, puedes adaptar el patrón lockup para diseños similares basados en tarjetas. Usa lockups al mostrar contenido de medios navegable como películas, programas de TV o productos.
¿Necesito soportar todas las plataformas de Apple mencionadas?
No - soporta solo las plataformas que tu app tenga como objetivo. Sin embargo, ten en cuenta que si más tarde te expandes a otras plataformas, el comportamiento del componente puede diferir significativamente. Por ejemplo, una colección optimizada para interacción táctil en iOS necesita cambios sustanciales para navegación por enfoque en tvOS o efectos de profundidad en visionOS.
¿Cuál es la accesibilidad mínima que necesito implementar para gráficos?
Cada gráfico necesita etiquetas de accesibilidad que describan su propósito y estructura. Proporciona etiquetas individuales para marcas interactivas o grupos significativos de marcas. Soporta Gráficos de Audio para dar a los usuarios de VoiceOver una representación auditiva de las tendencias de datos. Oculta las etiquetas de ejes visibles de las tecnologías de asistencia ya que VoiceOver reporta los valores a través de etiquetas. Consulta charts.md para requisitos completos.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/hig-components-content

Ref.

main

Estructura de archivos

📁 references/

📄 activity-views.md

📄 charts.md

📄 collections.md

📄 color-wells.md

📄 image-views.md

📄 image-wells.md

📄 lockups.md

📄 web-views.md

📄 SKILL.md