Choose from the Modern Web Guidance skills listed to match your current stage in the web development lifecycle, spanning from initial styling to final security implementation.
Core web disciplines
Orchestrators to help hone in and focus your work by web discipline.
accessibility
/modern-web-guidance accessibility
Serves as your central audit guide to assess, fix, and implement effective accessibility patterns across your entire application.
View the accessibility skill on GitHub
performance
/modern-web-guidance performance
Helps you to optimize Core Web Vitals, cut down page load time latencies, and improve responsiveness to user input.
View the performance skill on GitHub
user-experience
/modern-web-guidance user-experience
Serves as your user interface (UI) toolkit to quickly implement responsive custom elements, smooth transitions, and modern styling patterns.
View the user-experience skill on GitHub
Web technologies
These core skills provide essential building blocks for any modern application, ensuring your project starts with modern best practices with semantic HTML, speed, and interoperability in mind.
html
/modern-web-guidance html
Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.
css
/modern-web-guidance css
Action-oriented guidelines for modern CSS architecture, layouts, and performance. Use this guide when authoring styles, managing design systems, or optimizing web rendering.
css-layout
/modern-web-guidance css-layout
Modern CSS layouts such as flexbox, grid, subgrid, container queries, anchor positioning, and intrinsic sizing. Use this skill when architecting responsive UI components or page layouts.
View the css-layout skill on GitHub
forms
/modern-web-guidance forms
Best practices for building accessible, secure, and user-friendly web forms. Use this guide when creating or modifying forms, inputs, and submission flows.
View the forms skill on GitHub
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Compiling C and C++ for the modern web using WebAssembly. Use this skill when you need to port C++ code, build C++ libraries with Emscripten, or set up high-performance C++ components in the browser.
View the cpp-on-the-web skill on GitHub
Browser capabilities (opt-in)
These skills help you develop Chrome extensions that follow modern standards like Manifest V3 and streamline publishing to the Chrome Web Store with help to prepare your metadata, privacy policies, and permission justifications. These skills are opt-in, and not enabled by default.
chrome-extensions
/modern-web-guidance chrome-extensions
Build secure, and compliant Chrome extensions under Manifest V3 that avoid common service worker lifecycle and sandboxing pitfalls. To opt in, you'll need to specify the chrome-extensions skill:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
View the chrome-extensions skill on GitHub
Security, trust and identity
These skills focus on user trust by securing applications against client-side exploits like XSS through defensive HTTP headers and origin isolation. Developers can also develop authentication flows with passkeys, minimize third-party tracking, and use skills to port C/C++ libraries to WebAssembly modules.
security
/modern-web-guidance security
Preventative security guidelines for web developers (XSS, CSP, Cookies, Cross-Origin Isolation). Use this skill to guide the process of auditing, testing, and deploying security policies safely.
View the security skill on GitHub
passkeys
/modern-web-guidance passkeys
Comprehensive orientation and cross-cutting principles for implementing WebAuthn and Passkeys in web applications. Use this guide when handling passkey registration, authentication, management, or reauthentication.
View the passkeys skill on GitHub
privacy
/modern-web-guidance privacy
Action-oriented guidelines for web developers to implement privacy by design, data minimization, third-party audits, and secure data handling. Use this skill when designing applications, integrating third-party services, handling user data, or configuring security headers.
View the privacy skill on GitHub
Agentic systems
These skills help bridge the gap between your web application and AI workflows with WebMCP. By exposing client-side browser functionality as interactive tools, you can instruct AI agents to interact directly with application features.
webmcp
/modern-web-guidance webmcp
Implement WebMCP to expose client-side browser functionality as interactive tools for AI agents.
View the webmcp skill on GitHub
Next Steps
Now that you understand Modern Web Guidance, try it for yourself! Discover features and use cases supported in Modern Web Guidance, and try out a few sample prompts to get started.