Escolha entre as habilidades de orientação da Web moderna listadas para corresponder à sua fase atual no ciclo de vida de desenvolvimento da Web, desde o estilo inicial até a implementação final de segurança.
Disciplinas principais da Web
Orquestradores para ajudar a refinar e concentrar seu trabalho por disciplina da Web.
accessibility
/modern-web-guidance accessibility
Serve como um guia central de auditoria para avaliar, corrigir e implementar padrões de acessibilidade eficazes em todo o aplicativo.
Confira a habilidade accessibility no GitHub
performance
/modern-web-guidance performance
Ajuda a otimizar as Core Web Vitals, reduzir as latências de tempo de carregamento da página e melhorar a capacidade de resposta à entrada do usuário.
Confira a habilidade performance no GitHub
user-experience
/modern-web-guidance user-experience
Serve como um kit de ferramentas de interface do usuário (UI) para implementar rapidamente elementos personalizados responsivos, transições suaves e padrões de estilo modernos.
Confira a habilidade user-experience no GitHub
Tecnologias da Web
Essas habilidades principais fornecem elementos essenciais para qualquer aplicativo moderno, garantindo que seu projeto comece com as práticas recomendadas modernas, HTML semântico, velocidade e interoperabilidade.
html
/modern-web-guidance html
Diretrizes orientadas a ações para arquitetura HTML moderna, semântica, APIs interativas nativas (Dialog, Popover, Details), gerenciamento de foco e priorização de recursos. Use este guia ao estruturar documentos da Web, implementar sobreposições nativas ou otimizar a ordem de carregamento de recursos.
Confira a habilidade html no GitHub
css
/modern-web-guidance css
Diretrizes práticas para arquitetura, layouts e desempenho modernos do CSS. Use este guia ao criar estilos, gerenciar sistemas de design ou otimizar a renderização da Web.
Confira a habilidade css no GitHub
css-layout
/modern-web-guidance css-layout
Layouts CSS modernos, como flexbox, grid, subgrid, consultas de contêiner, posicionamento de âncora e dimensionamento intrínseco. Use essa habilidade ao arquitetar componentes de interface responsiva ou layouts de página.
Confira a habilidade css-layout no GitHub
forms
/modern-web-guidance forms
Práticas recomendadas para criar formulários da Web acessíveis, seguros e fáceis de usar. Use este guia ao criar ou modificar formulários, entradas e fluxos de envio.
Confira a habilidade forms no GitHub
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Compilação de C e C++ para a Web moderna usando WebAssembly. Use essa habilidade quando precisar migrar código C++, criar bibliotecas C++ com Emscripten ou configurar componentes C++ de alto desempenho no navegador.
Confira a habilidade cpp-on-the-web no GitHub
Recursos do navegador (ativação)
Essas habilidades ajudam você a desenvolver extensões do Chrome que seguem padrões modernos, como o Manifest V3, e simplificam a publicação na Chrome Web Store com ajuda para preparar metadados, políticas de privacidade e justificativas de permissão. Essas skills são ativadas por opção e não por padrão.
chrome-extensions
/modern-web-guidance chrome-extensions
Crie extensões do Chrome seguras e em conformidade com o Manifest V3 que evitem armadilhas comuns de ciclo de vida de service worker e sandbox. Para ativar, especifique a habilidade chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Confira a habilidade chrome-extensions no GitHub
Segurança, confiança e identidade
Essas habilidades se concentram na confiança do usuário, protegendo aplicativos contra exploits do lado do cliente, como XSS, usando cabeçalhos HTTP de defesa e isolamento de origem. Os desenvolvedores também podem criar fluxos de autenticação com chaves de acesso, minimizar o rastreamento de terceiros e usar habilidades para portar bibliotecas C/C++ para módulos WebAssembly.
security
/modern-web-guidance security
Diretrizes de segurança preventiva para desenvolvedores da Web (XSS, CSP, cookies, isolamento entre origens). Use essa habilidade para orientar o processo de auditoria, teste e implantação de políticas de segurança com segurança.
Confira a habilidade security no GitHub
passkeys
/modern-web-guidance passkeys
Orientação abrangente e princípios abrangentes para implementar o WebAuthn e as chaves de acesso em aplicativos da Web. Use este guia ao processar registro, autenticação, gerenciamento ou reautenticação de chaves de acesso.
Confira a habilidade passkeys no GitHub
privacy
/modern-web-guidance privacy
Diretrizes práticas para desenvolvedores da Web implementarem privacidade por design, minimização de dados, auditorias de terceiros e tratamento seguro de dados. Use essa habilidade ao criar aplicativos, integrar serviços de terceiros, processar dados do usuário ou configurar cabeçalhos de segurança.
Confira a habilidade privacy no GitHub
Sistemas agênticos
Essas habilidades ajudam a diminuir a distância entre seu aplicativo da Web e os fluxos de trabalho de IA com o WebMCP. Ao expor a funcionalidade do navegador do lado do cliente como ferramentas interativas, você pode instruir os agentes de IA a interagir diretamente com os recursos do aplicativo.
webmcp
/modern-web-guidance webmcp
Implemente o WebMCP para expor a funcionalidade do navegador do lado do cliente como ferramentas interativas para agentes de IA.
Confira a habilidade webmcp no GitHub
Próximas etapas
Agora que você entende o Modern Web Guidance, teste por conta própria! Descubra os recursos e casos de uso compatíveis com o Modern Web Guidance e teste alguns comandos de amostra para começar.