responsive-designpar Seth Hobson

Responsive Design Skill.

Un skill Claude Code et Codex pour la conception UI : layouts responsives avec container queries, typographie fluide, CSS Grid et breakpoints mobile-first.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 1 989 caractères au total

01 Ce qu'il fait

Ce que fait le Skill responsive-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill met en œuvre des mises en page responsives modernes à l'aide de container queries, de typographie fluide, de CSS Grid et de stratégies de breakpoints mobile-first. Il couvre la réactivité au niveau des composants, les échelles de typographie et d'espacement fluides, les mises en page complexes avec CSS Grid et Flexbox, ainsi que les stratégies de breakpoints pour les systèmes de design. Le skill traite des images et médias responsives, des motifs de navigation adaptative, et des tableaux et affichages de données responsives.

Il met l'accent sur le développement mobile-first, les breakpoints basés sur le contenu plutôt que sur l'appareil, et les container queries pour l'adaptation au niveau des composants. Le skill inclut des recommandations sur les zones tactiles, les propriétés logiques pour l'internationalisation, et l'optimisation des performances via la gestion des images et le chargement différé.

Code UI

Voir l'exemple de prompt ↗

Fonctionnement

01
Commencer en mobile-first
Commencez par les styles mobiles comme base, puis enrichissez progressivement pour les écrans plus grands plutôt que de partir du desktop.
02
Définir des breakpoints basés sur le contenu
Définissez les breakpoints en fonction de l'endroit où le contenu doit se reformer, pas selon des dimensions d'appareil spécifiques.

02 Trouvez celui qui vous convient

Quand utiliser le skill responsive-design

Utilisez le skill responsive-design dans Claude Code ou Codex lorsque le travail est une conception UI de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

Implémenter des mises en page responsives mobile-first
Utiliser les container queries pour la réactivité basée sur les composants
Créer des échelles de typographie et d'espacement fluides
Concevoir des stratégies de breakpoints pour les systèmes de design
Construire des tableaux et affichages de données responsives

03 Dans le skill

Règles que le Skill responsive-design donne à Claude Code et Codex

1 instructions concrètes, valeurs par défaut et limites que le SKILL.md définit pour l'agent — la partie du fichier qui change le résultat.

Optimiser et charger en différé
Optimisez les images pour la performance et chargez en différé le contenu qui apparaît initialement hors écran.

04 Mettez-le en pratique

Installer responsive-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter responsive-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/wshobson/agents --skill responsive-design

Forme générique de la CLI skills pour plugins/ui-design/skills/responsive-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Avant d'accepter le résultat, recherchez ceci dans la transcription et les fichiers :

Le résultat est livré sous forme de code UI, comme le catalogue l'indique pour ce skill.
L'agent nomme le skill responsive-design dans son plan ou sa transcription avant de produire le résultat.
Votre propre contenu, vos noms et vos chiffres apparaissent inchangés dans la sortie.

Dans OpenDesign, importez responsive-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branche main
Fichier du skill: plugins/ui-design/skills/responsive-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
License: MIT D'après LICENSE.
Étoiles du dépôt: 39 635 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour responsive-design.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand utiliser ce skillRépertorie huit scénarios, dont les mises en page mobile-first, les container queries, la typographie fluide et les affichages de données responsives
Modèles détaillés et exemples travaillésRenvoie vers references/details.md pour une documentation plus approfondie des modèles si nécessaire
Bonnes pratiquesHuit principes fondamentaux, dont l'approche mobile-first, les points de rupture de contenu, les valeurs fluides, les container queries et la performance
Problèmes courantsSept problèmes fréquents comme le débordement horizontal, les largeurs fixes, la hauteur de viewport et le dimensionnement des zones tactiles

Description du skill lui-même

« Implémentez des mises en page responsives modernes en utilisant les container queries, la typographie fluide, CSS Grid et les stratégies de breakpoints mobile-first. À utiliser lors de la construction d'interfaces adaptatives, de l'implémentation de mises en page fluides ou de la création de comportements responsives au niveau des composants. »

Description du front-matter tirée de SKILL.md. Le fichier complet fait environ 1 989 caractères. Lire le fichier complet sur GitHub.

Responsive Design

Exécutez responsive-design sur une vraie tâche de conception UI.

Téléchargez OpenDesign, importez responsive-design depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills