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, creating CSS Modules for component-scoped styling that prevents global namespace pollution and CSS conflicts by generating unique class names, defining and using design tokens for colors, spacing, typography, border radius, shadows, transitions, and other design system values to ensure visual consistency across the application, working with CSS-in-JS libraries like styled-components, emotion, Stitches, or vanilla-extract for component-level styling with TypeScript support, configuring Tailwind CSS purging or tree-shaking tools like PurgeCSS to remove unused utility classes and optimize production bundle size for faster page loads, avoiding unnecessary overrides of framework or library default styles by working with the framework's design patterns and customization APIs instead of fighting against them with !important declarations, establishing a consistent CSS methodology (Tailwind utility-first, BEM, CSS Modules, or CSS-in-JS) and applying it uniformly throughout the project to maintain code quality, leveraging framework utilities like Tailwind's built-in classes and shadcn/ui components to reduce the amount of custom CSS that needs to be written and maintained, customizing Tailwind CSS theme in tailwind.config.js to define project-specific colors, spacing scales, font families, breakpoints, and other design tokens, documenting design system guidelines in README or Storybook for color palettes, spacing scales, typography scales, component styles, and other design tokens for team consistency, refactoring custom CSS to use Tailwind utility classes when possible for better consistency, maintainability, and reduced bundle size, organizing CSS files logically with clear separation between base styles, components, utilities, and vendor overrides, using CSS custom properties (CSS variables) for dynamic theming and runtime color switching when needed, and ensuring all styles follow the project's established conventions for naming, organization, and implementation patterns.