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

0•

디자인 도구

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.

주요 기능

01Comprehensive accessibility compliance including focus states and contrast

02Performance optimization via efficient selectors and bundle management

03Integrated quality tooling with PostCSS and Stylelint configurations

04Mobile-first responsive layouts with Grid, Flexbox, and Container Queries

05Modern CSS architecture using BEM naming and custom properties

060 GitHub stars

사용 사례

01Setting up an automated CSS linting and build pipeline for a new project

02Refactoring legacy CSS to modern standards like BEM and CSS variables

03Building a responsive, accessible component library from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cuioss/cui-llm-rules cui-css

For use in Claude.ai and ChatGPT

Download Skill