Design Frontend

Ce qu'elle fait

Cette compétence permet à un agent de produire du code d'interface utilisateur frontend et des conseils de design prêts pour la production. Elle couvre l'établissement de jetons de design et d'échelles d'espacement/typographie, la construction de variantes de composants accessibles, l'implémentation de mises en page responsives avec CSS Grid et Flexbox, et l'ajout du support du mode sombre. La compétence fournit des exemples concrets (extraits React/Tailwind, modèles HTML/CSS) et des meilleures pratiques pratiques pour l'accessibilité et la performance.

Quand l'utiliser

Utilisez-la lorsque vous avez besoin d'une bibliothèque de composants, d'une mise en page de page responsive, de composants accessibles ou d'une interface utilisateur compatible mode sombre. Déclenchez sur des demandes telles que "construire un tableau de bord responsive", "créer un composant Card React Tailwind", "ajouter le mode sombre" ou "auditer l'accessibilité et la navigation au clavier". Elle convient aux développeurs front-end, aux designers et aux agents générant du code UI.

Ce qui est inclus

• Scripts : aucun (has_scripts=false)
• Références : aucune incluse (has_references=false)
• Instructions : flux de travail étape par étape — analyser les contraintes, définir les jetons, construire les variantes de composants, implémenter les points de rupture responsives, intégrer l'accessibilité et optimiser le mode sombre. Inclut des exemples de code pour React/Tailwind, des mises en page en grille responsive et des modèles CSS.

Agents compatibles

Fonctionne mieux avec des agents capables de coder (Claude Code, Copilot, OpenAI Codex, Gemini CLI) qui peuvent émettre des extraits spécifiques aux frameworks et adapter les jetons aux besoins du projet.