Notre avis
Ce skill fournit des normes modernes de développement CSS pour les projets CUI, couvrant les fondamentaux, le responsive design, la performance et l'outillage.
Points forts
- Approche complète avec BEM, Grid, Flexbox et Container Queries
- Intégration d'outils de qualité (PostCSS, Stylelint, Prettier)
- Accent mis sur l'accessibilité, le dark mode et la performance
Limites
- Nécessite une connaissance préalable du CSS moderne
- Principalement orienté vers les projets CUI, pas générique
- La configuration des outils peut être complexe pour les débutants
Utilisez ce skill lorsque vous développez ou révisez du CSS dans un projet CUI, en particulier pour la mise en place de standards, de responsive design ou d'outillage de qualité.
Évitez ce skill pour des projets sans besoin de structuration CSS avancée ou lorsque vous utilisez un framework CSS complet qui gère déjà ces aspects.
Analyse de sécurité
SûrThe skill only uses Read, Grep, Glob for file inspection and does not execute any code or external tools. It poses no risk of destructive or exfiltrating actions.
Aucun point d'attention détecté
Exemples
I need to set up PostCSS with Stylelint and Prettier for a CUI project. Help me configure the build pipeline and quality checks.Create a responsive card grid using CSS Grid, BEM naming, and container queries. Ensure it's mobile-first and accessible.Implement dark mode support using CSS custom properties and a toggle. Follow the standards for system preference and manual override.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
Expert Next.js App Router
Developpement
Un skill qui transforme Claude en expert Next.js App Router.
Générateur de README
Developpement
Crée des README.md professionnels et complets pour vos projets.
Rédacteur de Documentation API
Developpement
Génère de la documentation API complète au format OpenAPI/Swagger.