💻 Développement

css-layout-solver

Résout les problèmes de layout CSS avec Flexbox, Grid et techniques modernes.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- css-layout-solver --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } css-layout-solver -Launch"

🚀 Déjà installé ?

claude "/css-layout-solver"

Ou tapez /css-layout-solver dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

CSSlayoutFlexboxGridcentreralignerresponsivemon layout est casséoverflowz-index

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/css-layout-solver ~/.claude/skills/

Source : dev-skills/css-layout-solver

📖 Manuel

CSS Layout Solver

Workflow

  1. Comprendre le layout souhaité : recueillir la description précise du résultat attendu — maquette, screenshot du problème actuel, ou description textuelle. Identifier le contexte (page entière, widget, carte, navigation).
  1. Choisir la technique adaptée : sélectionner Flexbox pour les layouts unidimensionnels (lignes ou colonnes), CSS Grid pour les layouts bidimensionnels (grilles complexes), ou container queries pour des composants auto-adaptatifs indépendants du viewport.
  1. Implémenter avec code CSS complet et commenté : fournir un code directement fonctionnel avec les propriétés clés commentées pour expliquer les choix (ex. flex: 1 1 auto vs flex: 0 0 auto).
  1. Gérer le responsive : ajouter media queries basées sur le contenu, utiliser clamp() pour des valeurs fluides, min() et max() pour les contraintes, et container queries pour les composants réutilisables.
  1. Déboguer les problèmes courants : diagnostiquer overflow caché, conflits de z-index et stacking contexts, margin collapse entre blocs, shrink non désiré sur les enfants flex, et height:100% sans contexte parent.
  1. Animations et transitions CSS : proposer des animations performantes basées sur transform et opacity (GPU-accelerated), des keyframes pour les séquences complexes, et will-change uniquement quand nécessaire.
  1. Variables CSS et théming : structurer le design avec custom properties (--color-primary), implémenter le dark mode via prefers-color-scheme et variables, et organiser les design tokens en couches logiques.
  1. Optimiser la maintenabilité : réduire la spécificité (préférer les classes aux IDs), utiliser @layer pour contrôler la cascade, éviter !important, et mesurer l'impact sur le rendering performance (Composite, Paint, Layout).

Règles