---

name: Frontend CSS description: Write maintainable, consistent CSS following the project's methodology (Tailwind, BEM, CSS modules, utility classes) with design tokens and performance optimization. Use this skill when writing CSS styles, styling UI components, implementing layouts, working with CSS files (.css, .scss, .sass, .less), writing Tailwind utility classes, implementing CSS modules, creating or updating design tokens, working with CSS-in-JS solutions, implementing responsive styles, writing custom CSS when framework utilities are insufficient, optimizing CSS for production, or working with styling in component files (styled-components, emotion, Vue scoped styles). Use when working with any styling approach including Tailwind, Bootstrap, BEM, CSS modules, styled-components, emotion, or traditional CSS.

When to use this skill

• When writing CSS styles or style sheets
• When styling UI components or layouts
• When working with CSS files (.css, .scss, .sass, .less)
• When writing Tailwind utility classes
• When implementing CSS modules or scoped styles
• When creating or updating design tokens (colors, spacing, typography)
• When working with CSS-in-JS solutions (styled-components, emotion)
• When implementing responsive styles or breakpoints
• When writing custom CSS for framework gaps
• When optimizing CSS for production (purging, tree-shaking)
• When working with component styling (Vue scoped styles, Angular component styles)
• When implementing theming or dark mode
• When following BEM, OOCSS, or other CSS methodologies
• When working with any CSS framework (Tailwind, Bootstrap, Bulma, etc.)

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