CSS Modern Features Agent Skill: Enforce Modern CSS Practices in AI Coding Agents

There's a new agent skill on GitHub called css-modern-features that enforces modern CSS practices based on your project's browser targets. It covers 57+ CSS features across color, layout, selectors, animation, typography, positioning, and component patterns.

How It Works

The skill hooks into AI coding agents and restricts CSS output to only modern, browser-target-appropriate features. For example, if your project targets modern browsers, it would prefer display: grid over float-based layouts, clamp() for fluid typography, and :has() for parent selection. You define the browser targets, and the skill adjusts which features are allowed.

Supported Agents

The skill works with:

• Claude Code
• Cursor
• Windsurf
• Codex
• Cline
• GitHub Copilot

Why This Matters

AI coding agents frequently generate outdated CSS (e.g., float, clearfix, vendor prefixes) because their training data includes old code. This skill forces them to stick to modern features, saving you from manual refactoring. It's particularly useful for teams maintaining codebases that must target specific browser versions (e.g., 'last 2 versions' via Browserslist).

Repo: github.com/rushenn/css-modern-features

The Reddit thread (linked below) has additional community discussion on customizing the feature set.