Frontend CSS

Consistent CSS styling is enforced by adhering to your project's chosen methodology—such as Tailwind, BEM, or CSS modules—and applying design tokens uniformly. This Skill guides you to use predefined utility classes, design tokens for colors and spacing, and responsive layout patterns, eliminating visual inconsistencies and reducing maintenance overhead across your application.

Yes. This Skill supports Tailwind utilities, styled-components, CSS-in-JS, CSS modules, and plain CSS files. It guides you on when and how to use each approach within your project's design system, ensuring consistency whether you're using Tailwind classes, component-scoped styles, or a mix of both.

Design tokens—predefined values for colors, spacing, typography, and border-radius—are applied through your project's design system. This Skill ensures you reference tokens instead of hardcoding values, maintaining visual harmony and making global design updates faster and safer across all components.

This Skill promotes production-ready CSS practices including tree-shaking, purging unused styles, and efficient utility class usage. It guides you toward optimized stylesheet practices that reduce file size and improve load times while maintaining design consistency.

Yes. This Skill works best when your project has defined a CSS methodology—whether Tailwind, BEM, CSS modules, or another approach—and established design tokens. The Skill then enforces that methodology; it doesn't choose one for you.

This Skill handles CSS files (.css, .scss, .module.css), styled-components, CSS-in-JS libraries, Tailwind configurations, and responsive layout patterns. It applies across any styling approach your project uses while enforcing design system compliance.