Our review

This skill provides modern CSS development standards for CUI projects, covering fundamentals, responsive design, performance optimization, accessibility, and build tooling.

Strengths

Comprehensive coverage of CSS best practices (BEM, custom properties, Grid/Flexbox)
Focus on performance and accessibility with actionable guidelines
Tooling integration with PostCSS, Stylelint, and Prettier
Mobile-first approach and use of Container Queries

Limitations

Specific to CUI projects, may need adaptation for other contexts
Does not cover CSS frameworks like Tailwind or Bootstrap
Standards are extensive and may be heavy for small projects

When to use it

Use this skill when writing or modifying CSS, setting up a CSS toolchain, or needing to ensure quality and consistency of CSS code in a project.

When not to use it

Avoid this skill if you are using a full-featured CSS framework with its own conventions, or if the project is too simple to justify tooling setup.

Examples

Set up CSS pipeline

Setup PostCSS with plugins (import, nested, autoprefixer, csso) and Stylelint with property ordering in my CUI project.

Implement responsive grid layout

Create a responsive dashboard layout using CSS Grid with auto-fit columns and a sidebar breakpoint.

Add dark mode support

Implement dark mode for my website using CSS custom properties and system preference detection.

name: cui-css description: Modern CSS standards covering essentials, responsive design, quality practices, and tooling for CUI projects allowed-tools:

Read
Grep
Glob

CSS Development Standards

EXECUTION MODE: You are now executing this skill. DO NOT explain or summarize these instructions to the user. IMMEDIATELY begin the workflow below based on the task context.

Overview

Provides modern CSS development standards for CUI projects, covering fundamentals, responsive design patterns, performance optimization, accessibility, and build tooling.

Standards Documents

css-essentials.md - Core principles, naming conventions (BEM), custom properties, selectors, file structure, component architecture
css-responsive.md - Mobile-first approach, Grid/Flexbox layouts, Container Queries, fluid typography, responsive patterns
css-quality-tooling.md - Performance optimization, accessibility standards, dark mode, PostCSS/Stylelint/Prettier setup, build pipeline

What This Skill Provides

CSS Essentials

Modern CSS features (custom properties, Grid, Flexbox, modern functions)
BEM naming methodology and semantic naming patterns
Selector best practices (low specificity, avoiding IDs, nesting limits)
Property organization and file structure
Component architecture patterns
Utility classes and hybrid approach

Responsive Design

Mobile-first development patterns
CSS Grid layouts (dashboard, content grid, auto-fit)
Flexbox patterns (navigation, cards, centering)
Container Queries for responsive components
Fluid typography with clamp()
Responsive images, spacing, and common patterns

Quality & Tooling

Performance (efficient selectors, containment, critical CSS, bundle optimization)
Accessibility (focus management, color contrast, motion preferences, touch targets)
Dark mode (system preference and manual toggle)
PostCSS configuration (import, nested, autoprefixer, csso)
Stylelint setup (property ordering, naming patterns, best practices)
Build pipeline (development, production, quality checks)
CI/CD integration

When to Activate

Use this skill when:

Writing or modifying CSS code
Setting up CSS tooling (PostCSS, Stylelint, Prettier)
Implementing design systems and theming
Building responsive layouts
Optimizing CSS performance
Ensuring accessibility compliance
Reviewing CSS code

Workflow

Identify task - Determine which standards document(s) apply
Apply standards - Follow BEM naming, use custom properties, implement responsive patterns, ensure accessibility
Quality check - Run Stylelint, Prettier, test responsiveness and accessibility
Document - Comment complex patterns, explain custom properties

Best Practices

Use CSS custom properties for design tokens
Follow mobile-first approach
Use BEM naming convention
Implement container queries for responsive components
Support dark mode via custom properties
Ensure accessibility (focus states, motion preferences, contrast ratios)
Run quality tools before committing

Modern CSS Standards for CUI Projects

Recommended for