Compétences Apple HIG: Content Components
📦

Apple HIG: Content Components

Sûr

Concevoir des Composants UI Apple en toute Confiance

Vous avez du mal à implémenter des graphiques, des collections ou des affichages de contenu qui semblent natifs aux plateformes Apple ? Cette compétence fournit des directives autorisées des Human Interface Guidelines pour vous aider à construire des composants accessibles et adaptés à la plateforme qui suivent les principes de design d'Apple.

Prend en charge: Claude Codex Code(CC)
📊 70 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "Apple HIG: Content Components". I need to display stock price data over time in an iOS app. What chart type should I use?

Résultat attendu:

Pour des données de prix d'action dans le temps, utilisez un graphique linéaire avec des marques line. Les marques line excellent pour montrer comment les valeurs changent dans le temps et aident les personnes à visualiser les tendances. Configurez votre graphique avec une plage d'axe Y dynamique pour que les données remplissent la zone de tracé, et assurez-vous de fournir des étiquettes d'accessibilité pour chaque point de données. Envisagez d'ajouter la prise en charge des Audio Graphs pour que les utilisateurs VoiceOver puissent entendre la tendance. Référez-vous à charts.md pour les détails complets de l'implémentation.

Utilisation de "Apple HIG: Content Components". How do I implement a collection view for tvOS?

Résultat attendu:

Sur tvOS, les collections utilisent des lockups volumineux avec des effets parallaxe et des layouts shelf. La gestion du focus est critique - les éléments doivent s'agrandir et gagner en profondeur lorsqu'ils sont focalisés. Utilisez UICollectionView avec un layout compositionnel, et assurez-vous que votre moteur de focus suit le modèle de navigation attendu. Les lockups contiennent généralement une image avec superposition de texte. Voir lockups.md pour les modèles spécifiques à tvOS et collections.md pour la configuration du layout.

Audit de sécurité

Sûr
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
Fichiers analysés
587
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

45
Architecture
100
Maintenabilité
87
Contenu
33
Communauté
100
Sécurité
65
Conformité aux spécifications

Ce que vous pouvez construire

Développeur iOS Créant un Tableau de Bord de Données

Un développeur iOS doit afficher des données de suivi fitness dans des graphiques. Cette compétence l'aide à choisir entre les marques bar et line, configurer les plages d'axes et implémenter l'accessibilité des graphiques audio.

Designer UI/UX Créant une Interface tvOS

Un designer construit une application de navigation média pour Apple TV. Cette compétence fournit des conseils sur les composants lockup, les effets de focus et les layouts shelf spécifiques à tvOS.

Développeur Multiplateforme Garantissant l'Accessibilité

Un développeur doit s'assurer que sa collection view fonctionne correctement avec VoiceOver et Switch Control sur toutes les plateformes Apple. Cette compétence fournit les exigences d'accessibilité et les conseils de test.

Essayez ces prompts

Sélection de Composant 
Je dois afficher [type de contenu] dans mon application [plateforme]. Quel composant dois-je utiliser et pourquoi ?
Implémentation de l'Accessibilité 
Comment rendre [composant] accessible pour les utilisateurs VoiceOver ? Quelles étiquettes et descriptions dois-je fournir ?
Comportement Spécifique à la Plateforme 
Comment [composant] se comporte-t-il différemment sur [plateforme] par rapport à [autre plateforme] ? Quelles adaptations dois-je faire ?
Configuration et Meilleures Pratiques 
Quelles sont les propriétés clés que je dois configurer pour [composant] ? Quelles sont les meilleures pratiques de performance et d'accessibilité ?

