Visualisation de données avec Recharts/Chart.js — graphiques en barres, lignes, aires et camemberts.
Qu'est-ce que compétences ?
Cette compétence permet aux agents IA de générer des visualisations de données interactives et accessibles en utilisant Recharts pour les projets React. Elle impose des règles strictes pour garantir la qualité : enveloppement des graphiques dans `ResponsiveContainer` avec des dimensions relatives, utilisation d'une palette de couleurs adaptée aux daltoniens, étiquetage systématique des axes et des légendes, et formatage lisible des nombres (ex : 1,2K au lieu de 1200). Les types de graphiques sont choisis en fonction des données : lignes pour les tendances temporelles, barres pour les comparaisons, aires pour les volumes, et camemberts (maximum 5 parts) pour les proportions. La compétence évite les graphiques 3D qui déforment la perception et déconseille les camemberts avec plus de 5-6 parts. Elle fonctionne sur n'importe quel projet React/npm et s'intègre facilement dans Cursor, Claude Code ou Codex en respectant les bonnes pratiques de React (props descendantes, pas de chargement de données dans les composants graphiques).