desktop

ultrahand: desktop

Projete telas de aplicativos desktop e web como um artefato Claude interativo. O artefato é uma janela que você arrasta para qualquer tamanho entre o mínimo e o máximo que escolher, com predefinições para laptops, monitores e metades de tela comuns, e o layout se reorganiza ao vivo enquanto você arrasta. Cada regra que você aplica está em references/principles.md, e cada regra cita references/sources.md. Os tamanhos, limites e classes de tamanho estão em references/presets.md.

1. Coletar requisitos

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

• Plataforma: macOS, Windows, um aplicativo web, ou vários. Um aplicativo nativo macOS ganha uma barra de menus; aplicativos Windows e web ganham uma barra de comando ou barra de ferramentas com estouro.
• Escopo: uma tela ou um fluxo. Para um fluxo, liste as telas e como as pessoas navegam entre elas: barra lateral, abas, lista para detalhes, painel lateral, diálogo ou nova janela.
• Tarefa primária: a única coisa para a qual cada tela serve e qual layout se adequa a ela (lista-detalhes, painel de suporte, feed ou um único painel de documento).
• Conteúdo real: nomes, comprimentos, contagens, conjuntos de colunas e as strings mais longas plausíveis. Não projete com lorem ipsum.
• Estados de dados: o que carrega, o que pode estar vazio e o que pode falhar ou ficar offline, por painel.
• Limites da janela: o tamanho mínimo da janela, o máximo e a largura máxima do conteúdo. Padrão para 640 × 480 para um aplicativo nativo e 320 × 256 para um aplicativo web (veja presets.md).
• Entradas: ponteiro e teclado sempre; toque se puder rodar em 2-em-1s ou laptops com tela sensível ao toque. Quais comandos são frequentes o suficiente para ganhar um atalho?
• Janelas: uma janela, ou várias (documentos, inspetores, painéis destacados)?
• Restrições: cores da marca, fontes, um sistema de design existente ou biblioteca de componentes.
• Tema: procure pelo 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 o build, use apenas suas propriedades customizadas (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 possui, use o token mais próximo e liste a adição sob questões em aberto; não invente um valor. Sem tema, siga os itens inegociáveis em shared/theme/rules.md e ofereça o 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 menus, barra de ferramentas, barra lateral, visualização dividida, menu de contexto, folha, NavigationView) em vez de inventar novos.

3. Compor a tela

Componentes que passam em suas verificações individuais ainda podem resultar em uma tela bagunçada. 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 ferramentas em no máximo três grupos, uma barra lateral, um painel de conteúdo 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 é cromo: o conteúdo domina e o cromo recua.
• Agrupe com espaço. Lacunas dentro de um grupo são claramente menores do que lacunas entre grupos; adicione um contêiner apenas quando o espaço não puder mostrar o grupo.
• Uma aparência 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 os estados selecionados usam um tratamento mais suave.
• Mantenha pequeno. Cerca de três tamanhos de tipo, um fato em um lugar, membros frequentes à vista e os 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 do próprio design como config.json, depois construa:

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

Publique index.html como um artefato.

• config.json define title, states (ex.: padrão, carregando, vazio, erro) e os limits do design: { minWidth, minHeight, maxWidth, maxHeight }. O canvas permite arrastar para qualquer tamanho entre eles. Para um aplicativo web, defina também "initialPreset": "browser".
• Predefinições (de presets.md): laptops (1366 × 768, 1536 × 864, MacBook 1440 × 900), monitores (1920 × 1080, 2560 × 1440), metades de tela (960 × 1080, 720 × 900) e uma janela de navegador (1280 × 720). Verificações: sua janela mínima, uma janela curta de 1366 × 600 e zoom de 400% a 320 × 256.
• Contrato da tela: um <template id="uh-screen"> com seções [data-screen], e data-nav, data-nav-back e data-show-state para cliques. Responda ao tamanho com @container screen (width >= …), não @media. Texto em rem; áreas de toque, ícones e margens em px, para que o texto a 200% cresça as palavras, não os controles. Cores com light-dark(). O comportamento vai em window.ultrahandSetup = function (canvas) { … }.
• Alternâncias integradas: claro/escuro, texto a 200%, seletor de estado e alvos de toque (mínimo de 24 px para desktop). Chame canvas.refresh() após abrir um menu ou popover para que a sobreposição de alvos o veja.
• Faça funcionar como um aplicativo desktop: estados de hover, um menu de contexto ao clicar com o botão direito (e Shift+F10), foco visível, navegação funcional com Tab e setas, dicas de atalho em menus e tooltips, painéis que ocultam e mostram, e divisores que podem ser arrastados. Nunca use alert, confirm ou prompt; desenhe diálogos na tela.

