Frontend CSS

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 CSS styles in .css, .scss, .module.css, or styled-components files
• When applying Tailwind CSS utility classes to components (className="flex justify-center...")
• When configuring Tailwind design tokens in tailwind.config.js (colors, spacing, breakpoints)
• When implementing CSS modules for scoped component styling
• When using CSS-in-JS solutions (styled-components, Emotion, CSS modules)
• When creating or maintaining design system tokens (CSS custom properties/​variables)
• When implementing theming systems with CSS variables or Tailwind's dark mode
• When styling layouts using modern CSS (flexbox, grid, container queries)
• When ensuring consistent methodology (BEM, utility-first, CSS modules) across the project
• When optimizing CSS bundle size with purging, tree-shaking, or critical CSS extraction
• When implementing responsive utilities or custom responsive breakpoints
• When working with CSS preprocessors (Sass, Less) or PostCSS configurations
• When avoiding framework style overrides and working with the chosen CSS methodology
• When ensuring CSS performance and avoiding specificity conflicts

Instructions

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