Directives de Design Web et d'Accessibilité

Ce qu'elle fait

Cette compétence dote un agent d'un ensemble complet de normes pour le développement web moderne. Elle se concentre sur l'accessibilité (a11y), les mises en page responsives et l'optimisation des performances pour garantir que les applications sont utilisables par tous sur tous les appareils.

Quand l'utiliser

Activez cette compétence lors de l'audit d'interfaces utilisateur existantes pour la conformité à l'accessibilité, la création de nouvelles mises en page responsives à partir de zéro, l'établissement de systèmes de conception ou l'optimisation des Core Web Vitals (LCP, INP, CLS).

Ce qui est inclus

• Normes d'accessibilité : Directives détaillées sur le contraste des couleurs (WCAG 2.1 AA), le HTML sémantique, la navigation au clavier et l'étiquetage ARIA.
• Design Responsive : Modèles pour le développement mobile-first, la typographie fluide utilisant clamp() CSS et les container queries.
• Implémentation Technique : Exemples de code pour les pièges à focus (focus traps), les commutateurs de mode sombre et l'optimisation des images Next.js.
• Objectifs de Performance : Benchmarks des Core Web Vitals et stratégies pour prévenir les décalages de mise en page (CLS).

Agents compatibles

Tout agent impliqué dans le développement frontend, l'audit UI/UX ou l'ingénierie fullstack (ex. Claude Code, Cursor, etc.) utilisant React, Next.js et Tailwind CSS.