đź’» DĂ©veloppement

responsive-design-helper

Conception responsive et mobile-first pour tout type de site ou app web.

⚡ 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 -- responsive-design-helper --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } responsive-design-helper -Launch"

🚀 Déjà installé ?

claude "/responsive-design-helper"

Ou tapez /responsive-design-helper 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 :

responsivemobile firstmedia queriesbreakpointsadaptatifmobiletablettes'affiche mal sur mobile

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/responsive-design-helper ~/.claude/skills/

Source : dev-skills/responsive-design-helper

đź“– Manuel

Responsive Design Helper

Workflow

  1. Approche mobile-first : commencer par concevoir et coder pour le plus petit écran (320-375px), puis enrichir progressivement avec des media queries min-width pour les écrans plus larges — jamais l'inverse (desktop-first génère des surcharges CSS inutiles).
  1. Définition des breakpoints : choisir les breakpoints basés sur le contenu et non les devices spécifiques (les modèles changent). Points de référence courants : 480px (grand mobile), 768px (tablette portrait), 1024px (tablette paysage / petit desktop), 1280px (desktop standard).
  1. Layout fluide : utiliser des unités relatives (%, vw, vh, dvh) plutôt que des pixels fixes, les fr units de CSS Grid pour les grilles fluides, et les fonctions clamp(), min(), max() pour des valeurs auto-adaptatives sans media queries.
  1. Typographie responsive : appliquer clamp(min, preferred, max) pour une échelle de taille fluide (ex. clamp(1rem, 2.5vw, 1.5rem)), définir une échelle typographique cohérente, et éviter les textes trop petits sur mobile (minimum 16px pour le corps).
  1. Images responsives : utiliser srcset et sizes pour charger la résolution adaptée, l'élément <picture> pour le format artistique (art direction), loading="lazy" pour le chargement différé, et proposer WebP/AVIF avec fallback JPEG/PNG.
  1. Navigation adaptative : implémenter un hamburger menu ou bottom navigation sur mobile, un drawer/sidebar sur tablette, et la navigation complète sur desktop. Assurer la cohérence de l'expérience entre les patterns.
  1. Touch-friendly : dimensionner les zones tactiles à minimum 44×44px (recommandation Apple/Google), gérer les gestes swipe si pertinent, et fournir des alternatives aux interactions hover pour les écrans tactiles (pas d'info uniquement au survol).
  1. Testing multi-appareils : utiliser Chrome DevTools Device Mode pour les tests rapides, BrowserStack ou LambdaTest pour les vrais navigateurs/OS, et tester impérativement sur des appareils réels avant livraison (comportements gyroscopiques, performances CPU réelles).

Règles