frontend-css

Write and structure CSS following the project's methodology (Tailwind CSS, BEM, CSS Modules, utility classes), maintaining design system consistency, avoiding framework style overrides, and minimizing custom CSS. Use this skill when creating or modifying CSS files (.css, .scss, .sass, .less, .pcss), CSS Module files (.module.css, .module.scss), styled-components or emotion files (.styles.ts, .styles.js), Tailwind CSS configuration files (tailwind.config.js, tailwind.config.ts), theme files, or when writing utility classes in JSX/TSX components, HTML templates, or Vue/Svelte files. Use this when implementing Tailwind CSS utility classes like flex, grid, text-center, bg-blue-500, p-4, rounded-lg, shadow-md, hover:opacity-80, or responsive variants like sm:block, md:flex, lg:grid-cols-3, xl:max-w-7xl for mobile-first responsive design, writing BEM-style class names following the Block__Element--Modifier convention (like header__logo--large or card__title--featured) for structured, maintainable CSS architecture,

// tip: Run this command in your terminal to install the skill