hig-components-layout

Visão geral da skill hig-components-layout

O que a skill hig-components-layout cobre

A skill hig-components-layout é um guia de navegação e layout do Apple HIG para escolher e usar os componentes estruturais certos em interfaces de apps. Ela é mais útil quando você precisa decidir entre sidebars, split views, tab bars, tab views, lists, tables, outline views, columns, panels, windows, scroll views, boxes e ornaments para uma UI no estilo Mac ou iPad.

Quem deve usar

Use a skill hig-components-layout se você estiver desenhando arquitetura da informação, reorganizando uma interface poluída ou adaptando um app para diferentes tamanhos de tela. Ela é especialmente relevante para designers de UI, engenheiros de produto e agentes de IA que estão redigindo especificações de interface e precisam de decisões de layout alinhadas ao Apple HIG, em vez de conselhos genéricos sobre “responsive design”.

O que a torna útil

Essa skill é mais forte do que um resumo baseado só em prompt porque codifica lógica de seleção de padrões: quando usar navegação hierárquica, quando manter conteúdo em uma tabela, quando expor detalhes em colunas e quando um panel ou ornament é mais adequado do que outro contêiner persistente. Ela também aponta tradeoffs sensíveis à plataforma, o que reduz a chance de o resultado ficar superdimensionado, duplicado ou difícil de adaptar em telas menores.

Como usar a skill hig-components-layout

Instale e localize a fonte

Instale a skill hig-components-layout com:
npx skills add raintree-technology/apple-hig-skills --skill hig-components-layout

Depois da instalação, comece em skills/hig-components-layout/SKILL.md e então leia as páginas de layout referenciadas em references/ para confirmar as regras de padrão que se aplicam ao seu caso.

Leia estes arquivos primeiro

Para obter o valor decisório mais rápido, leia SKILL.md e as páginas de referência mais relevantes antes de escrever seu prompt:

• references/sidebars.md
• references/split-views.md
• references/tab-bars.md
• references/tab-views.md
• references/lists-and-tables.md
• references/outline-views.md
• references/column-views.md
• references/panels.md

Esses arquivos respondem à pergunta prática para a qual a skill foi criada: o que deve conter o conteúdo, o que deve fazer a navegação e o que precisa permanecer visível.

Como pedir bem

Dê à skill um problema real de UI, e não um pedido vago. Uma boa entrada inclui plataforma, forma do conteúdo e profundidade de navegação. Por exemplo: “Desenhe um app para macOS para navegar projetos, com uma hierarquia de navegação à esquerda, uma lista no meio e uma área de detalhes à direita. Isso deve usar sidebar mais split view, ou tabs?”

Inclua também as restrições que afetam as decisões de layout: se os usuários precisam alternar rápido entre seções, se o conteúdo é hierárquico, se a interface precisa se recolher no iPhone e se o item selecionado precisa de inspeção inline. Esses detalhes permitem que a skill escolha entre os padrões de hig-components-layout usage em vez de cair em um componente familiar por padrão.

Melhor fluxo de trabalho para obter saída de qualidade

Use esta sequência: defina a estrutura do conteúdo, escolha o modelo principal de navegação e depois confirme como ele se recolhe ou se adapta entre plataformas. Se seu prompt de rascunho só nomeia um componente — como “faça uma sidebar” — a skill só consegue otimizar essa suposição; se você descrever a hierarquia da informação, ela pode recomendar o componente certo e explicar o motivo.

Perguntas frequentes sobre a skill hig-components-layout

A hig-components-layout serve só para design de UI da Apple?

Sim, ela é principalmente uma skill de hig-components-layout for UI Design, baseada nas Apple Human Interface Guidelines. Ela funciona melhor quando você quer decisões de layout e navegação que se encaixem em iOS, iPadOS, macOS ou interfaces multi-coluna no estilo Apple.

Em que ela é diferente de um prompt genérico de design?

Um prompt genérico pode gerar um layout plausível, mas hig-components-layout adiciona disciplina de padrão: ajuda a evitar usar uma tabela para dados hierárquicos, uma sidebar para navegação plana entre pares ou um panel quando controles padrão de janela já bastariam. Isso a torna melhor para apoio à decisão, e não apenas para ideação visual.

Ela é amigável para iniciantes?

Sim, desde que você já saiba a forma básica da interface que está construindo. A skill é mais útil quando você consegue descrever seu conteúdo e seus objetivos em linguagem simples, mesmo sem conhecer o termo HIG do padrão.

Quando eu não devo usá-la?

Não dependa de hig-components-layout se você precisa de direção visual com forte peso de branding, padrões de interação que não sejam da Apple ou orientação puramente voltada à exibição de conteúdo sem decisões de navegação ou estrutura. Se a tarefa for sobre tipografia, sistemas de cor ou estilização de componentes em vez de seleção de layout, outra skill provavelmente será mais adequada.

Como melhorar a skill hig-components-layout

Dê hierarquia, não apenas uma lista de recursos

As entradas mais fortes de hig-components-layout usage descrevem níveis de conteúdo: o que é de nível superior, o que está aninhado, o que é selecionado e o que precisa continuar visível. “Um navegador de arquivos com pastas, metadados de arquivo e preview” é muito mais útil do que “crie um dashboard”.

Declare a restrição real que importa

A falha mais comum é escolher um padrão antes de a restrição ficar clara. Diga à skill se a interface precisa funcionar no iPhone, iPad e Mac; se os usuários precisam alternar rapidamente entre seções; se o conteúdo é navegável ou editável; e se o layout precisa se recolher de forma limpa. Essas restrições muitas vezes decidem entre tabs, sidebars, split views, lists e columns.

Peça recomendação com tradeoff

Para melhorar a primeira saída, peça tanto a recomendação principal quanto o principal motivo para descartar as alternativas. Por exemplo: “Recomende a melhor estrutura, cite a segunda melhor opção e explique o que faria você mudar.” Isso produz um hig-components-layout guide mais útil do que uma etiqueta de padrão em uma linha.

Itere com um mapa de tela concreto

Se a primeira resposta vier abstrata demais, responda com um inventário da tela: navegação à esquerda, lista, painel de detalhes, inspector, busca ou barra de ferramentas. Depois peça à skill para mapear cada região a um componente e identificar onde a orientação de hig-components-layout install afeta a adaptação, como quando um design multi-coluna deve se transformar em menos painéis em telas menores.