tablet

ultrahand: tablet

Projete telas de tablet como um artefato interativo do Claude. O artefato alterna entre tamanhos de iPad e Android Tablet em ambas as orientações, ajusta-se a larguras de divisão (1/3, 1/2, 2/3) e faz reflow ao vivo enquanto você arrasta uma janela de largura total até 320. Cada regra aplicada está em references/principles.md, e cada regra cita references/sources.md. Os tamanhos, divisões e classes de tamanho estão em references/presets.md.

1. Coletar requisitos

Pergunte apenas o que você não pode inferir. Decida antes de desenhar:

• Plataforma: iPadOS, Android ou ambos. Se ambos, use alvos de 48 unidades e padrões neutros de plataforma.
• Escopo: uma tela ou um fluxo. Para um fluxo, liste as telas e como as pessoas navegam entre elas: barra lateral ou trilho, lista para detalhe, folha, popover ou nova janela.
• Tarefa principal: a única finalidade de cada tela e qual layout canônico se encaixa (lista-detalhe, painel de suporte, feed ou painel único).
• Conteúdo real: nomes, comprimentos, contagens e as maiores strings plausíveis. 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.
• Entradas: apenas toque, ou também teclado, trackpad ou mouse, ou Pencil. Presuma que todos são possíveis, a menos que informado o contrário.
• Multitarefa: o que as pessoas fazem além deste aplicativo (referência lado a lado, arrastar conteúdo para dentro ou para fora). Espere janelas de 320 de largura até a tela cheia.
• 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, 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 personalizadas (var(--color-surface), var(--space-gap-group)), e reutilize os componentes do seu inventário. Quando o design precisar de algo que o tema não oferece, use o token mais próximo e liste a adição em perguntas em aberto; não invente um valor. Sem tema, siga os itens não negociá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 próprios da plataforma (barra lateral ou trilho, visão dividida, popovers, comandos de barra de menu) 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 lateral, um painel de lista, um painel de detalhe com sua barra de ferramentas e um inspetor), a função única de cada uma, seus membros ordenados por frequência de uso e sua única ênfase. Diga o que é conteúdo primário e o que é cromado: o conteúdo domina e o cromado recua.
• Agrupe com espaço. Os espaços dentro de um grupo são claramente menores do que os 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 suave.
• Mantenha pequeno. Cerca de três tamanhos de tipo, um fato em um só 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 tem 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/tablet/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<nome do design>" --out index.html

Publique index.html como um artefato. De references/presets.md o canvas obtém:

• Tela cheia: ipad-mini 744, ipad 820, ipad-13 1032 e android-tablet 800. A rotação fornece cada um em paisagem.
• Visão dividida: ipad-split, ipad-13-split e android-split, o dispositivo em paisagem com seu aplicativo de um lado do divisor. O divisor ajusta-se a 1/3, 1/2 e 2/3 (arraste-o, ou foque-o e pressione as teclas de seta); Cheia é a predefinição de tela cheia em paisagem.
• Redimensionamento livre: alças de arrasto do tamanho predefinido até 320 × 450.
• Verificações: reflow a 320 de largura e paisagem com o teclado ativo (1180 × 420).

Ao arrastar, o layout deve fazer reflow ao vivo. Ir da largura total para metade da largura deve re-renderizar continuamente, cruzando os pontos de interrupção 840 e 600 sem recarregar e sem perder estado. A leitura mostra a largura atual e sua classe de tamanho (compacto, médio, expandido, grande).

• config.json define title e states (por exemplo, padrão, carregando, vazio, erro). Para um design apenas Android, defina "initialPreset": "android-tablet"; para iPadOS e Android juntos, defina "minTarget": 48.
• Contrato da tela: um <template id="uh-screen"> com seções [data-screen], e data-nav, data-nav-replace, data-nav-back e data-show-state para cliques. Organize por classe de tamanho com @container screen (width >= 600px) e (width >= 840px), ou o data-width-class da viewport, nunca por predefinição ou @media. Preencha as bordas com var(--uh-safe-*), declarado em [data-screen] (:host não pode vê-los). Texto em rem; áreas de toque, ícones e gutters em px, para que o texto 200% aumente as palavras, não os controles. Cores com light-dark(). O comportamento vai em window.ultrahandSetup = function (canvas) { … }.
• Alternâncias integradas: claro/escuro, texto 200%, o seletor de estado e mostrar alvos de toque. Não construa as suas próprias. Chame canvas.refresh() após abrir uma folha, popover ou menu.
• Ponteiro e teclado estão sempre ativos: o espectador dirige o artefato com um mouse e teclado, portanto, dê a cada controle um estado de hover, um menu de contexto de clique direito onde a plataforma tem um, foco :focus-visible visível e dicas de atalho. Verifique o toque com a sobreposição de alvos de toque. Não oculte nada disso atrás de uma alternância própria.
• Nos estados de iPad em janela, mantenha os controles da barra de ferramentas iniciais longe dos controles de janela superiores esquerdos.
• Torne o fluxo principal clicável: navegação alterna, linhas selecionam ou empurram, painéis ocultam e mostram, e folhas e popovers abrem e fecham. Nunca use alert, confirm ou prompt.

