hig-components-layout
Faz seu agente entender as diretrizes da Apple para layout e navegação. Isso ajuda a criar apps com boa organização e fluxo.
O que ela faz
Esta ferramenta ajuda a organizar a informação em um aplicativo seguindo as regras de design da Apple. Ela sugere como estruturar menus, listas e telas para que o usuário navegue de forma fácil e intuitiva, adaptando-se a diferentes tamanhos de tela (celular, tablet, computador).
Quando usar
- ✓Ao planejar a estrutura de navegação de um novo aplicativo.
- ✓Ao adaptar um aplicativo para funcionar bem em iPhones e iPads.
- ✓Ao querer que seu aplicativo siga os padrões visuais e de usabilidade da Apple.
Exemplo do que pedir para a IA
“Quero organizar meu aplicativo com menus laterais em tablets e abas na parte inferior em celulares. Como faço isso seguindo as diretrizes da Apple?”
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 analisa a estrutura do seu aplicativo e sugere os melhores padrões de navegação (como barras de abas ou menus laterais) e como eles devem se adaptar a diferentes tamanhos de tela, baseando-se nas recomendações oficiais da Apple.
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-layoutOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/hig-components-layout/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 Layout e Navegação
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
Organize hierarquicamente. Estruture as informações de categorias amplas para detalhes específicos. Barras laterais para seções de nível superior, listas para itens navegáveis, visualizações de detalhes para conteúdo individual.
Use padrões de navegação padrão. Barras de abas para navegação plana entre seções pares (iPhone). Barras laterais para navegação hierárquica profunda (iPad, Mac). Combine o padrão com a arquitetura da informação e a plataforma.
Adapte-se ao tamanho da tela. Três colunas no iPad colapsam para uma única coluna no iPhone. Use classes de tamanho e APIs adaptativas (NavigationSplitView) para adaptação automática.
Suporte multitarefa no iPad. Responda graciosamente ao Split View, Slide Over e Stage Manager. Teste em todas as proporções de divisão e transições de classe de tamanho.
Mantenha a consistência espacial no visionOS. Janelas, volumes e ornamentos em espaço compartilhado. Posicione de forma previsível. Use ornamentos para barras de ferramentas e controles sem ofuscar o conteúdo.
Use visualizações de rolagem para conteúdo que transborda. Habilite paginação para unidades de conteúdo discretas. Suporte pull-to-refresh onde apropriado. Respeite as áreas seguras.
Mantenha a navegação previsível. Os usuários devem sempre saber onde estão, como chegaram lá e como voltar. Use botões de voltar, breadcrumbs e títulos de seção claros.
Prefira componentes do sistema. UINavigationController, UISplitViewController, NavigationSplitView e TabView fornecem adaptabilidade, acessibilidade e restauração de estado integradas.
Índice de Referência
| Referência | Tópico | Conteúdo chave |
|---|---|---|
| sidebars.md | Barras Laterais | Listas de origem, estado de seleção, seções recolhíveis, padrões de iPad/Mac |
| column-views.md | Visualizações de Coluna | Navegação estilo Finder, divulgação progressiva através de colunas |
| outline-views.md | Visualizações de Tópico | Hierarquias expansíveis, triângulos de divulgação, estruturas de árvore |
| split-views.md | Visualizações Divididas | Layouts de duas/três colunas, NavigationSplitView, colapso adaptativo |
| tab-views.md | Visualizações de Aba | Abas segmentadas, abas estilo página, agrupamento de abas do macOS |
| tab-bars.md | Barras de Abas | Barras de abas inferiores (iOS), contagens de crachá, contagem máxima de abas |
| scroll-views.md | Visualizações de Rolagem | Paginação, indicadores de rolagem, preenchimentos de conteúdo, pull-to-refresh |
| windows.md | Janelas | Gerenciamento de janelas do macOS/visionOS, dimensionamento, tela cheia, restauração |
| panels.md | Painéis | Painéis de inspetor, painéis de utilidade, painéis flutuantes, convenções do macOS |
| lists-and-tables.md | Listas e Tabelas | Estilos simples/agrupados/com preenchimento, ações de deslizar, cabeçalhos de seção |
| boxes.md | Caixas | Contêineres de agrupamento de conteúdo, caixas rotuladas, agrupamento do macOS |
| ornaments.md | Ornamentos | Anexos de barra de ferramentas do visionOS, posicionamento, visibilidade |
Seleção de Padrão de Navegação
| Estrutura do App | Padrão Recomendado | Adaptação de Plataforma |
|---|---|---|
| 3-5 seções de nível superior pares | Barra de Abas | iPhone: barra de abas inferior. iPad: barra lateral (.sidebarAdaptable, iPadOS 18+). Mac: barra lateral ou abas da barra de ferramentas |
| Conteúdo hierárquico profundo | Barra Lateral + NavigationSplitView | iPhone: pilha de coluna única. iPad: duas/três colunas. Mac: multi-coluna completa |
| Árvore de arquivos/pastas profunda | Visualização de Coluna | Mac: estilo Finder. iPad: adaptável. iPhone: navegação por push |
| Lista plana com detalhes | Visualização Dividida (duas colunas) | iPhone: pilha de push/pop. iPad/Mac: colunas primária + detalhe |
| Baseado em documento com inspetores | Janela + Painéis | Mac: janela principal com inspetor. iPad: folha ou popover |
| App espacial com ferramentas | Janela + Ornamentos | visionOS: ornamentos na janela. Outras plataformas: barras de ferramentas |
Checklist de Adaptação de Layout
- Largura compacta (iPhone retrato): A navegação colapsa para uma única pilha? Barras de abas visíveis?
- Largura regular (iPad paisagem, Mac): A navegação se expande para barra lateral + detalhe? Espaço bem utilizado?
- Multitarefa (iPad): Adapta-se a todas as proporções de divisão? Funciona no Slide Over?
- Acessibilidade: Suporta Dynamic Type em todos os tamanhos? Ordem do VoiceOver lógica?
- Orientação: O conteúdo se reorganiza entre retrato e paisagem?
…
Perguntas frequentes
O que são 'classes de tamanho'?
São categorias que descrevem o espaço disponível na tela (pequeno, médio, grande), ajudando o aplicativo a se ajustar automaticamente.
O que é 'navegação hierárquica'?
É organizar a informação em níveis, como um organograma, onde você vai do geral para o específico, usando menus e submenus.
O que significa 'multitarefa no iPad'?
É a capacidade do aplicativo de funcionar corretamente quando a tela do iPad está dividida com outros aplicativos ou em janelas flutuantes.
Detalhes
Descrição original do autor
Apple Human Interface Guidelines for layout and navigation components.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #3199
- 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