# Frontend CSS

> Write maintainable CSS and styling code using Tailwind CSS, CSS Modules, or other CSS methodologies. Use this skill when styling components, defining design tokens, or working with any CSS-related code. Apply when working on files like *.css, *.scss, *.module.css, tailwind.config.js, components with className props, or any styling code. Essential for following consistent CSS methodologies (Tailwind utilities, BEM, CSS-in-JS), avoiding framework style overrides, maintaining design system tokens (colors, spacing, typography), minimizing custom CSS in favor of framework utilities, and optimizing CSS for production with purging/tree-shaking.

- Skill: `diegosouzapw/frontend-css-7` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/frontend-css-7`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/frontend-css-7/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/diegosouzapw/frontend-css-7

---


## When to use this skill:

- When writing Tailwind CSS utility classes in components
- When editing CSS, SCSS, or CSS Module files
- When configuring tailwind.config.js or design tokens
- When applying consistent spacing, colors, and typography
- When styling React/Vue/Angular components
- When deciding between utility classes vs custom CSS
- When implementing design system patterns
- When optimizing CSS bundle size for production
- When refactoring to reduce CSS overrides and conflicts
- When working with CSS variables and theming
- When ensuring consistent methodology across the codebase

# 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](../../../agent-os/standards/frontend/css.md)

