Frontend CSS

根据作用域CSS模式、设计令牌、响应式断点和暗模式支持编写Tailwind CSS工具类和组件样式。在为组件设置样式、创建布局、实现设计系统或编写CSS/Tailwind类时使用此技能。当处理Astro组件样式块、Tailwind配置文件、全局CSS文件、CSS自定义属性和设计令牌、组件作用域样式、响应式断点和媒体查询、暗模式主题、CSS Grid和Flexbox布局、动画和过渡样式，或者Tailwind @apply指令和工具组合时使用。

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.

When to use this skill

When writing Tailwind CSS utility classes in component markup
When creating scoped component styles in <style> blocks within .astro files
When configuring Tailwind (tailwind.config.mjs) with custom colors, spacing, or breakpoints
When defining global styles in CSS files (e.g., src/styles/global.css)
When implementing CSS custom properties (CSS variables) for design tokens
When creating responsive layouts using CSS Grid or Flexbox
When implementing media queries for different screen sizes
When setting up dark mode theming with CSS or Tailwind's dark: variant
When writing CSS animations, transitions, or keyframe animations
When using BEM methodology for class naming in custom CSS
When optimizing CSS performance (critical CSS, lazy loading, purging unused styles)

Instructions

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