Modern CSS Skill: A Snippet Reference for Current Stylesheets

What is the modern-css skill?

The modern-css skill is a CSS cheat sheet written for an agent. Its description says to load it when starting a new CSS file, when you ask about features such as Masonry or View Transitions, or when legacy styles need modernizing.

It lives in an agents/skills folder of a personal dotfiles repository, next to shell and git configuration. The folder holds one SKILL.md and a reference file from a 2025 conference deck, and the skill itself is almost all code snippets.

Topics the reference covers

• Layout: container queries and units, media query range syntax, subgrid and a grid-lanes Masonry layout.
• Color: light-dark(), OKLCH, Display-P3, color-mix(), relative color syntax and accent-color.
• Type: text-wrap balance and pretty, text-box trim, clamp() fluid sizes and dynamic viewport units.
• Motion: scroll-driven animation, view transitions, linear() easing, @starting-style, @property and calc-size().
• Components and forms: dialog, popover, anchor positioning, customizable select, field-sizing and user-invalid.

Support checking is part of the method

1. Find the feature in the web platform Baseline explorer and read its detail page, which the skill marks as the best source.
2. Otherwise check the Baseline badge on Can I Use, in the MDN compatibility table or in web.dev articles.
3. Wrap the newest features in @supports and respect reduced motion, color scheme and contrast preferences.

Who the modern-css skill is for

Best for

• Starting a stylesheet from scratch and wanting the agent to reach for current features instead of float-era habits.
• Refactoring older components toward container queries, cascade layers and logical properties. Related theming ideas are in color-system.
• Fluid type and spacing work, where typography-scale adds the scale decisions that this reference leaves open.

Not for

• Choosing a visual style. The skill gives syntax, not taste, so pair it with motion-system for motion decisions.
• Teams that must support old browsers without checking. Several entries are marked limited availability or coming soon.
• A bundled, licensed package. It is one folder in a personal dotfiles repository, and the license is not stated.

Use it with UiChemy

The skill writes CSS, not WordPress pages. Build the page with Figma to WordPress or AI to WordPress, then use the reference if you add custom CSS yourself. Click Get Started on uichemy.com, and check browser support before shipping any new feature.

Theming advice fits with dark-mode-design, and responsive thinking with owl-responsive-design. The skill's container query and light-dark examples are good starting points for planning both before you build.

How to install Modern CSS Skill: A Snippet Reference for Current Stylesheets

git clone https://github.com/paulirish/dotfiles.git

1. Get the repository or just the folder

   Run git clone https://github.com/paulirish/dotfiles.git, or open agents/skills/modern-css on GitHub and download only that folder. The repository is a set of personal shell and git configs.

2. Copy the skill folder

   Copy agents/skills/modern-css, including its references folder, into the place your agent loads skills from. The README advises against using the dotfiles wholesale, so do not run its setup scripts.

3. Ask for CSS work

   Start a new stylesheet, ask about a feature such as View Transitions or Container Queries, or request a refactor of legacy styles. Those are the triggers in the skill description.

4. Keep a Baseline check in the loop

   Tell the agent to confirm browser support before shipping. The skill names the Baseline explorer, Can I Use, MDN and web.dev as places to check.

Check that it loaded

Ask for a responsive card component. The reply should use container queries, logical properties, light-dark() or OKLCH colors, text-wrap balance and @supports guards, and mention a Baseline check for newer features.

Read the official instructions on GitHub

Key features

• Container queries and unitsExamples define a named container with inline-size, query it with width conditions and range syntax, and size text with cqi, cqb, cqw and cqh units tied to the container.
• Anchored container queriesA tooltip example sets container-type to anchored and styles it by fallback position, such as when the positioned element ends up at the top.
• Grid enhancementsSubgrid inherits parent grid lines for nested layouts. Masonry uses display: grid-lanes, which the skill notes was previously proposed as grid-template-rows: masonry.
• Color functionsCovers light-dark() with color-scheme, OKLCH for uniform brightness, Display-P3 with a dynamic-range media query, gradients in oklch, color-mix() and relative color syntax.
• Text and viewport unitsHeadings use text-wrap balance, paragraphs use pretty, text-box trims optical spacing, clamp() sets fluid sizes, and dvh, svh and lvh handle mobile browser interface changes.
• Scroll and view animationAnimation timelines driven by scroll() and view() with animation-range, plus same-document and cross-document view transitions. The skill marks cross-document as limited availability.
• Entry and custom property tricks@starting-style for entry transitions, linear() for spring-like easing, typed @property values that can animate, and calc-size() to animate to auto height.
• Cascade layersA layer order list, imports placed into layers and nested layer names. Benefits listed are lower specificity for third-party CSS and organization by concern.
• Native interactive partsDialog with commandfor and command, popover including hint, anchor positioning with fallbacks, exclusive details accordions, customizable select with base-select, and the search element.
• Coming soon markersTree counting functions such as sibling-index() and sibling-count(), and conditional if() are labelled coming soon, so the agent knows to guard them.

Frequently asked questions