---

name: Frontend CSS description: Write and maintain CSS following a consistent methodology (Tailwind, BEM, utility classes, CSS modules), avoiding framework style overrides, maintaining design tokens for consistency, minimizing custom CSS, and optimizing for production with CSS purging and tree-shaking. Use this skill when writing CSS styles, working with CSS frameworks like Tailwind CSS, creating design systems with design tokens, implementing utility classes, managing CSS architecture, optimizing CSS performance, or working with CSS preprocessors. This skill applies when working on .css files, .scss files, .vue component styles, styled-components, or any styling code in your frontend application.

Frontend CSS

When to use this skill

• When writing CSS styles for UI components or pages
• When working with CSS frameworks like Tailwind CSS, Bootstrap, or custom frameworks
• When creating design systems with design tokens (colors, spacing, typography)
• When implementing utility classes or component-specific styles
• When managing CSS architecture and organization
• When optimizing CSS performance and bundle size
• When working with CSS preprocessors (Sass, Less, PostCSS)
• When working on .css, .scss, or .vue component style sections
• When implementing styled-components or CSS-in-JS solutions
• When ensuring consistent styling across the application
• When configuring CSS purging or tree-shaking for production builds
• When avoiding style conflicts or specificity issues

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