5. Projetar cada classe de tamanho

Trabalhe de largo a estreito e corrija cada problema no tamanho em que ele aparece:

1. Grande / extra-grande (laptop-125, desktop-fhd): escolha os painéis, navegação, grupos de barra de ferramentas e densidade. Defina um limite para a largura do conteúdo; largura extra vai para os painéis, não para linhas mais longas.
2. Expandido (snap-half, ~960): recolha o inspetor ou painel secundário, transforme a barra lateral em uma rail e comece a mover itens da barra de ferramentas para o estouro na ordem planejada.
3. Médio e seu mínimo (mac-half, verificação de janela mínima): um ou dois painéis, um botão de menu ou rail para navegação, e cada comando ainda acessível através de menus.
4. Arraste lentamente do máximo ao mínimo e vice-versa. Seleção, posição de rolagem, texto digitado e painéis abertos devem sobreviver a cada ponto de quebra.

Em seguida, execute as verificações: a janela curta (barras fixas, foco não obstruído) e, para aplicativos web, zoom de 400% a 320 × 256 (uma coluna, apenas rolagem vertical).

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):

• 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 lacunas entre grupos claramente maiores do que lacunas 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:

• O design declara seu tamanho mínimo e máximo de janela e sua largura máxima de conteúdo. Nada se sobrepõe ou corta no mínimo, e nada estica no máximo.
• O layout muda pela largura da janela (Material 600 / 840 / 1200, ou Windows 641 / 1008), não pelo dispositivo. Cada funcionalidade é acessível em todos os tamanhos.
• Redimensionar reorganiza ao vivo e mantém seleção, rolagem, entrada e painéis abertos.
• Os painéis seguem um layout canônico, os divisores podem ser arrastados, os painéis podem ser ocultados por botão, menu e atalho, e nenhum painel fica vazio sem uma explicação.
• O texto do corpo permanece em no máximo 80 caracteres por linha.
• Cada comando está em um menu (a barra de menus no macOS) ou no estouro da barra de ferramentas; itens de menu indisponíveis são desabilitados, não ocultos; comandos que precisam de entrada terminam com "…".
• Os itens da barra de ferramentas estouram em uma ordem planejada à medida que a janela estreita, com no máximo três grupos.
• O clique com o botão direito abre um menu de contexto curto e relevante, e cada um de seus comandos também existe em outro lugar.
• Tudo funciona com teclado, sem armadilhas; o foco está sempre visível e nunca sob uma barra fixa; atalhos padrão não são reaproveitados; atalhos aparecem em menus e tooltips.
• Nada está disponível apenas ao passar o mouse. Conteúdo de hover e foco é dispensável com Esc, passível de hover e persistente; tooltips não carregam informações vitais.
• Os alvos têm pelo menos 24 × 24 px (cerca de 40 × 40 onde toque é provável).
• Rolagem: apenas o conteúdo rola, sem áreas de rolagem aninhadas na mesma direção, cabeçalhos de tabela permanecem congelados, e nenhum controle crítico está na borda inferior da janela.
• A edição usa o padrão mais leve que se encaixa: inline para um campo, um painel lateral para um registro, uma folha ou diálogo para uma tarefa curta de bloqueio, uma janela ou página para fluxos longos. Confirmações são apenas para ações destrutivas e irreversíveis; todo o resto oferece Desfazer.
• Cada arrastar-e-soltar tem uma alternativa sem arrasto.
• O layout sobrevive a texto a 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 janela.
• Aplicativos web: funciona a 320 × 256 (zoom de 400%) sem rolagem bidirecional e tem um link de pular.

7. Apresentar

Compartilhe o link do artefato. Em algumas linhas, declare o mapa de seções (função e ênfase de cada seção), os limites da janela e a largura máxima do conteúdo, 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 da autoverificação que você aceitou com uma razão, e quaisquer adições propostas ao tema (para o skill theme), e quaisquer questões em aberto.