Notre avis

Fournit des normes de développement CSS modernes pour les projets CUI, couvrant les fondamentaux, le responsive design, la performance, l'accessibilité et les outils de build.

Points forts

Impose la convention BEM et l'utilisation de propriétés personnalisées
Inclut des patterns responsive avancés avec les container queries
Couvre l'accessibilité (focus, préférences de mouvement) et le mode sombre
Fournit une configuration complète PostCSS/Stylelint pour la qualité

Limites

Suppose une structure de projet CUI spécifique
Ne couvre pas tous les cas d'usage CSS avancés (animations complexes, SVG)
Dépend d'outils spécifiques (PostCSS, Stylelint) qui peuvent ne pas convenir à tous les environnements

Quand l'utiliser

À utiliser lors de l'écriture ou de la modification de CSS pour des projets CUI, de la mise en place d'outillage CSS, ou pour garantir des designs responsives et accessibles.

Quand l'éviter

Pour des projets n'utilisant pas de CSS ou nécessitant des méthodologies CSS non standard (CSS-in-JS, Tailwind non hybride).

Exemples

Set up tooling

Set up PostCSS, Stylelint, and Prettier for a new CUI project following our CSS standards.

Responsive grid layout

Write a responsive grid layout using CSS Grid and container queries for a dashboard component.

Dark mode implementation

Implement dark mode support using 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

Normes CSS Modernes pour Projets CUI

Recommandé pour