modern-css_skill

Overview

This skill provides focused expertise for writing modern, high-quality CSS. Use it to start new stylesheets, adopt new CSS capabilities, or refactor legacy styles into resilient, progressive patterns. It emphasizes component-driven design, accessibility, and feature-detection for cross-browser robustness.

How this skill works

The skill inspects layout, color, typography, animation, and component patterns and proposes modern equivalents (container queries, view transitions, scroll-driven animation, etc.). It suggests feature-detection fallbacks and organizes recommendations by capability level (widely available, newly available, limited). It also returns concrete snippets and architecture guidance like cascade layers, @property, and calc-size() usage.

When to use it

• Starting a new CSS project or component file
• Refactoring legacy styles to use container queries, CSS color spaces, or cascade layers
• Adding animations using view transitions or scroll-driven timelines
• Designing responsive components scoped to their container rather than the viewport
• Improving accessibility and respecting user preferences (motion, contrast, reduced-motion)

Best practices

• Progressive enhancement: wrap experimental features in @supports and provide stable fallbacks
• Use container queries and container units for component-level responsiveness
• Prefer modern color spaces (OKLCH, display-p3) and color-mix() for consistent theme manipulation
• Organize code with @layer and logical properties to reduce specificity wars
• Use @property and calc-size() for type-safe, animatable custom properties and fluid transitions

Example use cases

• Convert a global breakpoint system into component-scoped container queries for cards or navs
• Create fluid typography with clamp() and dynamic viewport units for consistent scaling across devices
• Replace JavaScript height animations with calc-size(auto) and @property for smooth accordion transitions
• Implement themed design tokens using modern color functions and color-scheme/light-dark fallbacks
• Add a persistent site nav using view-transition-name and grouped transition classes for smooth page changes