Bonnes pratiques

  • Vérifiez toujours le contexte de design existant dans `.claude/apple-design-context.md` avant de poser des questions - cette compétence s'appuie sur les directives fondamentales de couleur, typographie et accessibilité
  • Considérez le comportement spécifique à la plateforme dès le début - une collection qui fonctionne sur iOS peut nécessiter une adaptation significative pour tvOS (lockups) ou visionOS (profondeur et effets de survol)
  • Concevez l'accessibilité dès le départ - les graphiques ont besoin de la prise en charge des graphiques audio, les images ont besoin de texte alternatif, et tous les composants ont besoin d'étiquettes VoiceOver appropriées

Éviter

  • Ne choisissez pas un composant uniquement sur son apparence visuelle - considérez toujours les exigences d'accessibilité, les conventions de la plateforme et les caractéristiques des données
  • Évitez d'implémenter des composants personnalisés à partir de zéro lorsque les composants système (Swift Charts, UICollectionView, WKWebView) fournissent une accessibilité intégrée et une adaptation à la plateforme
  • Ne sautez pas les états vides - les écrans vides déroutent les utilisateurs ; fournissez des conseils significatifs sur la façon de remplir les collections ou affichages de données vides

Foire aux questions

Quelle est la différence entre une collection view et une table view ?
Les collection views prennent en charge des grilles complexes et des layouts personnalisés utilisant le layout compositionnel, tandis que les table views sont limitées à des listes à colonne unique. Utilisez les collections pour les grilles, grilles-dans-grilles et layouts multi-colonnes. Utilisez les tables pour les listes simples. Les deux prennent en charge les sources de données différentiables et le chargement différé pour les performances.
Dois-je utiliser WKWebView ou SFSafariViewController ?
Utilisez WKWebView lorsque vous devez afficher du contenu web en ligne dans l'interface de votre application et contrôler l'expérience de navigation. Utilisez SFSafariViewController pour la navigation web externe - il fournit une interface Safari familière avec le mode lecture, auto-remplissage et fonctionnalités de partage.
Comment choisir entre les marques bar, line et point dans les graphiques ?
Utilisez les marques bar pour comparer des valeurs entre catégories ou montrer des parties d'un tout. Utilisez les marques line pour montrer des tendances dans le temps lorsque les valeurs représentent un changement continu. Utilisez les marques point pour dépeindre des valeurs distinctes individuelles et montrer les relations entre deux propriétés de données.
Qu'est-ce qu'un lockup et quand dois-je en utiliser un ?
Un lockup est une carte de contenu qui combine une image avec du texte, généralement utilisée pour la navigation média. Les lockups sont principalement utilisés sur tvOS où ils apparaissent comme des cartes avec des effets parallaxe. Sur d'autres plateformes, vous pouvez adapter le modèle lockup pour des layouts similaires basés sur des cartes. Utilisez les lockups lors de l'affichage de contenu média navigable comme des films, séries TV ou produits.
Dois-je prendre en charge toutes les plateformes Apple mentionnées ?
Non - prenez en charge uniquement les plateformes que votre application cible. Cependant, soyez conscient que si vous vous étendez ultérieurement à d'autres plateformes, le comportement des composants peut différer considérablement. Par exemple, une collection optimisée pour l'interaction tactile iOS nécessite des modifications substantielles pour la navigation focus tvOS ou les effets de profondeur visionOS.
Quelle est l'accessibilité minimale que je dois implémenter pour les graphiques ?
Chaque graphique a besoin d'étiquettes d'accessibilité décrivant son objectif et sa structure. Fournissez des étiquettes individuelles pour les marques interactives ou groupes significatifs de marques. Prenez en charge les Audio Graphs pour donner aux utilisateurs VoiceOver une représentation auditive des tendances des données. Masquez les étiquettes d'axe visibles des technologies d'assistance puisque VoiceOver rapporte les valeurs via les étiquettes. Voir charts.md pour les exigences complètes.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📁 references/

📄 activity-views.md

📄 charts.md

📄 collections.md

📄 color-wells.md

📄 image-views.md

📄 image-wells.md

📄 lockups.md

📄 web-views.md

📄 SKILL.md