Can it help with CSS build tools?

Absolutely, it provides standardized configurations for PostCSS, Stylelint, and Prettier to automate code quality and formatting.

What naming convention does this skill follow?

It strictly adheres to the BEM (Block Element Modifier) methodology to ensure modular, scalable, and maintainable CSS architecture.

How does it handle accessibility?

It enforces WCAG standards, covering essential factors like color contrast ratios, focus management, and user motion preferences.

Is it suitable for dark mode implementation?

Yes, it utilizes CSS custom properties to manage both system-level preferences and manual dark mode toggles efficiently.

Does it support modern layout techniques?

Yes, it prioritizes CSS Grid, Flexbox, and the latest Container Queries for robust, fluid responsive design.

Modern CSS & Responsive Design Standards

Name: Modern CSS & Responsive Design Standards
Author: cuioss

bycuioss

デザインツール

Implements modern CSS standards, responsive design patterns, and quality-driven styling workflows for CUI projects.

概要

This skill provides a comprehensive framework for developing professional, high-performance CSS within CUI ecosystems. It equips Claude with deep knowledge of modern CSS features like Grid, Flexbox, and Container Queries, while enforcing strict adherence to BEM naming conventions, accessibility standards (WCAG), and mobile-first responsive patterns. By integrating tooling guidelines for PostCSS and Stylelint, it ensures that every line of CSS is optimized for performance, maintainability, and cross-browser compatibility, making it ideal for developers building scalable design systems.

主な機能

Comprehensive accessibility compliance including focus states and contrast
Performance optimization via efficient selectors and bundle management
Integrated quality tooling with PostCSS and Stylelint configurations
Mobile-first responsive layouts with Grid, Flexbox, and Container Queries
Modern CSS architecture using BEM naming and custom properties
0 GitHub stars

ユースケース

Setting up an automated CSS linting and build pipeline for a new project
Refactoring legacy CSS to modern standards like BEM and CSS variables
Building a responsive, accessible component library from scratch

概要

主な機能

Comprehensive accessibility compliance including focus states and contrast
Performance optimization via efficient selectors and bundle management
Integrated quality tooling with PostCSS and Stylelint configurations
Mobile-first responsive layouts with Grid, Flexbox, and Container Queries
Modern CSS architecture using BEM naming and custom properties
0 GitHub stars

ユースケース

Setting up an automated CSS linting and build pipeline for a new project
Refactoring legacy CSS to modern standards like BEM and CSS variables
Building a responsive, accessible component library from scratch