Does it support modern CSS features like Container Queries?

Yes, it includes specific implementation patterns for modern features including Container Queries, CSS Grid, and fluid typography using the clamp function.

What CSS tooling does it cover?

The skill provides configuration patterns for PostCSS, Stylelint, and Prettier, including build pipeline integration for production optimization.

Can it help with web accessibility compliance?

Absolutely. It provides standards for focus states, motion preferences, and color contrast to ensure components meet accessibility requirements.

How does this skill improve CSS quality?

It enforces BEM naming, low specificity, and integrates with linting tools like Stylelint to ensure maintainable, high-performance stylesheets.

CUI CSS Development Standards

Name: CUI CSS Development Standards
Author: cuioss

bycuioss

デザインツール

Enforces modern CSS standards and best practices for responsive, accessible, and performant CUI project interfaces.

概要

This skill serves as a comprehensive reference guide for modern CSS development within the CUI ecosystem, providing Claude Code with specific patterns for implementing BEM naming conventions, mobile-first responsive designs, and container queries. By integrating tooling standards like PostCSS and Stylelint, the skill automates the enforcement of quality checks, performance optimization, and dark mode support, ensuring that generated styles are consistent, maintainable, and production-ready. It is particularly useful for developers looking to standardize frontend architecture across complex AI-orchestrated projects.

主な機能

Automated quality checks via PostCSS, Stylelint, and Prettier configurations
Comprehensive accessibility standards including focus management and contrast
BEM naming methodology and component-driven architecture enforcement
Built-in support for fluid typography and system-aware dark mode
Advanced responsive patterns using CSS Grid, Flexbox, and Container Queries
0 GitHub stars

ユースケース

Setting up a new project's CSS architecture and automated tooling pipeline
Refactoring legacy CSS into modern, maintainable BEM-based components
Implementing complex responsive layouts that require accessibility compliance

概要

主な機能

Automated quality checks via PostCSS, Stylelint, and Prettier configurations
Comprehensive accessibility standards including focus management and contrast
BEM naming methodology and component-driven architecture enforcement
Built-in support for fluid typography and system-aware dark mode
Advanced responsive patterns using CSS Grid, Flexbox, and Container Queries
0 GitHub stars

ユースケース

Setting up a new project's CSS architecture and automated tooling pipeline
Refactoring legacy CSS into modern, maintainable BEM-based components
Implementing complex responsive layouts that require accessibility compliance