adapt

Vue d'ensemble

Qu'est-ce que la compétence adapt ?

La compétence adapt s'adresse aux développeurs frontend et aux designers UI qui doivent faire fonctionner leurs produits numériques de manière fluide sur une variété d'appareils et de tailles d'écran. Elle propose un workflow structuré pour adapter des designs existants — comme des mises en page web desktop — à de nouveaux contextes tels que mobile, tablette, impression ou autres plateformes. La compétence couvre les techniques essentielles du design responsive, incluant les points de rupture, les mises en page fluides et l'optimisation des zones tactiles.

À qui s'adresse adapt ?

Utilisez la compétence adapt si vous :

• Mettez à jour un site web ou une application pour une compatibilité mobile ou tablette
• Souhaitez garantir que votre interface fonctionne sur différents appareils et modes d'entrée
• Faites face à des défis d'expérience utilisateur multi-appareils ou multi-plateformes
• Répondez à des demandes de design responsive, d'adaptation de la fenêtre d'affichage ou de support multi-appareils

Problèmes résolus

• Adapter des designs desktop pour mobile ou tablette
• Gérer différents modes d'entrée (tactile, souris, clavier, etc.)
• Prendre en compte les tailles d'écran, résolutions et orientations variées
• Améliorer l'accessibilité et l'ergonomie sur plusieurs plateformes

Comment utiliser

Étapes d'installation

1. Installez la compétence adapt avec la commande suivante :

   npx skills add https://github.com/pbakaus/impeccable --skill adapt
   

2. Commencez par le fichier SKILL.md pour une vue d'ensemble détaillée du workflow. Pour plus de contexte, consultez également README.md, AGENTS.md, metadata.json et les dossiers éventuels comme rules/, resources/ ou references/.

Vue d'ensemble du workflow

• Préparation obligatoire :

  • Lancez d'abord la compétence /frontend-design pour recueillir les principes et le contexte du design. Si aucun contexte n'existe, utilisez /teach-impeccable pour établir une base.
  • Rassemblez les informations sur les appareils cibles, plateformes et scénarios d'utilisation.

• Évaluer le défi d'adaptation :

  • Identifiez le contexte d'origine du design (ex. web desktop, application mobile).
  • Définissez le contexte cible : type d'appareil, mode d'entrée, contraintes d'écran, vitesse de connexion et attentes utilisateur.
  • Listez les défis spécifiques d'adaptation pour votre projet.

• Planifier et réaliser l'adaptation :

  • Déterminez les points de rupture et modifications de mise en page nécessaires.
  • Ajustez les éléments UI pour le tactile ou autres modes d'entrée.
  • Testez sur différents appareils et contextes pour garantir l'ergonomie et la cohérence.

Fichiers recommandés à consulter

• SKILL.md (workflow principal et conseils)

FAQ

Quand utiliser la compétence adapt ?

Utilisez adapt lorsque vous devez faire fonctionner un design existant sur de nouveaux appareils, tailles d'écran ou plateformes — notamment quand un design responsive ou une compatibilité multi-appareils est requise.

Quelles sont les conditions préalables pour utiliser adapt ?

Avant d'utiliser adapt, assurez-vous d'avoir collecté le contexte de design nécessaire en lançant /frontend-design et, si besoin, /teach-impeccable.

adapt prend-il en charge l'adaptation mobile et desktop ?

Oui, adapt convient pour adapter des designs dans les deux sens (desktop vers mobile, ou mobile vers desktop), ainsi que pour les tablettes, l'impression et d'autres contextes.

Où trouver des instructions plus détaillées ?

Consultez le fichier SKILL.md dans le dépôt pour un workflow étape par étape et des ressources supplémentaires. Utilisez l'onglet Fichiers pour explorer les scripts et références associées.