AgentSkillsCN

Frontend CSS

以Tailwind CSS v4.0+的实用类作为首选方案，结合CSS Modules（采用camelCase类名）或自定义CSS，在Tailwind无法达到预期视觉效果时灵活选用。在为UI组件添加样式、实现布局、设置响应式断点、制作动画、定义设计令牌，或处理暗黑模式时，可使用此技能。适用于处理带有className属性的组件文件、CSS Module文件（*.module.css，文件名采用PascalCase）、Tailwind配置文件（tailwind.config.js）、全局样式表（globals.css），或任何与样式相关的代码。此技能确保以Tailwind CSS为主导的样式方案，同时保持实用类的有序排列（布局 → 间距 → 排版 → 颜色 → 边框 → 响应式），贯彻移动端优先的响应式设计（sm: 640px，md: 768px，lg: 1024px，xl: 1280px），在tailwind.config.js中统一定义设计令牌，必要时使用camelCase的CSS Modules定制样式，确保触控友好的聚焦状态（focus:ring-2 focus:ring-offset-2）与充足的色彩对比度（最低4.5:1），支持暗黑模式（darkMode: 'class'），在配置中自定义关键帧动画，通过CSS Purge实现性能优化，同时杜绝内联样式。

SKILL.md
--- frontmatter
name: Frontend CSS
description: Write and structure CSS using Tailwind CSS v4.0+ utility classes as the default approach, with CSS Modules (camelCase class names) or custom CSS when Tailwind doesn't achieve the desired visual result. Use this skill when styling UI components, implementing layouts, adding responsive breakpoints, creating animations, defining design tokens, or handling dark mode. Apply when working on component files with className attributes, CSS Module files (*.module.css with PascalCase filenames), Tailwind configuration (tailwind.config.js), global stylesheets (globals.css), or any styling-related code. This skill ensures Tailwind CSS as the primary styling method with organized utility classes (layout → spacing → typography → colors → borders → responsive), mobile-first responsive design (sm: 640px, md: 768px, lg: 1024px, xl: 1280px), consistent design tokens defined in tailwind.config.js, CSS Modules with camelCase for custom styles when needed, accessible focus states (focus:ring-2 focus:ring-offset-2) and color contrast (4.5:1 minimum), dark mode support (darkMode: 'class'), custom keyframe animations in config, performance optimizations through CSS purging, and no inline styles.

Frontend CSS

When to use this skill:

  • •When adding styles to React components or UI elements
  • •When implementing layouts with flexbox or grid using Tailwind
  • •When creating responsive designs across mobile, tablet, and desktop
  • •When defining color schemes, typography, or spacing systems in tailwind.config.js
  • •When working with Tailwind CSS utility classes and organizing them by category
  • •When creating CSS Module files (PascalCase.module.css) for custom component styles
  • •When configuring Tailwind (tailwind.config.js) with custom colors, fonts, spacing
  • •When implementing animations or transitions (animate-* utilities or custom keyframes)
  • •When adding dark mode support with dark: variant
  • •When ensuring accessible color contrast (4.5:1) and visible focus states
  • •When optimizing CSS performance and bundle size (CSS purging)
  • •When working on component files with styling (*.tsx, *.jsx, *.module.css)
  • •When centering content, creating grid layouts, or using flexbox patterns
  • •When deciding between Tailwind, CSS Modules, or custom CSS for specific visual needs

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