How does this skill improve CSS accessibility?

It enforces the use of rem units for font scaling to respect user preferences and prioritizes semantic HTML and accessible color contrast ratios.

How does it handle CSS specificity issues?

It provides a clear hierarchy for calculations and offers safe alternatives to !important, such as self-chaining and attribute selectors.

Does it support CSS preprocessors like Sass?

Yes, it includes specific guidance on preprocessor best practices, such as choosing mixins over @extend and avoiding ampersand concatenation.

Can it help with layout spacing and margins?

Absolutely, it follows a 'component without margin' philosophy, moving spacing responsibilities to parents or utility classes to prevent layout side effects.

CSS Architecture & Styling

Name: CSS Architecture & Styling
Author: mintuz

bymintuz

•

Design Tools

Generates production-ready, accessible, and maintainable CSS following industry-standard architectural principles and best practices.

About

This skill empowers Claude to author high-quality CSS by enforcing professional standards like Single Responsibility, Immutable CSS, and the Open/Closed principle. It provides a comprehensive framework for managing specificity, choosing between relative (rem) and absolute (px) units, and implementing layout algorithms effectively. Whether you are refactoring legacy stylesheets or building a modern design system, this skill ensures your styles are scalable, accessible, and free from common pitfalls like deep nesting or reactive !important rules.

Key Features

Structured refactoring workflows for cleaning up technical debt
Architectural pattern enforcement (BEM, Single Responsibility, Immutable CSS)
Standardized specificity management and hierarchy calculations
Intelligent unit selection (rem vs px) based on accessibility needs
Maintainable layout implementations using Flexbox and Grid
14 GitHub stars

Use Cases

Building a scalable and accessible design system from scratch
Refactoring bloated legacy CSS into modular, maintainable components
Optimizing web layouts for responsive design and user font preferences

About

Key Features

Structured refactoring workflows for cleaning up technical debt
Architectural pattern enforcement (BEM, Single Responsibility, Immutable CSS)
Standardized specificity management and hierarchy calculations
Intelligent unit selection (rem vs px) based on accessibility needs
Maintainable layout implementations using Flexbox and Grid
14 GitHub stars

Use Cases

Building a scalable and accessible design system from scratch
Refactoring bloated legacy CSS into modular, maintainable components
Optimizing web layouts for responsive design and user font preferences