mobile

ultrahand: mobile

Projete telas de telefone como um artefato Claude interativo que alterna entre três tamanhos de telefone nos modos retrato e paisagem. Cada regra que você aplica está em references/principles.md, e cada regra cita references/sources.md. Os tamanhos e áreas seguras estão em references/presets.md.

1. Coletar requisitos

Pergunte apenas o que você não pode inferir. Resolva estes itens antes de desenhar:

• Plataforma: iOS, Android ou ambos. Se ambos, use alvos de 48 unidades e padrões neutros entre plataformas.
• Escopo: uma tela ou um fluxo. Para um fluxo, liste as telas e como as pessoas se movem entre elas: aba, push, sheet ou modal em tela cheia.
• Tarefa principal: a única coisa para a qual cada tela serve. Essa ação fica dentro do alcance do polegar.
• Conteúdo real: nomes, comprimentos, contagens e as strings plausíveis mais longas. Não projete com lorem ipsum.
• Estados de dados: o que carrega, o que pode ficar vazio e o que pode falhar ou ficar offline.
• Restrições: cores da marca, fontes, um sistema de design existente e se é um aplicativo nativo ou web.
• Tema: procure o tema do projeto (design/THEME.md, *.tokens.json; veja shared/theme/README.md) antes de escolher qualquer cor, tamanho ou espaçamento. Se houver um tema, projete com ele: execute node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html, passe --head theme.html para a construção, use apenas suas propriedades customizadas (var(--color-surface), var(--space-gap-group)), e reutilize os componentes em seu inventário. Quando o design precisar de algo que o tema não possui, use o token mais próximo e liste a adição sob perguntas em aberto; não invente um valor. Sem tema, siga os itens inegociáveis em shared/theme/rules.md e ofereça a skill theme.

2. Ler as referências

Leia references/principles.md e references/presets.md antes de projetar. Use os padrões da própria plataforma (barra de abas, pilha de navegação, sheets) em vez de inventar novos.

3. Compor a tela

Componentes que passam em suas verificações individuais ainda podem resultar em uma tela confusa. Antes de construir, planeje como eles formam seções e como as seções formam a tela, usando as regras de composição do plugin em shared/composition/principles.md:

• Escreva o mapa de seções. Para cada tela, liste suas seções (uma barra de navegação, o conteúdo, uma ação primária e uma barra de abas), a única função de cada uma, seus membros ordenados pela frequência de uso e sua ênfase. Diga o que é conteúdo primário e o que é cromado: o conteúdo domina e o cromado recua.
• Agrupe com espaço. Espaços dentro de um grupo são claramente menores que espaços entre grupos; adicione um contêiner apenas quando o espaço não puder mostrar o grupo.
• Um visual por função, uma ênfase por seção. Mesma função, mesmo estilo; status e rótulos nunca se parecem com botões; o acento forte vai para uma coisa por seção, e estados selecionados usam um tratamento mais discreto.
• Mantenha pequeno. Cerca de três tamanhos de tipo, um fato em um lugar, membros frequentes à vista e raros atrás de um menu. Quando uma mudança adiciona algo, reorganize primeiro e adicione apenas o que merece seu lugar.

4. Construir o artefato canvas

Construa sobre o canvas redimensionável compartilhado do plugin (shared/canvas/; seu README.md contém o contrato completo). Escreva a tela como screen.html e as configurações próprias do design como config.json em uma pasta de trabalho, depois construa:

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/mobile/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<nome do design>" --out index.html

Publique index.html como um artefato. Os presets são small 360 (Android), medium 393 e large 430 (iOS); Rotacionar dá cada um em paisagem, e o fluxo de redimensionamento para 320 fica sob Verificações.

• config.json define title e states (ex.: padrão, carregando, vazio, erro). Para um design somente iOS, defina "initialPreset": "medium"; para iOS e Android juntos, defina "minTarget": 48 para que cada preset seja medido contra o alvo mais restritivo.
• Contrato da tela: um <template id="uh-screen"> com seções [data-screen], e data-nav, data-nav-replace (abas), data-nav-back e data-show-state para cliques. Preencha as bordas com var(--uh-safe-top|right|bottom|left), que seguem o preset e sua rotação; declare tokens que os usam em [data-screen], já que :host não pode vê-los. Responda ao tamanho com @container screen (width >= …), não com @media. Texto em rem; áreas de toque, ícones e gutters em px, para que 200% de texto aumente as palavras, não os controles. Cores com light-dark(). Comportamento vai em window.ultrahandSetup = function (canvas) { … }.
• Partes fixas: empilhe tudo que está fixo na parte inferior (barra de abas, FAB, snackbar) em uma única doca para que nada se sobreponha, e defina scroll-padding em [data-screen] para que o foco role livre das barras fixas [WCAG-2.4.11]. Em altura compacta ou texto 200%, deixe o cabeçalho estático [WCAG-1.4.4].
• Plataforma por preset: small é Android, medium e large são iOS. Siga canvas.size.platform para convenções que diferem, como o controle de voltar, o alinhamento do título e o tamanho do alvo.
• Alternâncias embutidas: claro/escuro, texto 200%, seletor de estado e mostrar alvos de toque (44 pt ou 48 dp em presets Android). Não construa as suas. Chame canvas.refresh() após abrir uma sheet para que a sobreposição de alvos a veja.
• Organize com unidades flexíveis e os insets, não números fixos de dispositivos, para que um design se adapte a cada preset.
• Torne o fluxo principal clicável: as abas alternam, linhas empurram e sheets abrem e fecham. Desenhe sheets e diálogos na tela; nunca use alert, confirm ou prompt.

