Modern Web Guidance – Master.dev Blog

/ BLOG

AIAnimationModern Web Guidance

Modern Web Guidance

Chris Coyier<br>on<br>June 25, 2026

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.

Learn AI Agents Fundamentals

-->

Create a CLI agent from scratch! Learn the foundations of agent development like tool calling, agent loops, and and evals. Add human-in-the-loop approvals for higher-stakes operations. Monitor token usage and implement advanced for managing the context window. Access 300+ courses with a Master.dev subscription and get 20% off today!

Personalized Learning

Industry-Leading Experts

24 Learning Paths

Live Interactive Workshops

20% Off

Start Learning Today &rarr;

Leave a Reply Cancel reply<br>Your email address will not be published. Required fields are marked *<br>Comment *<br>Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Notify me of follow-up comments by email.<br>Notify me of new posts by email.

Table of Contents

Did you know?

Our courses go beyond frontend into fullstack, devops, and AI.

&rarr; Explore courses (20% off)

$966,000

Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.

LinkedIn

Facebook

Instagram

RSS

Contact: support@master.dev

Master.dev is proudly made in Minneapolis, MN

©2026 Master.dev &middot;<br>Terms of Service &middot; Privacy Policy