frontend-css_skill

Overview

This skill guides writing maintainable, consistent frontend CSS across projects using Tailwind, BEM, CSS modules, CSS-in-JS, and traditional stylesheets. It emphasizes design tokens, predictable class naming, and performance optimizations so styles scale with the codebase. Use it to produce clear, testable, and themeable styling for components and layouts.

How this skill works

The skill inspects component markup and project conventions, then recommends class names, structure, and tokenized values that follow the chosen methodology (e.g., Tailwind utilities, BEM, or CSS modules). It suggests responsive rules, accessibility-related visual states, and production optimizations like purging unused styles and minimizing specificity. When necessary it produces snippets for .css/.scss/.less files, Tailwind utility sets, or CSS-in-JS blocks aligned with the project’s token system.

When to use it

• Writing or refactoring component styles (.css, .scss, .sass, .less, .module.css)
• Implementing or updating Tailwind utility classes and config
• Creating or updating design tokens (colors, spacing, typography)
• Adding responsive rules, themes, or dark mode support
• Optimizing styles for production (purge, tree-shake, bundle size)

Best practices

• Prefer design tokens for colors, spacing, and type to keep consistency and enable theming
• Follow the project methodology (Tailwind, BEM, CSS modules) and avoid mixing patterns in the same component
• Keep specificity low; use utility classes or single-purpose selectors instead of deep combinators
• Write responsive rules mobile-first and consolidate breakpoints in tokens or config
• Purge unused CSS and prefer tree-shakable utilities to reduce bundle size

Example use cases

• Convert a legacy .css file to tokenized SCSS with variables and component-scoped classes
• Implement a responsive card component using Tailwind utilities and a theme token for spacing
• Create CSS modules for a React component to avoid global leakage and simplify testing
• Add dark mode variants and token overrides for a site-wide theme switch
• Optimize a large stylesheet by identifying unused selectors and enabling purge in the build