hig-components-content
Ajuda seu agente a seguir as diretrizes da Apple para mostrar conteúdo. É útil para criar interfaces bonitas e fáceis de usar.
O que ela faz
Esta ferramenta ajuda você a escolher os componentes certos para exibir informações em aplicativos da Apple, seguindo as diretrizes de design. Ela sugere como apresentar dados, imagens ou conteúdo da web de forma clara e acessível.
Quando usar
- ✓Ao decidir como mostrar gráficos em um app.
- ✓Ao escolher como exibir uma lista de itens.
- ✓Ao precisar de ajuda para apresentar conteúdo web.
Exemplo do que pedir para a IA
“Preciso mostrar um gráfico de vendas em um app para iPhone. Qual componente devo usar?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta compara o que você quer mostrar com os componentes de design recomendados pela Apple. Ela considera o tipo de conteúdo e a plataforma para sugerir a melhor opção.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill hig-components-contentOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/hig-components-content/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Apple HIG: Componentes de Conteúdo
Verifique .claude/apple-design-context.md antes de fazer perguntas. Use o contexto existente e peça apenas informações que ainda não foram abordadas.
Princípios Chave
Adapte-se a diferentes tamanhos e contextos. Componentes de conteúdo devem funcionar em diferentes tamanhos de tela, orientações e configurações de multitarefa. Use Auto Layout e classes de tamanho.
Torne o conteúdo acessível. Gráficos precisam de suporte a áudio-grafia. Imagens precisam de texto alternativo. Coleções precisam de ordem de navegação VoiceOver adequada. Todos os componentes de conteúdo precisam de rótulos e descrições.
Mantenha a hierarquia visual. Use espaçamento, dimensionamento e agrupamento para estabelecer uma hierarquia de informações clara. O conteúdo principal deve ser visualmente proeminente.
Use componentes do sistema primeiro. Avalie UICollectionView, SwiftUI Charts, WKWebView antes de construir componentes personalizados. Componentes do sistema vêm com acessibilidade integrada e adaptação à plataforma.
Respeite as convenções da plataforma. Uma coleção no tvOS usa "lockups" grandes com parallax. A mesma coleção no iOS usa células compactas com alvos de toque. No visionOS, o conteúdo ganha profundidade e efeitos de hover.
Lide com estados vazios. Mostre um estado vazio significativo com orientações sobre como preenchê-lo, não uma tela em branco.
Otimize para desempenho. Use carregamento preguiçoso (lazy loading), reutilização de células, paginação e pré-busca (prefetching) para grandes conjuntos de dados.
Índice de Referência
| Referência | Tópico | Conteúdo Chave |
|---|---|---|
| charts.md | Gráficos | Swift Charts, marcas de barra/linha/área/ponto, acessibilidade de gráficos, áudio-grafia |
| collections.md | Coleções | Layouts de grade/lista, layout composicional, seleção, reordenação, fontes de dados diffable |
| image-views.md | Visualizações de Imagem | Tratamento de proporção, modos de conteúdo, imagens SF Symbol, acessibilidade |
| image-wells.md | Poços de Imagem | Seleção de imagem por arrastar e soltar, específico para macOS, conteúdo de espaço reservado |
| color-wells.md | Poços de Cor | UI de seleção de cor, seletor de cores do sistema, espaços de cores personalizados |
| web-views.md | Visualizações da Web | WKWebView, SFSafariViewController, controles de navegação, restrições de conteúdo |
| activity-views.md | Visualizações de Atividade | Folhas de compartilhamento, itens de atividade, atividades personalizadas, extensões de ação |
| lockups.md | Lockups | Elementos de imagem + texto, layouts de cartão tvOS, efeitos de foco, layouts de prateleira |
Guia de Seleção de Componentes
| Necessidade de Conteúdo | Componente Recomendado | Notas da Plataforma |
|---|---|---|
| Visualizar dados quantitativos | Gráficos (Swift Charts) | iOS 16+, macOS 13+, watchOS 9+ |
| Navegar por uma grade ou lista de itens | Collection View | Layout composicional para arranjos complexos |
| Exibir uma única imagem | Image View | Suporta ajuste de proporção; forneça descrição de acessibilidade |
| Selecionar uma imagem por arrastar ou navegar | Image Well | Principalmente macOS; use seletores de imagem no iOS |
| Selecionar uma cor | Color Well | Aciona o seletor de cores do sistema; macOS, iOS 14+ |
| Mostrar conteúdo da web inline | Web View (WKWebView) | Use SFSafariViewController para navegação externa |
| Compartilhar conteúdo com outros aplicativos | Activity View | Folha de compartilhamento do sistema com tipos de atividade configuráveis |
| Cartão de conteúdo (imagem + texto) | Lockup | Principalmente tvOS; adaptável a outras plataformas |
Formato de Saída
- Recomendação de componente com justificativa, referenciando o arquivo de referência HIG relevante.
- Orientação de configuração -- propriedades chave e configuração.
- Requisitos de acessibilidade para o componente recomendado.
- Notas específicas da plataforma para as plataformas de destino.
Perguntas a Fazer
- Que tipo de conteúdo? (Dados quantitativos, imagens, conteúdo da web, coleção navegável, ação de compartilhamento?)
- Quais plataformas?
- Conteúdo estático ou dinâmico?
- Quanta quantidade de conteúdo? (Poucos itens vs. centenas/milhares afeta a escolha do componente e a otimização.)
Habilidades Relacionadas
- hig-foundations -- Diretrizes de cor, tipografia, acessibilidade e imagem
- hig-patterns -- Padrões de visualização de dados, compartilhamento e carregamento
- hig-components-layout -- Contêineres estruturais (scroll views, listas, split views) que hospedam conteúdo
- hig-platforms -- Comportamento de componentes específicos da plataforma (lockups no tvOS, web views no macOS)
Construído por Raintree Technology · Mais ferramentas para desenvolvedores
Quando Usar
…
Perguntas frequentes
O que são 'componentes de conteúdo'?
São os blocos de construção visuais que você usa para mostrar informações em um aplicativo, como gráficos, listas de imagens ou textos.
Por que seguir as diretrizes da Apple?
Seguir as diretrizes garante que seu aplicativo tenha uma aparência familiar, seja fácil de usar e funcione bem em todos os dispositivos Apple.
A ferramenta me ajuda a criar o design?
Não, ela ajuda a escolher o componente certo. O design visual em si ainda precisa ser feito por um designer ou desenvolvedor.
Detalhes
Descrição original do autor
Apple Human Interface Guidelines for content display components.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3196
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC