CSS Skills

CSS.dev

CSS.dev — CSS intelligence layer for AI coding tools
Category
CSS Skills
Compatible With
Cursor, Claude Code, Copilot, Gemini CLI, Codex
Pricing
Free (Open Source)
Skills
9 (1 always-on + 8 commands)
Principles
6 core design philosophies

CSS.dev is a CSS intelligence layer for AI coding tools. One install, nine expert skills — every CSS prompt your AI handles becomes dramatically better. It replaces legacy patterns with modern CSS automatically.

Source: CSS.dev

What It Does

AI coding tools generate CSS that works, but often rely on outdated techniques — hardcoded pixel values, floats, !important overrides, and animations that thrash layout. CSS.dev intercepts that workflow with 9 expert skills that enforce modern CSS patterns across every prompt. The result: clean, theme-aware, accessible, performant stylesheets from day one.

The Nine Skills

  • css-expert — always active. The foundational skill that enforces modern patterns, flags anti-patterns, and applies the full CSS.dev philosophy to every line of CSS your AI writes
  • /css-audit — deep quality audit across architecture, specificity, redundancy, accessibility, performance, and modernity
  • /css-layout — modern layouts with CSS Grid, Flexbox, subgrid, and container queries
  • /css-animate — performant animations, scroll-driven effects, and view transitions with reduced-motion support
  • /css-responsive — container queries, fluid typography, and responsive images without a framework
  • /css-refactor — upgrade legacy CSS by replacing floats, clearfix, and vendor prefixes with cascade layers
  • /css-theme — theming systems using custom properties, oklch colors, color-mix(), and light-dark()
  • /css-a11y — focus styles, reduced motion, forced colors, contrast ratios, and touch targets
  • /css-debug — specificity analysis, inheritance tracing, stacking context maps, and layout diagnosis

Six Core Principles

Every skill in the system enforces the same philosophy:

  • Modern CSS first — container queries over media queries, Grid over float, nesting over preprocessors
  • The cascade is a feature — use @layer to organize specificity instead of fighting it with !important
  • No frameworks required — pure CSS handles layout, theming, responsive design, and animation
  • Performance is a constraint — animate only composited properties, use contain and content-visibility, ship less CSS
  • Accessibility is non-negotiable — respect prefers-reduced-motion, provide :focus-visible, maintain contrast ratios
  • Design tokens, not magic numbers — custom properties as a systematic value layer, no hardcoded pixels or hex colors