FRmicrow/data-visualization
.claude/skills/frontend/data-visualization/SKILL.md
Créer des graphiques et visualisations. Utiliser quand on implémente Recharts ou D3 dans le frontend.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add FRmicrow/dataFootV1 data-visualizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 2:01 AM4.0s1 file scanned
SKILL.md
- name:
- data-visualization
- description:
- Créer des graphiques et visualisations. Utiliser quand on implémente Recharts ou D3 dans le frontend.
- risk:
- none
When to use
Utilisez cette compétence pour afficher des statistiques, des tendances ou des comparaisons dans l’interface, par exemple dans un tableau de bord.
Instructions
- Déterminez le type de graphique adapté aux données (barres, lignes, secteurs, heatmap).
- Sélectionnez une bibliothèque de visualisation compatible avec votre stack (Chart.js, Recharts) et installez-la.
- Préparez les données en fonction du format attendu (listes de points, objets clés/valeurs).
- Ajoutez des titres, légendes et annotations pour faciliter la compréhension.
- Veillez à l’accessibilité (contraste des couleurs, étiquettes) et à la responsivité sur différents écrans.
Example
Pour un graphique de ventes mensuelles, structurez les données sous forme de tableau [ { mois: 'Janvier', ventes: 5000 }, ... ], puis passez-le à un composant <LineChart> en spécifiant les clés x et y.
Limitations
Cette compétence se limite à la représentation visuelle. Les analyses statistiques ou les agrégations doivent être réalisées au préalable (backend ou service analytique).
Related Skills
FRmicrow/unit-testing-node
development
VerifiedTrustedCommunity
Écrire des tests unitaires Node.js. Utiliser quand on teste une fonction isolée avec Vitest dans backend/test/.
SKILL.mdUpdated Apr 16, 2026
FRmicrow/integration-testing
testing
VerifiedTrustedCommunity
Tester l'intégration entre services. Utiliser quand on vérifie l'interaction contrôleur/service avec Supertest + Vitest.
SKILL.mdUpdated Apr 16, 2026
FRmicrow/frontend-testing-react
development
VerifiedTrustedCommunity
Tester les composants React avec Vitest + Testing Library. Utiliser quand on teste le rendu ou les interactions.
SKILL.mdUpdated Apr 16, 2026
FRmicrow/e2e-testing-playwright
testing
VerifiedTrustedCommunity
Écrire des tests end-to-end Playwright. Utiliser quand on teste l'application complète du point de vue utilisateur.
SKILL.mdUpdated Apr 16, 2026