modern-css
✓Appliquez de manière proactive lors de la création de systèmes de conception, de bibliothèques de composants ou de toute application frontale. Déclencheurs sur CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, animations pilotées par défilement, transitions d'affichage, positionnement de l'ancre, popover, sélection personnalisable, visibilité du contenu, propriétés logiques, retour à la ligne, taille d'interpolation, pince, dimensionnement de champ, CSS moderne, CSS architecture, conception réactive, mode sombre, thématique, jetons de conception, couches en cascade. À utiliser lors de l'écriture de CSS pour n'importe quel projet Web, du choix d'approches de mise en page, de la création de composants réactifs, de la mise en œuvre du mode sombre ou de la thématique, de la création d'animations ou de transitions, du style des éléments de formulaire ou de la modernisation des feuilles de style héritées. Fonctionnalités CSS modernes et meilleures pratiques pour créer des interfaces avec du CSS natif pur.
Installation
SKILL.md
Pure native CSS for building interfaces — no preprocessors, no frameworks.
| CSS Grid, Subgrid, Flexbox | @function, if() (Chrome-only) | | Container Queries (size + style) | Customizable (Chrome-only) | | :has(), :is(), :where() | Scroll-state queries (Chrome-only) | | CSS Nesting, @layer, @scope | sibling-index(), sibling-count() | | @property (typed custom props) | ::scroll-button(), ::scroll-marker |
| oklch(), color-mix(), light-dark() | Typed attr() beyond content | | Relative color syntax | field-sizing: content | | @starting-style, transition-behavior | interpolate-size (Chrome-only) | | Scroll-driven animations | Grid Lanes / masonry (experimental) | | Anchor positioning, Popover API | random() (Safari TP only) |
Appliquez de manière proactive lors de la création de systèmes de conception, de bibliothèques de composants ou de toute application frontale. Déclencheurs sur CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, animations pilotées par défilement, transitions d'affichage, positionnement de l'ancre, popover, sélection personnalisable, visibilité du contenu, propriétés logiques, retour à la ligne, taille d'interpolation, pince, dimensionnement de champ, CSS moderne, CSS architecture, conception réactive, mode sombre, thématique, jetons de conception, couches en cascade. À utiliser lors de l'écriture de CSS pour n'importe quel projet Web, du choix d'approches de mise en page, de la création de composants réactifs, de la mise en œuvre du mode sombre ou de la thématique, de la création d'animations ou de transitions, du style des éléments de formulaire ou de la modernisation des feuilles de style héritées. Fonctionnalités CSS modernes et meilleures pratiques pour créer des interfaces avec du CSS natif pur. Source : ccheney/robust-skills.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/ccheney/robust-skills --skill modern-css- Source
- ccheney/robust-skills
- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-17
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que modern-css ?
Appliquez de manière proactive lors de la création de systèmes de conception, de bibliothèques de composants ou de toute application frontale. Déclencheurs sur CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, animations pilotées par défilement, transitions d'affichage, positionnement de l'ancre, popover, sélection personnalisable, visibilité du contenu, propriétés logiques, retour à la ligne, taille d'interpolation, pince, dimensionnement de champ, CSS moderne, CSS architecture, conception réactive, mode sombre, thématique, jetons de conception, couches en cascade. À utiliser lors de l'écriture de CSS pour n'importe quel projet Web, du choix d'approches de mise en page, de la création de composants réactifs, de la mise en œuvre du mode sombre ou de la thématique, de la création d'animations ou de transitions, du style des éléments de formulaire ou de la modernisation des feuilles de style héritées. Fonctionnalités CSS modernes et meilleures pratiques pour créer des interfaces avec du CSS natif pur. Source : ccheney/robust-skills.
Comment installer modern-css ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/ccheney/robust-skills --skill modern-css Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/ccheney/robust-skills
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-17