Notre avis
Ce skill fournit des standards de développement CSS modernes pour les projets CUI, couvrant les fondamentaux, le responsive design, l'optimisation des performances, l'accessibilité et les outils de build.
Points forts
- Couverture complète des bonnes pratiques CSS (BEM, custom properties, Grid/Flexbox)
- Accent sur la performance et l'accessibilité avec des directives concrètes
- Intégration avec des outils comme PostCSS, Stylelint et Prettier
- Approche mobile-first et utilisation des Container Queries
Limites
- Spécifique aux projets CUI, peut nécessiter adaptation pour d'autres contextes
- Ne couvre pas les frameworks CSS comme Tailwind ou Bootstrap
- Les standards sont nombreux et peuvent être lourds à appliquer sur des petits projets
Utilisez ce skill lorsque vous écrivez ou modifiez du CSS, mettez en place une toolchain CSS, ou devez garantir la qualité et la cohérence du code CSS dans un projet.
Évitez ce skill si vous utilisez un framework CSS complet avec ses propres conventions, ou si le projet est trop simple pour justifier une configuration d'outils.
Analyse de sécurité
SûrThe skill is a CSS standards document that only uses read-only tools (Read, Grep, Glob). It does not include any executable commands, destructive operations, or data exfiltration. The instructions are purely educational and advisory.
Aucun point d'attention détecté
Exemples
Setup PostCSS with plugins (import, nested, autoprefixer, csso) and Stylelint with property ordering in my CUI project.Create a responsive dashboard layout using CSS Grid with auto-fit columns and a sidebar breakpoint.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
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.