Modern Web Guidance: fazer o agente de código usar escritas modernas da plataforma Web

Para quem

Se um agente de código empilha muito JavaScript datado assim que aparecem camadas, animação ou interação, e você quer as capacidades que a plataforma Web atual já dá, este conjunto encaixa melhor. Incorpora experiência de plataforma Web, boas práticas e dados de compatibilidade de browser no agente de código, para virar soluções de padrões antigos para a plataforma moderna, não para escrever mais um tutorial front-end genérico.

Explicação oficial: os agentes de código recaem muitas vezes em padrões antigos porque os dados de treino têm muito código legado, e geram scripts inchados para tarefas que já têm solução nativa de alto desempenho. Se está a trabalhar em diálogos, animação de camada de topo ou verificação de compatibilidade, e aceita instalar um conjunto com npx, o benefício é mais direto. Quem só quer percorrer documentação e não planeia mudar o comportamento do agente pode ver primeiro a pesquisa na linha de comandos, sem lançar o assistente de instalação.

Conclua a primeira tentativa em 3 minutos

A entrada oficial de instalação é só esta:

npx modern-web-guidance@latest install

Inicia um assistente interativo e instala Modern Web Guidance no seu agente de código. Isto altera a configuração de skills do agente nesta máquina; não é uma consulta só de leitura. Antes de executar, confirme: esta máquina tem npx, quer terminar as escolhas no assistente, e este é o ambiente de agente onde escrever. Leia as indicações e depois execute; não prima Enter num ambiente pouco claro.

Depois de instalar, uma verificação reversível: peça ao agente que inspecione «como animar o fundo de um diálogo» e exija que veja primeiro as capacidades modernas, sem escrever primeiro um script longo. Sinal de sucesso: a resposta apoia-se em soluções de plataforma e compatibilidade, em vez de empilhar por omissão escritas legado. Se o agente ainda só der padrões antigos, pare na verificação; não o deixe alterar ficheiros do repositório.

Se ainda não está pronto a escrever no agente, pode usar primeiro a mesma CLI em pesquisa só de leitura (secção seguinte). Esse passo não substitui a instalação; só confirma que o comando funciona.

Casos de uso

Caso 1: Pesquisar guias relacionados por tarefa. Já tem uma necessidade concreta, por exemplo animar o fundo de um diálogo, mas ainda não sabe o nome do guia. No terminal:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

A página oficial marca-o Search for relevant guides. Não escreve quantas linhas voltam, a ordenação nem se é preciso instalar primeiro. Só pode confirmar: este comando pesquisa guias por palavra-chave. Ver entradas de diálogo, fundo e animação basta; não o autoriza a tratar os resultados como uma correção final para colar.

Caso 2: Retirar um guia por ID conhecido. Quando já viu um identificador como animate-to-from-top-layer, execute:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

A página oficial marca-o Retrieve a guide by ID. Não explica o inventário completo de IDs nem se retrieve altera ficheiros do projeto. Na primeira vez, leia a saída só como corpo de guia. Para a pousar no código, passe-a a um agente de código que já tenha a skill para comparar, e proíba-o com clareza de alterar ficheiros antes do seu acordo.

Limites de uso

Isto é uma pré-visualização. O texto oficial diz que o conteúdo continua a crescer, e acolhe contribuições ou comentários em

https://github.com/GoogleChrome/modern-web-guidance-src

A página não garante que os guias cubram toda a plataforma Web nem escreve se os comandos do período de pré-visualização são estáveis. Se um tema não for encontrado, isso só significa que o conteúdo atual ainda não o tem; não invente uma «boa prática equivalente».

O caminho de instalação é o assistente interativo acima; pesquisa e extração são outros dois comandos. Não trate search / retrieve como um segundo instalador nem infira que está ligado a um produto de agente. O texto oficial só diz coding agents, sem lista de clientes.

Na primeira vez, dê prioridade à pesquisa ou a uma comparação só de leitura do agente. O assistente escreve skills; retrieve também não declara se é só apresentação. Qualquer passo que altere o repositório ou a configuração deve primeiro fazer o agente recitar os ficheiros que vai alterar; você confirma e depois continua.