5. Projetar cada classe de tamanho

Trabalhe do largo para o estreito e corrija cada problema no tamanho onde ele aparece:

1. Expandido / grande, tela cheia paisagem (por exemplo, ipad 1180): escolha os painéis, navegação (barra lateral ou trilho) e densidade. Limite comprimentos de linha e larguras de controle.
2. Médio, retrato tela cheia e divisão 2/3 (por exemplo, 820, 787): colapse para menos painéis, com um trilho ou uma barra de guias superior.
3. Compacto, divisões 1/2 e 1/3 (por exemplo, 590, 393): o layout de telefone, com uma barra inferior ou barra de guias, um painel de cada vez e Voltar para a lista.
4. Arraste lentamente da largura total até 320 e de volta. Verifique se a seleção, a posição de rolagem e o texto digitado sobrevivem. Verifique se lista-detalhe mantém o detalhe aberto quando estreita e seleciona esse item quando alarga.

Em seguida, verifique os casos extras: reflow a 320 de largura, paisagem com o teclado ativo e a predefinição android-tablet (se Android estiver no escopo) em ambas as orientações.

6. Autoverificação antes de apresentar

Percorra 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 menor tamanho, ou verifique visualmente):

• Borrada, a tela mostra as seções pretendidas, e o conteúdo primário atrai o olho 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 do que os espaços dentro deles.
• Cada seção tem no máximo um elemento fortemente enfatizado; estados selecionados são suaves.
• 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 precisa.
• 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:

• O layout alterna por classe de largura (600 / 840), não por dispositivo. Cada recurso é acessível em todas as larguras, de 320 a tela cheia.
• O redimensionamento faz reflow ao vivo e mantém seleção, rolagem, entrada e reprodução. Nada reinicia em um ponto de interrupção.
• A navegação se ajusta à largura: uma barra inferior no compacto, e um trilho, barra de guias superior ou barra lateral acima dela. Há cinco ou menos guias de nível superior, nenhuma oculta ou desabilitada.
• Layouts de vários painéis seguem um padrão canônico. A seleção é destacada em cada painel, painéis ocultos têm mais de uma maneira de voltar, e nenhum painel de detalhe fica vazio.
• Nada estica: botões, campos, folhas, diálogos e imagens têm larguras máximas, e o texto tem um comprimento de linha legível.
• Os alvos de toque têm pelo menos 44 × 44 pt (iOS) ou 48 × 48 dp (Android) e nunca abaixo de 24 × 24, mesmo com um ponteiro. O conteúdo primário fica no centro e controles frequentes são acessíveis a partir das bordas laterais.
• Nada interativo fica sob a barra de status, indicador de início, barra de tarefas ou os controles de janela do iPad, em qualquer orientação.
• Ponteiro: cada controle tem um estado de hover, clique direito e toque e segurar abrem um menu de contexto, e nada está disponível apenas no hover.
• Alternar itens, fechar um painel ou dispensar uma folha nunca perde texto digitado; Desfazer sobrevive a duas exclusões consecutivas e retorna o item ao seu painel.
• Teclado: os fluxos principais funcionam com Tab e as setas, o foco está sempre visível, atalhos padrão funcionam e Esc fecha, cancela ou limpa.
• Cada arrastar e soltar tem uma alternativa não-arrastar, mostra destinos válidos e pode ser desfeito.
• Ambas as orientações funcionam, e o campo focalizado permanece visível em paisagem com o teclado ativo.
• O layout suporta texto 200%, e o contraste é de pelo menos 4,5:1 para texto e 3:1 para UI em ambos os modos claro e escuro.
• Estados de carregamento, vazio e erro são projetados para cada painel, não apenas para a tela.
• O design funciona a 320 de largura sem rolagem horizontal.

7. Apresentar

Compartilhe o link do artefato. Em algumas 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), como o layout muda em cada classe de largura, qualquer item de autoverificação que você aceitou com um motivo, e qualquer adição de tema proposta (para a skill theme), e quaisquer perguntas em aberto.