5. Projetar cada preset

Para cada tela, trabalhe em small, depois medium, depois large, depois cada um em paisagem. Corrija cada problema no tamanho onde ele aparece:

• small (360): o texto e os botões ainda cabem sem truncar informações importantes.
• large (430): o conteúdo não se estica em linhas longas nem deixa espaço morto.
• paisagem: a altura reduzida ainda mostra o campo focado acima do teclado, e a área segura lateral é respeitada. Verifique também com texto 200%: o cabeçalho fixo e a doca juntos devem deixar a maior parte da tela para o conteúdo.

Em seguida, faça uma passagem rápida na verificação de redimensionamento para 320.

6. Autoverificação antes de apresentar

Passe por cada item. Corrija qualquer falha, ou nomeie-a e diga por que é aceitável.

Composição (execute a auditoria de composição, node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs", no maior e no menor tamanho, ou verifique a olho):

• Desfocada, a tela mostra as seções pretendidas, e o conteúdo primário atrai o olhar primeiro. Nenhum ponto brilhante não intencional.
• Cada seção tem uma função, seus membros agrupados por função e frequência, com espaços entre grupos claramente maiores que espaços dentro deles.
• Cada seção tem no máximo um elemento fortemente enfatizado; estados selecionados são discretos.
• Um estilo por função: conte os estilos de controle em cada seção e justifique qualquer extra. Nenhum rótulo ou status se parece com um botão.
• Linhas e seções alinham-se a bordas compartilhadas; cerca de três tamanhos de tipo na tela.
• Nenhum fato mostrado duas vezes, e nada na tela que não sirva a uma tarefa aqui.
• Após uma rodada de mudanças: liste o que foi adicionado; a tela não está mais ocupada do que o necessário.
• Apenas valores do tema: sem cores brutas, sem espaçamento fora da escala de 8 pontos, sem tamanhos de tipo fora da escala, e componentes do inventário reutilizados em vez de reconstruídos (shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

Componentes e plataforma:

• Os alvos de toque têm pelo menos 44 × 44 pt (iOS) ou 48 × 48 dp (Android), com espaçamento, e nunca abaixo de 24 × 24.
• A ação primária é alcançável com um polegar; ações destrutivas estão longe de onde o polegar descansa.
• Nada interativo está sob a barra de status, notch ou indicador de início, em qualquer orientação.
• Há 3–5 abas de nível superior, cada uma com um rótulo de texto, e nenhum hambúrguer solitário.
• Toda sheet tem um botão Fechar ou Cancelar visível e um detent claro, e sheets nunca empilham. Abrir uma move o foco para dentro dela, Esc a fecha e o foco retorna ao abridor [NNG-SHEET].
• A aba selecionada é marcada por mais do que cor, como uma pílula indicadora ou peso [WCAG-1.4] [M3-NAVBAR], e remover algo oferece um Desfazer clicável.
• Todo campo tem um rótulo acima (não um placeholder), o teclado e tipo de preenchimento automático corretos, e permanece visível com o teclado aberto.
• Erros aparecem inline, ao lado do campo, e dizem como corrigir o problema; a entrada digitada é mantida.
• Todo gesto tem uma alternativa visível, e nada luta contra os gestos de borda do sistema.
• O texto do corpo tem 16–17 ou maior, e o layout sobrevive a texto 200% sem perder informação.
• O contraste é de pelo menos 4.5:1 para texto e 3:1 para UI nos modos claro e escuro, e a cor nunca é o único sinal.
• Os estados de carregamento, vazio e erro são projetados, e o carregamento usa o indicador correto para sua duração.
• O design funciona com 320 de largura sem rolagem horizontal, e em paisagem.

7. Apresentar

Compartilhe o link do artefato. Em poucas linhas, declare o mapa de seções (função e ênfase de cada seção), as principais decisões e o princípio por trás de cada uma (cite a chave da fonte), qualquer item de autoverificação que você aceitou com um motivo, e quaisquer adições propostas ao tema (para a skill theme), e quaisquer perguntas em aberto.