AgentSkillsCN

css

使用现代特性编写CSS与CSS模块。在编写样式表、CSS模块，或为组件添加样式时，可使用此功能。

SKILL.md
--- frontmatter
name: css
description:
  Writes CSS and CSS Modules with modern features. Use when writing stylesheets,
  CSS modules, or styling components.

CSS Protocol

Modern Features

Use nesting, :has(), &, &:hover, nested @media

css
.button {
  color: blue;

  &:hover {
    color: darkblue;
  }

  @media (max-width: 600px) {
    width: 100%;
  }
}

CSS Modules

  • •camelCase class names only (no dashes)
  • •No tag selectors at root level
  • •No nested class/id selectors
  • •Nest pseudo-classes, pseudo-elements, @media with &
css
/* ✓ Good */
.container { ... }
.headerTitle { ... }
.submitButton { ... }