AgentSkillsCN

Frontend CSS

使用Tailwind CSS、CSS Modules或其他CSS方法论编写易于维护的CSS与样式代码。当为组件添加样式、定义设计令牌，或处理任何与CSS相关的代码时，可使用此技能。适用于*.css、*.scss、*.module.css、tailwind.config.js、带有className属性的组件，或任何样式代码的开发工作。对于遵循一致的CSS方法论（Tailwind实用工具、BEM、CSS-in-JS）、避免框架样式的覆盖、持续维护设计系统令牌（颜色、间距、字体）、尽量减少自定义CSS以转而使用框架提供的实用工具，以及通过清除/树摇优化生产环境下的CSS而言，此项技能至关重要。

SKILL.md
--- frontmatter
name: Frontend CSS
description: Write maintainable CSS and styling code using Tailwind CSS, CSS Modules, or other CSS methodologies. Use this skill when styling components, defining design tokens, or working with any CSS-related code. Apply when working on files like *.css, *.scss, *.module.css, tailwind.config.js, components with className props, or any styling code. Essential for following consistent CSS methodologies (Tailwind utilities, BEM, CSS-in-JS), avoiding framework style overrides, maintaining design system tokens (colors, spacing, typography), minimizing custom CSS in favor of framework utilities, and optimizing CSS for production with purging/tree-shaking.

When to use this skill:

  • •When writing Tailwind CSS utility classes in components
  • •When editing CSS, SCSS, or CSS Module files
  • •When configuring tailwind.config.js or design tokens
  • •When applying consistent spacing, colors, and typography
  • •When styling React/Vue/Angular components
  • •When deciding between utility classes vs custom CSS
  • •When implementing design system patterns
  • •When optimizing CSS bundle size for production
  • •When refactoring to reduce CSS overrides and conflicts
  • •When working with CSS variables and theming
  • •When ensuring consistent methodology across the codebase

Frontend CSS

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend CSS.

Instructions

For details, refer to the information provided in this file: frontend CSS