Conception responsive et mobile-first pour tout type de site ou app web. Se déclenche avec "responsive", "mobile first", "media queries", "breakpoints", "adaptatif", "mobile", "tablette", "s'affiche mal sur mobile". Also triggers on "responsive design", "mobile-first layout".
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Conception responsive et mobile-first pour tout type de site ou app web. Se déclenche avec "responsive", "mobile first", "media queries", "breakpoints", "adaptatif", "mobile", "tablette", "s'affiche mal sur mobile". Also triggers on "responsive design", "mobile-first layout".
Responsive Design Helper
Workflow en étapes
1. Diagnostic du problème
Avant de coder, identifier la cause :
Overflow horizontal → contenu avec largeur fixe trop large, ou overflow: hidden manquant sur body
Texte trop petit → viewport meta absent ou font-size en px fixe
Layout cassé → Flexbox/Grid avec valeurs non fluides
Images débordantes → absence de max-width: 100%
Vérifier en priorité :
<!-- Obligatoire dans <head> — sans ça, mobile-first ne fonctionne pas --><metaname="viewport"content="width=device-width, initial-scale=1">
2. Choix de l'approche de layout
Cas d'usage
Approche recommandée
Grille multi-colonnes
CSS Grid + fr
Alignement 1D (nav, card row)
Flexbox
Mise en page page entière
CSS Grid outer + Flexbox inner
Spacing/padding adaptatif
clamp() sans media query
Composant avec breakpoint précis
Container Queries (2024+)
3. Mobile-first : structure de base
Toujours écrire le style mobile sans media query, puis enrichir avec min-width :
Préférer aux media queries pour les composants réutilisables :
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* Réagit à la taille du parent, pas du viewport */@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
8. Testing
# DevTools Chrome — ordre de test
1. Responsive Mode → glisser de 320px à 1440px progressivement
2. CPU throttling 4x + réseau "Slow 3G" → vérifier les Core Web Vitals
3. Onglet Lighthouse → Mobile audit
4. Outil "Accessibility" → vérifier les tailles de cibles tactiles
# Vrais appareils (obligatoire avant livraison)
- iOS Safari (comportements spécifiques : safe-area, 100vh, scroll)
- Android Chrome
- Samsung Internet si cible grand public