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 workin...
Installs into .claude/skills of the current project.
Are you the author of Frontend Css?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/diegosouzapw-frontend-css)
---
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](../../../agent-os/standards/frontend/css.md)
