Modern Web Guidance

Google released an AI “skill” at Google I/O last month called Modern Web Guidance. It’s essentially a folder of nested Markdown files that AI agents know how to read and use as part of their context window when they deem appropriate. This skill has a bunch of HTML/CSS/JavaScript information that guides AI to, hopefully, do a much better job at these languages than even high-power models do alone (because there is always a time-and-training gap between platform releases and model updates).

Honestly I’ve found it to do a pretty good job, handling things like fallbacks and user preferences (e.g. prefers-reduced-motion) well, which is too easily forgotten. Check out this Markdown file, which essentially explains (in AI-speak) how to do what I taught you to do (in Human-speak) in my series In-N-Out Animations. I’m not going to vouch for it producing perfect and accessible code every time or anything foolish like that. You should know what you’re doing.

Here’s an example of the AI-speak:

• MANDATORY: Include overlay in your transition list for any element moving into or out of the top layer.
• MANDATORY: Use allow-discrete for the display property transition.
• MANDATORY: Respect user preferences for reduced motion using prefers-reduced-motion by simplifying transitions (e.g., removing transforms and shortening duration).
• DO: Place the @starting-style block inside or after the “open” state selector to ensure proper cascading.
• DO NOT: Use @starting-style for exit animations; exit animations are defined by the transition to the base (closed) state.