Design & visuel
Interfaces Propres
/interfaces-propres
Ce qu’il fait
Tu lui décris une page, un composant (un bouton, un formulaire, une liste) ou une interaction à créer. Il génère le code HTML/CSS/JavaScript en respectant les bonnes pratiques de développement moderne : chaque élément fait une seule chose, les fichiers sont organisés proprement, et le résultat est responsive (il s'adapte aux écrans mobiles et desktop). Ce skill est spécifiquement conçu pour éviter le look « sorti d'une IA » — les interfaces qu'il produit ressemblent à ce que ferait une équipe de design professionnelle.
Quand l’utiliser
Utilise-le quand tu dois créer ou modifier une interface utilisateur — une page d'accueil, un tableau de bord, un formulaire de contact, une liste de produits. Il est aussi utile quand tu as déjà du code qui marche mais qui est visuellement pauvre, ou quand tu veux qu'une interface s'adapte correctement aux mobiles.
Un exemple concret
Tu veux créer une page d'inscription pour ta newsletter avec un champ email, un bouton, et le message de confirmation — propre, professionnel, qui s'affiche bien sur téléphone.
- ✓ Composant `NewsletterForm.tsx` créé avec validation du champ email
- ✓ Styles CSS colocalisés dans `NewsletterForm.module.css`
- ✓ Message de succès animé après soumission
- ✓ Responsive : le formulaire occupe 100% de largeur sur mobile, 480px centré sur desktop
- ✓ Accessibilité : label associé au champ, focus visible, message d'erreur lu par les lecteurs d'écran
→ Une page d'inscription fonctionnelle, responsive, avec un design propre que tu peux montrer à des clients sans avoir honte.
Comment l’installer
Colle ces deux lignes dans Claude Code, puis lance le skill avec /interfaces-propres.
/plugin marketplace add ismax-ai/claude-code-skills-fr
/plugin install ismax-skills-fr@ismax
/interfaces-propresSkill open-source de addyosmani, sous licence MIT. Voir la source d’origine. Je l’ai sélectionné, traduit et adapté en français pour la bibliothèque.
Tu débutes avec Claude Code ?
J’ai écrit un guide de démarrage qui t’explique, pas à pas, ce qu’est un skill, comment installer la bibliothèque et faire tes premiers pas.
Lire le guide de démarrage
L’IA pour les Débutants · SubstackLa marketplace de skills Claude Code gratuits (en français)Lire sur Substack →