Elige entre las habilidades de la Guía de la Web Moderna que se enumeran para que coincidan con tu etapa actual en el ciclo de vida del desarrollo web, desde el diseño inicial hasta la implementación de seguridad final.
Disciplinas web principales
Orquestadores para ayudarte a perfeccionar y enfocar tu trabajo por disciplina web.
accessibility
/modern-web-guidance accessibility
Sirve como tu guía de auditoría central para evaluar, corregir y aplicar patrones de accesibilidad eficaces en toda tu aplicación.
Ver la habilidad accessibility en GitHub
performance
/modern-web-guidance performance
Te ayuda a optimizar las Métricas web esenciales, reducir las latencias del tiempo de carga de la página y mejorar la capacidad de respuesta a la entrada del usuario.
Ver la habilidad performance en GitHub
user-experience
/modern-web-guidance user-experience
Sirve como tu kit de herramientas de interfaz de usuario (IU) para implementar rápidamente elementos personalizados responsivos, transiciones fluidas y patrones de diseño modernos.
Ver la habilidad user-experience en GitHub
Tecnologías web
Estas habilidades principales proporcionan componentes básicos esenciales para cualquier aplicación moderna, lo que garantiza que tu proyecto comience con prácticas recomendadas modernas con HTML semántico, velocidad e interoperabilidad en mente.
html
/modern-web-guidance html
Lineamientos orientados a la acción para la arquitectura HTML moderna, la semántica, las APIs interactivas nativas (Dialog, Popover, Details), la administración del enfoque y la priorización de recursos. Usa esta guía cuando estructures documentos web, implementes superposiciones nativas o optimices el orden de carga de recursos.
Ver la habilidad html en GitHub
css
/modern-web-guidance css
Lineamientos orientados a la acción para la arquitectura, los diseños y el rendimiento de CSS modernos. Usa esta guía cuando crees estilos, administres sistemas de diseño o optimices la renderización web.
Ver la habilidad css en GitHub
css-layout
/modern-web-guidance css-layout
Diseños de CSS modernos, como flexbox, cuadrícula, subcuadrícula, consultas de contenedores, posicionamiento de anclaje y tamaño intrínseco. Usa esta habilidad cuando diseñes componentes de IU responsivos o diseños de página.
Ver la habilidad css-layout en GitHub
forms
/modern-web-guidance forms
Prácticas recomendadas para compilar formularios web accesibles, seguros y fáciles de usar. Usa esta guía cuando crees o modifiques formularios, entradas y flujos de envío.
Ver la habilidad forms en GitHub
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Compilación de C y C++ para la Web moderna con WebAssembly. Usa esta habilidad cuando necesites transferir código C++, compilar bibliotecas C++ con Emscripten o configurar componentes C++ de alto rendimiento en el navegador.
Ver la habilidad cpp-on-the-web en GitHub
Capacidades del navegador (opcional)
Estas habilidades te ayudan a desarrollar extensiones de Chrome que siguen estándares modernos como Manifest V3 y a optimizar la publicación en la Chrome Web Store con ayuda para preparar tus metadatos, políticas de privacidad y justificaciones de permisos. Estas habilidades son opcionales y no están habilitadas de forma predeterminada.
chrome-extensions
/modern-web-guidance chrome-extensions
Compila extensiones de Chrome seguras y compatibles con Manifest V3 que eviten los errores comunes del ciclo de vida de los service workers y el aislamiento de pruebas. Para habilitar esta opción, deberás especificar la habilidad chrome-extensions:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Ver la habilidad chrome-extensions en GitHub
Seguridad, confianza e identidad
Estas habilidades se centran en la confianza del usuario, ya que protegen las aplicaciones contra vulnerabilidades del cliente, como XSS, a través de encabezados HTTP defensivos y aislamiento de origen. Los desarrolladores también pueden desarrollar flujos de autenticación con llaves de acceso, minimizar el seguimiento de terceros y usar habilidades para transferir bibliotecas C/C++ a módulos de WebAssembly.
security
/modern-web-guidance security
Lineamientos de seguridad preventiva para desarrolladores web (XSS, CSP, cookies, aislamiento de origen cruzado). Usa esta habilidad para guiar el proceso de auditoría, prueba e implementación de políticas de seguridad de forma segura.
Ver la habilidad security en GitHub
passkeys
/modern-web-guidance passkeys
Orientación integral y principios transversales para implementar WebAuthn y llaves de acceso en aplicaciones web. Usa esta guía cuando manejes el registro, la autenticación, la administración o la reautenticación de llaves de acceso.
Ver la habilidad passkeys en GitHub
privacy
/modern-web-guidance privacy
Lineamientos orientados a la acción para que los desarrolladores web implementen la privacidad desde el diseño, la minimización de datos, las auditorías de terceros y el manejo seguro de datos. Usa esta habilidad cuando diseñes aplicaciones, integres servicios de terceros, manejes datos del usuario o configures encabezados de seguridad.
Ver la habilidad privacy en GitHub
Sistemas agente
Estas habilidades ayudan a cerrar la brecha entre tu aplicación web y los flujos de trabajo de IA con WebMCP. Al exponer la funcionalidad del navegador del cliente como herramientas interactivas, puedes indicarle a los agentes de IA que interactúen directamente con las funciones de la aplicación.
webmcp
/modern-web-guidance webmcp
Implementa WebMCP para exponer la funcionalidad del navegador del cliente como herramientas interactivas para agentes de IA.
Ver la habilidad webmcp en GitHub
Próximos pasos
Ahora que comprendes la Guía de la Web Moderna, pruébala por tu cuenta. Descubre las funciones y los casos de uso compatibles con la Guía de la Web Moderna y prueba algunas instrucciones de muestra para comenzar.