Habilidades Apple HIG: Layout and Navigation Components
📦

Apple HIG: Layout and Navigation Components

Seguro

Crie layouts adaptativos de aplicativos Apple com padrões de navegação HIG

Criar aplicativos para múltiplas plataformas Apple requer entender padrões complexos de navegação e adaptação de layout. Esta habilidade fornece as Diretrizes Oficiais de Interface Humana da Apple para sidebars, split views, tab bars e muito mais, garantindo que seu aplicativo siga as convenções da plataforma.

Suporta: Claude Codex Code(CC)
🥉 73 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "Apple HIG: Layout and Navigation Components". Estou criando um editor de documentos com um painel inspetor. Devo usar uma sidebar ou painel?

Resultado esperado:

Para um editor de documentos com inspetor, use um painel (não uma sidebar) no macOS. Sidebars são para navegação primária entre seções, enquanto painéis são para controles secundários e propriedades que complementam o conteúdo principal. No iPad, apresente o inspetor como um popover ou sheet. Referência: panels.md para padrões de inspetor, sidebars.md para padrões de navegação primária.

A utilizar "Apple HIG: Layout and Navigation Components". Como lido com tab bars quando tenho 6 seções de nível superior?

Resultado esperado:

Tab bars do iOS suportam máximo de 5 abas visíveis. Com 6 seções, use uma aba 'More' para seções adicionais. No entanto, considere se 6 seções de nível superior indicam uma oportunidade de reestruturar com uma sidebar (iPad) ou navegação aninhada. Para iPadOS 18+, use .sidebarAdaptable para mostrar automaticamente sidebar no iPad e tab bar no iPhone. Referência: tab-bars.md para orientação sobre contagem de abas, sidebars.md para padrões alternativos.

Auditoria de Segurança

Seguro
v1 • 2/25/2026

This skill contains only documentation markdown files referencing Apple Human Interface Guidelines. All 768 static analysis findings are false positives: backtick patterns are markdown code blocks with API names, URLs link to official Apple Developer documentation, and cryptographic/C2 keywords are spurious text matches in design documentation. No executable code, network calls, or system commands present.

12
Arquivos analisados
1,169
Linhas analisadas
0
achados
1
Total de auditorias
Nenhum problema de segurança encontrado
Auditado por: claude

Pontuação de qualidade

45
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
100
Segurança
65
Conformidade com especificações

O Que Você Pode Construir

Design de Navegação de App iOS

Um desenvolvedor criando seu primeiro app para iPad precisa decidir entre tab bars e sidebars para navegação. A habilidade explica quando usar cada padrão e como o NavigationSplitView se adapta entre classes de tamanho.

Estratégia de Layout Multi-Plataforma

Uma equipe lançando no iPhone, iPad e Mac precisa de uma estratégia unificada de navegação. A habilidade fornece a checklist de adaptação e tabela de seleção de padrões para planejar layouts responsivos.

Layout Espacial visionOS

Um desenvolvedor criando seu primeiro app visionOS precisa entender janelas, volumes e ornaments. A habilidade explica posicionamento espacial e padrões de anexação de ornaments.

Tente Estes Prompts

Seleção básica de padrão de navegação 
Estou criando um app com 4 seções principais: Home, Search, Library e Settings. Qual padrão de navegação devo usar para iPhone vs iPad?
Orientação de layout adaptativo 
Meu app usa layout de três colunas no iPad mas quebra no iPhone. Como devo adaptar isso usando NavigationSplitView?
Convenções específicas de plataforma 
Quais são as diferenças entre sidebars do macOS e sidebars do iPad? Quando devo usar cada padrão?
Suporte avançado a multitarefa 
Meu app para iPad precisa suportar Split View, Slide Over e Stage Manager. Quais transições de classe de tamanho devo testar e como lidá-las?

Melhores Práticas

  • Sempre verifique por apple-design-context.md existente antes de fazer perguntas - use informações já disponíveis
  • Combine o padrão de navegação com a profundidade da arquitetura de informação: estruturas rasas usam tab bars, hierarquias profundas usam sidebars
  • Teste adaptação de layout em cada transição de classe de tamanho e proporção de multitarefa do iPad

Evitar

  • Usar tab bars no iPad quando sidebar lidaria melhor com hierarquias profundas
  • Criar layouts de largura fixa que não se adaptam a classes de tamanho compact vs regular
  • Ignorar convenções espaciais do visionOS ao segmentar Apple Vision Pro

Perguntas Frequentes

Quando devo usar uma sidebar vs uma tab bar?
Use tab bars para 3-5 seções de nível superior pares com navegação plana (iPhone). Use sidebars para navegação hierárquica profunda ou quando tiver muitas seções (iPad, Mac). iPadOS 18+ suporta .sidebarAdaptable que mostra automaticamente sidebar no iPad e tab bar no iPhone.
Como faço meu layout funcionar tanto no iPhone quanto no iPad?
Use componentes adaptativos como NavigationSplitView e modificadores SizeClass. Projete primeiro para largura compacta (iPhone), depois expanda para largura regular (iPad/Mac). Teste em cada transição de classe de tamanho e use a checklist de adaptação da habilidade.
Qual é o número máximo de abas que posso mostrar em uma tab bar?
Tab bars do iOS exibem máximo de 5 abas. Itens adicionais vão para uma seção 'More'. Se você precisa de mais de 5 seções de nível superior, considere reestruturar com uma sidebar ou hierarquia de navegação aninhada.
Como suporto multitarefa do iPad (Split View, Slide Over)?
Teste seu app em cada proporção de divisão de estreita para larga. Garanta que o conteúdo se reorganize apropriadamente e a navegação se adapte. Use auto-layout e classes de tamanho em vez de dimensões fixas. Referência: split-views.md e windows.md para orientação de multitarefa.
O que são ornaments no visionOS?
Ornaments são elementos UI do visionOS anexados a janelas para toolbars e controles sem ocluir conteúdo. Eles aparecem nas bordas da janela (top, bottom, leading, trailing). Use ornaments para controles persistentes mantendo o conteúdo principal visível. Referência: ornaments.md.
Devo usar SwiftUI ou UIKit para componentes de navegação?
SwiftUI fornece adaptividade integrada com NavigationSplitView, TabView e NavigationStack que lidam automaticamente com mudanças de classe de tamanho. UIKit requer mais trabalho manual com UISplitViewController e UINavigationController. Para novos apps, prefira SwiftUI a menos que tenha requisitos específicos do UIKit.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

Repositório

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

Referência

main

Estrutura de arquivos

📁 references/

📄 boxes.md

📄 column-views.md

📄 lists-and-tables.md

📄 ornaments.md

📄 outline-views.md

📄 panels.md

📄 scroll-views.md

📄 sidebars.md

📄 split-views.md

📄 tab-bars.md

📄 tab-views.md

📄 windows.md

📄 SKILL.md