Agent skill · design visual · ccheney
modern-css
Proactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
Why this skill is useful
Provides detailed knowledge on modern CSS features and best practices that the AI may not reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-07. 58 stars on the source repository.
What this skill does
Modern CSS Pure native CSS for building interfaces — no preprocessors, no frameworks. When to Use (and When NOT to) Support statuses below are as of mid-2026. "Newly Baseline (date)" means all three engines ship it, but users on older browsers won't have it — keep graceful degradation. Verify anything critical on MDN or webstatus.dev. Use Freely (Baseline) Feature-Detect / Progressive Enhancement --- --- CSS Grid, Subgrid, Flexbox Scroll-driven animations (Firefox: behind flag) Container queries — size; style (newly Baseline May 2026) Scroll-state queries (Chromium-only) :has(), :is(), :where() ::scroll-button(), ::scroll-marker (Chromium-only) CSS Nesting, @layer Customizable <select> (Chromium; Safari 27 announced) @scope (newly Baseline Dec 2025) @function, if() (Chromium-only) @property (typed custom props) sibling-index(), sibling-count() (no Firefox) oklch(), color-mix(), light-dark(), relative color Typed attr() beyond content (Chromium-only) @starting-style, transition-behavior: allow-discrete Cross-document view transitions (no Firefox) View transitions — same-document (newly Baseline Oct 2025) interpolate-size, calc-size() (Chromium-only) Anchor positioning (newly Baseline Jan 2026) popover="hint", interestfor (Chromium-only) Popover API, <dialog>, invoker commands (newly Baseline Dec 2025) text-wrap: pretty, text-box (no Firefox) field-sizing: content (newly Baseline Jun 2026) reading-flow (Chromium-only) text-wrap: balance, linear() easing closedby on <dialog> (no Safari) Logical properties, ::details-content Grid Lanes / masonry (Safari 26.4 only; flags elsewhere) random() (Safari 26.2+ only), @mixin (no browser yet) CRITICAL: The Modern Cascade Understanding how styles resolve is the single most important concept in CSS. The additions of @layer and @scope fundamentally changed the cascade algorithm. Cascade layers (@layer) and scope proximity (@scope) are now more powerful than selector specificity. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills ccheney/modern-css