web-design-guidelines

Visão geral da skill web-design-guidelines

Para que esta skill serve

A skill web-design-guidelines é um guia prático de design de plataforma web e acessibilidade para criar, revisar ou corrigir UI na web. Ela é mais indicada para quem precisa de algo além de um prompt genérico: engenheiros de frontend, designers que trabalham com código, revisores de acessibilidade e agentes que precisam tomar decisões defensáveis de HTML/CSS/JS.

O que ela ajuda você a decidir

Use esta skill quando a tarefa for escolher marcação semântica, atender às expectativas de WCAG 2.2, melhorar o comportamento responsivo ou evitar regressões comuns de UI web. O principal valor da skill web-design-guidelines é transformar objetivos amplos como “torne este formulário acessível” ou “melhore este layout no mobile” em regras concretas de plataforma.

Por que ela é diferente

Este repositório é agnóstico em relação a frameworks e é opinativo sobre fundamentos: HTML semântico, acesso por teclado, estados de foco, contraste, design responsivo e performance. Para web-design-guidelines for UI Design, isso a torna útil em React, Vue, HTML puro e trabalhos de design system, porque a orientação fica abaixo da escolha de framework.

Como usar a skill web-design-guidelines

Instale e carregue os arquivos certos

Use o comando web-design-guidelines install para o pacote da skill:
npx skills add ehmo/platform-design-skills --skill web-design-guidelines

Depois da instalação, carregue SKILL.md para acessar o conjunto completo de regras. Se você precisar só de um aspecto, consulte primeiro rules/_sections.md. AGENTS.md é o caminho mais rápido para entender a estrutura de arquivos, o escopo e os níveis de prioridade.

Transforme uma solicitação vaga em um prompt útil

A skill funciona melhor quando a sua entrada nomeia a superfície da UI, a restrição principal e a decisão que você quer que seja tomada. Prompts melhores incluem:

• “Faça uma auditoria deste formulário de checkout para encontrar problemas de teclado e de rótulos.”
• “Refatore esta grade de cards para continuar legível no mobile e respeitar as regras de contraste.”
• “Revise este modal quanto ao foco preso, comportamento com Esc e nomeação ARIA.”

Para web-design-guidelines usage, inclua a marcação real, a API do componente ou as restrições de layout. Se você disser apenas “melhore a acessibilidade”, a resposta tende a ficar ampla demais para ser confiável.

Ordem de leitura sugerida

Comece por SKILL.md, depois AGENTS.md e, em seguida, rules/_sections.md para carregamento seletivo. Se você estiver depurando um problema específico, leia primeiro só a seção relevante: acessibilidade, formulários, design responsivo, tipografia, performance ou navegação. Isso mantém o trabalho focado e reduz conselhos irrelevantes.

Fluxo de trabalho que gera melhores resultados

Use esta sequência: identifique o problema do usuário, localize a seção de regra relevante, aplique a correção estrutural mínima e depois revise teclado, rótulos, contraste e comportamento no mobile. A skill funciona melhor quando você pede uma revisão ou um patch, e não apenas uma explicação abstrata de boas práticas.

FAQ da skill web-design-guidelines

Isso serve só para acessibilidade?

Não. Acessibilidade é a maior seção, mas a skill também cobre layouts responsivos, formulários, tipografia, performance, modo escuro, navegação, toque, i18n, animação e preocupações relacionadas a PWA. Se sua tarefa for mais ampla do que WCAG, esta skill ainda faz sentido.

Preciso ser especialista em frontend para usar?

Não. A skill web-design-guidelines skill é amigável para iniciantes, desde que você consiga compartilhar o HTML, o código do componente ou uma descrição do problema baseada em captura de tela. Mas você precisa ser específico sobre a interface e sobre o comportamento que quer mudar.

Quando não devo usar?

Evite se a tarefa for apenas branding visual, redação ou estratégia de produto sem implementação de UI. Também não é a ferramenta certa para dúvidas de arquitetura do lado do servidor, a menos que a resposta dependa do comportamento da interface web.

Em que ela é melhor do que um prompt comum?

Um prompt comum muitas vezes devolve conselhos genéricos. Esta skill é ancorada em regras de plataforma, então solicitações de web-design-guidelines guide podem produzir decisões mais confiáveis sobre elementos semânticos, fluxo de teclado, uso de ARIA e comportamento responsivo, sem chute.

Como melhorar a skill web-design-guidelines

Dê o menor contexto completo de UI possível

As melhores entradas incluem o nome do componente, o código relevante e o modo de falha. Por exemplo: “Este é um modal com ícone de fechar, dois campos e uma ação principal; faça uma auditoria de gerenciamento de foco e rotulagem.” Isso é muito mais forte do que “deixe acessível”.

Declare a restrição que mais importa

Se o mais importante for mobile, mencione limites de viewport, breakpoints ou áreas de toque. Se a prioridade for acessibilidade, nomeie o problema-alvo: acesso por teclado, contraste, rótulos, redução de movimento ou nomeação para leitor de tela. web-design-guidelines usage melhora quando a skill sabe qual tradeoff pesa mais.

Fique atento aos modos de falha mais comuns

Os erros mais frequentes são uso excessivo de <div> no lugar de elementos semânticos, controles interativos ocultos sem rótulos, estados de foco fracos e layouts que quebram quando o texto é traduzido ou ampliado. Se a primeira resposta parecer genérica, peça uma revisão baseada em regras do tree de componentes ou do CSS exato.

Itere com um ciclo de revisão

Depois da primeira passada, peça uma segunda verificação focada exatamente no ponto de dúvida: “reavalie a ordem de teclado”, “verifique contraste e estilo de foco” ou “identifique apenas mudanças de marcação”. Isso mantém a skill web-design-guidelines focada e normalmente resulta em uma implementação final mais precisa.