المهارات Apple HIG: Content Components
📦

Apple HIG: Content Components

آمن

Projete Componentes de UI da Apple com Confiança

Com dificuldade para implementar gráficos, coleções ou exibições de conteúdo que pareçam nativos nas plataformas Apple? Esta habilidade fornece Diretrizes de Interface Humana autoritativas para ajudá-lo a construir componentes acessíveis e adaptativos à plataforma que seguem os princípios de design da Apple.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "Apple HIG: Content Components". Preciso exibir dados de preço de ações ao longo do tempo em um app iOS. Que tipo de gráfico devo usar?

النتيجة المتوقعة:

Para dados de preço de ações ao longo do tempo, use um gráfico de linhas com marcas de linha. Marcas de linha são excelentes para mostrar como valores mudam ao longo do tempo e ajudam pessoas a visualizar tendências. Configure seu gráfico com um intervalo de eixo Y dinâmico para que os dados preencham a área do gráfico, e garanta que você forneça rótulos de acessibilidade para cada ponto de dados. Considere adicionar suporte a Audio Graphs para que usuários do VoiceOver possam ouvir a tendência. Consulte charts.md para detalhes completos de implementação.

استخدام "Apple HIG: Content Components". Como implemento uma visualização de coleção para tvOS?

النتيجة المتوقعة:

No tvOS, coleções usam lockups grandes com efeitos de paralaxe e layouts de prateleira. Gerenciamento de foco é crítico - itens devem escalar e ganhar profundidade quando focados. Use UICollectionView com layout composicional, e garanta que seu motor de foco siga o padrão de navegação esperado. Lockups normalmente contêm uma imagem com sobreposição de texto. Consulte lockups.md para padrões específicos do tvOS e collections.md para configuração de layout.

التدقيق الأمني

آمن
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
الملفات التي تم فحصها
587
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
65
الامتثال للمواصفات

ماذا يمكنك بناءه

Desenvolvedor iOS Criando um Dashboard de Dados

Um desenvolvedor iOS precisa exibir dados de rastreamento de fitness em gráficos. Esta habilidade ajuda a escolher entre marcas de barra e linha, configurar intervalos de eixo e implementar acessibilidade de gráficos de áudio.

Designer UI/UX Criando Interface tvOS

Um designer está criando um app de navegação de mídia para Apple TV. Esta habilidade fornece orientação sobre componentes lockup, efeitos de foco e layouts de prateleira específicos para tvOS.

Desenvolvedor Multiplataforma Garantindo Acessibilidade

Um desenvolvedor precisa garantir que sua visualização de coleção funcione corretamente com VoiceOver e Controle por Switch em todas as plataformas Apple. Esta habilidade fornece requisitos de acessibilidade e orientação de teste.

جرّب هذه الموجهات

Seleção de Componente 
Preciso exibir [tipo de conteúdo] no meu app [plataforma]. Qual componente devo usar e por quê?
Implementação de Acessibilidade 
Como torno [componente] acessível para usuários do VoiceOver? Quais rótulos e descrições preciso?
Comportamento Específico de Plataforma 
Como [componente] se comporta de forma diferente em [plataforma] comparado a [outra plataforma]? Quais adaptações preciso fazer?
Configuração e Melhores Práticas 
Quais são as propriedades principais que devo configurar para [componente]? Quais são as melhores práticas de desempenho e acessibilidade?

أفضل الممارسات

  • Sempre verifique contexto de design existente em `.claude/apple-design-context.md` antes de fazer perguntas - esta habilidade constrói sobre diretrizes fundamentais de cor, tipografia e acessibilidade
  • Considere comportamento específico de plataforma desde cedo - uma coleção que funciona no iOS pode precisar de adaptação significativa para tvOS (lockups) ou visionOS (efeitos de profundidade e hover)
  • Projete acessibilidade desde o início - gráficos precisam de suporte a audio graph, imagens precisam de texto alt, e todos os componentes precisam de rótulos VoiceOver adequados

تجنب

  • Não escolha um componente baseado apenas na aparência visual - sempre considere requisitos de acessibilidade, convenções de plataforma e características dos dados
  • Evite implementar componentes personalizados do zero quando componentes do sistema (Swift Charts, UICollectionView, WKWebView) fornecem acessibilidade incorporada e adaptação de plataforma
  • Não pule estados vazios - telas em branco confundem usuários; forneça orientação significativa sobre como popular coleções vazias ou exibições de dados

الأسئلة المتكررة

Qual é a diferença entre uma visualização de coleção e uma visualização de tabela?
Visualizações de coleção suportam grades complexas e layouts personalizados usando layout composicional, enquanto visualizações de tabela são limitadas a listas de coluna única. Use coleções para grades, grades-dentro-de-grades e layouts de múltiplas colunas. Use tabelas para listas simples. Ambas suportam fontes de dados diffable e carregamento lazy para desempenho.
Devo usar WKWebView ou SFSafariViewController?
Use WKWebView quando precisar exibir conteúdo web inline dentro da interface do seu app e controlar a experiência de navegação. Use SFSafariViewController para navegação web externa - ele fornece uma interface Safari familiar com modo de leitura, preenchimento automático e recursos de compartilhamento.
Como escolho entre marcas de barra, linha e ponto em gráficos?
Use marcas de barra para comparar valores entre categorias ou mostrar partes de um todo. Use marcas de linha para mostrar tendências ao longo do tempo quando valores representam mudança contínua. Use marcas de ponto para descrever valores distintos individuais e mostrar relações entre duas propriedades de dados.
O que é um lockup e quando devo usar um?
Um lockup é um cartão de conteúdo que combina uma imagem com texto, tipicamente usado para navegação de mídia. Lockups são usados principalmente no tvOS onde aparecem como cartões com efeitos de paralaxe. Em outras plataformas, você pode adaptar o padrão lockup para layouts baseados em cartão similares. Use lockups ao exibir conteúdo de mídia navegável como filmes, programas de TV ou produtos.
Preciso suportar todas as plataformas Apple mencionadas?
Não - suporte apenas as plataformas que seu app tem como alvo. No entanto, esteja ciente de que se você expandir para outras plataformas posteriormente, o comportamento do componente pode diferir significativamente. Por exemplo, uma coleção otimizada para interação por toque no iOS precisa de mudanças substanciais para navegação por foco no tvOS ou efeitos de profundidade no visionOS.
Qual é o mínimo de acessibilidade que preciso implementar para gráficos?
Todo gráfico precisa de rótulos de acessibilidade descrevendo seu propósito e estrutura. Forneça rótulos individuais para marcas interativas ou grupos significativos de marcas. Suporte Audio Graphs para dar aos usuários do VoiceOver uma representação auditiva de tendências de dados. Oculte rótulos de eixo visíveis de tecnologias assistivas já que o VoiceOver reporta valores através de rótulos. Consulte charts.md para requisitos completos.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📁 references/

📄 activity-views.md

📄 charts.md

📄 collections.md

📄 color-wells.md

📄 image-views.md

📄 image-wells.md

📄 lockups.md

📄 web-views.md

📄 SKILL.md